本文是照着 张荣超 老师视频教程的实操：https://www.yuque.com/chatterzhao/harmonyos/vtgzm6 上一篇的链接：https://www.yuque.com/chatterzhao/harmonyos/ipoufz 仓库地址：https://gitee.com/zhaoquan/harmonyoswatchdemo

添加训练页面并实现其与主页面的互相跳转

知识点：

• router.repalce
• config.json 中 pages 的设置

创建训练页面

修改训练页面的代码

这里页面框架跟首页一模一样，所以就对应复制代码，然后稍微做修改

<!-- index.hml -->
<div class="container">
    <text class="title">
 <!--        Hello {{title}}-->
             训练页面
    </text>
    <input type="button" class="btn" value="返回" onclick="clickAction"></input>
</div>

在 xunlian.hml 创建时生成的默认代码中：

• 将： Hello {{title}} 改为： 训练页面 。
• 将“点我”改为“返回”，代码为： <input type="button" class="btn" value="返回" onclick="clickAction"></input>

/*index.css*/
.container {
    flex-direction: column;
/*    display: flex;*/
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 454px;
    height: 454px;
}
.title {
    font-size: 30px;
    text-align: center;
    width: 200px;
    height: 100px;
}
.btn{
    width:200px;
    height:50px;
}

训练页面(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',});

主页面的 index.js 文件对应修改：

主页面的 index.js 修改为：

• 从 system 的 router 中导入 router： import router from '@system.router'。
• 使用router.replace实现页面跳转：router.replace({uri:'pages/xunlian/xunlian',});

uri这里填写的page/xxx/xxx，这个是在项目端 config.json控制的，DevEco Studio 2.0 beta，在pages目录右键 -> New ->JS Page 这样的方式创建页面，config.json 里pages数组部分会自动填写

启动模拟器

之前编辑好像保存就刷新这次好像没有，我的操作是，重新点 debug，操作入口：Run -> Debug ‘entry’

下一篇：https://www.yuque.com/chatterzhao/harmonyos/fns3l3

语雀内容