【FFH】DevEcoStudio北向入门示例-实现页面跳转<JS> 原创 精华

本文基于华为开发者文档制作了一个小demo，相关原理见：
华为开发者文档-快速入门-使用Js语言开发（纯代码）
使用DevEcoStudio版本为DevEco Studio 3.0 Beta2

此文基于JS进行开发。

demo展示：制作一道选择题

页面结构

仅修改以下目录：entry/src/main/js/default/page/

解释：本DEMO一共有两个页面，一个模块（系统模块中的路由组件，用于实现跳转）

实现：点击四个选项的跳转子页面-子页面返回父页面

由于技术原因，实际代码一共有三个页面，其中两个可以通过【条件渲染】方法进行合并（但是我不会在文件间传变量进行判断）

代码讲解&手把手教学（详细讲解在代码注释中）

开发前准备请点此处

编写第一个页面
第一个页面内有一个文本和四个按钮（作为选项），通过text和button组件来实现。在Project窗口，选择“entry > src > main > js > default > pages > index”

打开“index.hml”文件，添加一个文本和四个按钮，代码如下：

<!-- index.hml -->
<div class="container">
<!-- 添加一个文本，为题目内容 -->
    <text class="text">
        以下哪个不是Ability所支持的模板？
    </text>
<!-- 添加四个按钮（作为选项），按钮样式设置为胶囊型，文本显示为“选项内容”，绑定WA/AC事件 -->
    <button class="button" type="capsule" value="Page Ability" onclick="WA"></button>
    <button class="button" type="capsule" value="Data Ability" onclick="WA"></button>
    <button class="button" type="capsule" value="Service Ability" onclick="WA"></button>
    <button class="button" type="capsule" value="Next Ability" onclick="AC"></button>
</div>

打开“index.css”文件，设置文本和按钮的样式，示例代码如下：

/* index.css */
.container {
    flex-direction: column; /* 设置容器内的项目纵向排列 */
    justify-content: center; /* 设置项目位于容器主轴的中心 */
    align-items: center; /* 项目在交叉轴居中 */
    width:100%;
    height:100%;
}
/* 对class="text"的组件设置样式 */
.text {
    font-size: 40px;
}
/* 对class="button"的组件设置样式 */
.button {
    width: 240px;
    height: 55px;
    background-color: #007dff;
    font-size: 30px;
    text-color: white;
    margin-top: 20px;
}

创建AC页面
在Project窗口，打开“entry > src > main > js > default”，右键点击“pages”文件夹，选择“New > JS Page”，命名为“details”，单击回车键。创建完成后，可以看到“pages”文件夹下的文件目录结构如下：

接下来我们修改details目录下的内容：

HML：

<!-- details.hml -->
<div class="container">
    <text class="text">
        恭喜你，回答正确
    </text>
    <button class="button" type="capsule" value="返回上级" onclick="quit"></button>
</div>

CSS：

/* details.css */
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
}
.text {
    font-size: 42px;
    text-align: center;
}
.button {
    width: 240px;
    height: 55px;
    background-color: #007dff;
    font-size: 30px;
    text-color: white;
    margin-top: 20px;
}

创建WA页面（此处可以使用AC页面，使用条件渲染功能完成）

与ac页面同理创建wa页面（details_f），创建好后的目录如下：

代码与ac页面类似，在此省略

实现页面跳转
打开第一个页面的“index.js”文件，导入router模块，页面路由router根据页面的uri来找到目标页面，从而实现跳转。示例代码如下：

// index.js
import router from '@system.router';    //从系统模块中导入路由组件，实现页面跳转

export default {
    AC() {
        router.push ({
            uri:'pages/details/details', // 指定要跳转的页面
        })
    },
    WA() {
        router.push ({
            uri:'pages/details_f/details_f', // 指定要跳转的页面
        })
    }
}

同理，打开第二个页面的“details.js”文件，导入router模块，页面路由router根据页面的uri来找到目标页面，从而实现跳转。示例代码如下：

// details.js
import router from '@system.router';    //从系统模块中导入路由组件，实现页面跳转

export default {
    quit() {
        router.push ({
            uri:'pages/index/index', // 指定要跳转的页面
        })
    }

}

details_f.js与上面类似，代码略去。

在模拟器上编译运行，成功！

本demo还有非常多不完善的地方，如Bottom的样式与继承父节点的关系、如何实现条件渲染等，仅供参考。如有问题欢迎指正。