上手做一個華為鴻蒙手錶應用 3 - 兩頁面互相跳轉
接上一篇:https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356408634880779&fid=0101303901040230869
本節內容: 新增訓練頁面並實現其與主頁面的互相跳轉
原始碼倉庫地址:https://gitee.com/zhaoquan/harmonyoswatchdemo
建立訓練頁面
知識點:
建立頁面
頁面跳轉:router.replace
config.json 中 Pages 頁面的管理
修改訓練頁面的程式碼
這裡頁面框架跟首頁一模一樣,所以就對應複製程式碼,然後稍微做修改
<!--xunlian.hml--> <div class="container"> <text class="title"> <!-- Hello {{title}}--> 訓練頁面 </text> <input type="button" class="btn" value="返回" onclick="clickAction"></input> </div>
在 xunlian.hml 建立頁面時生成的預設程式碼中將:
Hello {{title}} 改為: 訓練頁面
將點我改為返回:
訓練頁面 xunlian.css 跟主頁面 index.css 樣式一樣,複製過來不用修改
//xunlian.js import router from '@system.router' export default { data: { // title: 'World' }, clickAction(){ // console.log("我被點選了") router.replace({ uri:'pages/index/index', }); } }
在 xunlian.js 建立頁面時生成的預設程式碼中將:
-
Hello {{title}} 註釋掉,訓練頁面不用這個 。
-
從 system 的 router 中匯入 router: import router from '@system.router'。
-
使用router.replace實現頁面跳轉:router.replace({uri:'pages/index/index',});
uri 這裡填寫的 page/xxx/xxx,這個是在專案端 config.json控制的,DevEco Studio 2.0 beta,在 Pages 目錄右鍵 -> New ->JS Page 這樣的方式建立頁面,config.json 裡 pages 陣列部分會自動填寫
主頁面的 index.js 檔案對應修改:
主頁面的 index.js 修改為:
- 在 js 預設程式碼中將: Hello {{title}} 註釋掉,訓練頁面不用這個 。
- 從 system 的 router 中匯入 router: `import router from '@system.router'。
- 使用router.replace實現頁面跳轉:router.replace({uri:'pages/xunlian/xunlian',});
啟動模擬器
之前編輯好像儲存就重新整理這次好像沒有,我的操作是,重新點 debug,操作入口:Run -> Debug 'entry'
原文連結:https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356576775850798&fid=0101303901040230869
作者:chatterzhao