上手作一個華爲鴻蒙手錶應用 3 - 兩頁面互相跳轉

時間 2021-02-18

標籤 css java git json 數組框架 ide debug code router 欄目 CSS 简体版

原文原文鏈接

接上一篇：https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356408634880779&fid=0101303901040230869
本節內容：添加訓練頁面並實現其與主頁面的互相跳轉
源碼倉庫地址：https://gitee.com/zhaoquan/harmonyoswatchdemocss

建立訓練頁面

知識點：java

建立頁面
頁面跳轉：router.replace
config.json 中 Pages 頁面的管理git

修改訓練頁面的代碼

這裏頁面框架跟首頁如出一轍，因此就對應複製代碼，而後稍微作修改json

<!--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}} 改成：訓練頁面
將點我改成返回： <input type="button" class="btn" value="返回" onclick="clickAction"></input>數組

訓練頁面 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 建立頁面時生成的默認代碼中將： ide

Hello {{title}} 註釋掉，訓練頁面不用這個。debug
從 system 的 router 中導入 router： import router from '@system.router'。code
使用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 數組部分會自動填寫router

主頁面的 index.js 文件對應修改：

主頁面的 index.js 修改成：

在 js 默認代碼中將： Hello {{title}} 註釋掉，訓練頁面不用這個。

從 system 的 router 中導入 router： `import router from '@system.router'。

使用router.replace實現頁面跳轉：router.replace({uri:'pages/xunlian/xunlian',});