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

发布于 2022-3-31 17:09
浏览
2收藏

本文基于华为开发者文档制作了一个小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的样式与继承父节点的关系、如何实现条件渲染等,仅供参考。如有问题欢迎指正。


©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-3-31 17:09:52修改
4
收藏 2
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐