本帖最后由 李洋水蛟龙 于 2020-12-20 18:11 编辑
1.在主页面添加一个按钮并响应点击事件
效果显示：
图片1.png (404.17 KB, 下载次数: 0)
2020-12-10 17:53 上传
点击按钮“点我”下方便会显示“我被点击了”说明点击事件已完成
代码如下：
Index.hml文件中
Hello {{title}}
Index.js文件中
export default{
data: {
title: 'World'
},
jltfclickAction(){
console.log("我被点击了");
}
}
index.css文件中
.jltfcontainer {
flex-direction: column;
width: 454px;
height: 454px;
justify-content: center;
align-items: center;
}
.jltftitle {
width: 200px;
font-size: 30px;
text-align: center;
}
.jltfbtn{
width: 200px;
height: 50px;
}
2. 添加训练页面并实现其与主页面之间的相互跳转
效果显示：
图片2.png (35.91 KB, 下载次数: 0)
2020-12-10 17:54 上传
点击“点我”将会进入下一个页面
图片3.png (36.56 KB, 下载次数: 0)
2020-12-10 17:54 上传
当你点击“返回”时会回到第一个页面
代码如下：(新建一个js page 例如：jltfxunlian)
Jltfxunlian.hml文件中
训练页面
Jltfxunlian.css文件中
.jltfcontainer {
flex-direction: column;
width: 454px;
height: 454px;
justify-content: center;
align-items: center;
}
.jltftitle {
width: 200px;
font-size: 30px;
text-align: center;
}
.jltfbtn{
width: 200px;
height: 50px;
}
Jltfxunlian.js文件中
importrouter from'@system.router'
export default{
data: {
},
jltfclickAction(){
router.replace({
uri:'pages/index/index'
});
}
}
3. 验证整个应用和每个页面的生命周期事件
效果显示：
主页面的生命周期显示
图片4.png (374.19 KB, 下载次数: 0)
2020-12-10 17:54 上传
点击“点我”之后主页面会销毁之后出现训练页面
图片5.png (426.02 KB, 下载次数: 0)
2020-12-10 17:55 上传
代码如下:
在两个js文件中加入如下代码
onInit(){
console.log("训练页面的onInit()被调用")
},
onReady(){
console.log("训练页面的onReady()被调用")
},
onShow(){
console.log("训练页面的onShow()被调用")
},
onDestroy(){
console.log("训练页面的onDestroy()被调用")
}
主页面js文件中把“训练页面”改为“主页面”即可
本应用练习参考了张荣超老师部分公开的代码。
