接上一篇：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