手把手带你学习小程序 —— 五 (Page相关设置)
小程序Page设置数据
注意：学习本节内容的同学，请先把默认的 index.js文件和 index.wxml文件原有的代码删除进行学习
一、数据渲染
前面就已经接触过数据渲染了，我们把一些数据放在 .js文件中，然后再 wxml 中进行渲染。
先来个简单的示例：
1.1 示例代码
- js 部分代码
Page({
data: {
username:'小程序',
person:{
username:'小小程序',
'age':18
},
},- wxml 部分代码
<view>{{username}}view>
<view>{{person.username}}view>
<view>{{person.age}}view>- 运行结果：
在这里插入图片描述
-
js分析
- username存储的是一个字符串
- person这个对象拥有姓名和年龄2个属性
- person两个的属性username 没加引号，age加了引号
- 解惑： person对象的属性加不加引号都会默认为字符串形式
1.2 修改参数
给定一个情景，如果我们要实时更新
js中每一部分的数值，需要怎么操作呢？
- 方案一：通过 传参 —> 修改值 —> 传参
/**
* 生命周期函数 —— 监听页面加载
*/
onLoad: function (options) {
// 传参 修改 传参
var person = this.data.person;
person.username = '小课'
this.setData({
person: person
})
},- 方案二：直接修改 （setData）
onLoad: function (options) {
// 传参 修改 传参
// var person = this.data.person;
// person.username = '小课'
// this.setData({
// person: person
// })
this.setData({
"person.username":"小课"
})
},
})Tips：数组元素修改，可以直接通过下标修改
两者效果是一样的
解惑：
- onLoad 函数的租用：页面加载触发的时候，一个页面只会调用一次，这里我们会进行一些数据初始化的工作。前面的
js代码我们也备注了，这是一个生命周期函数 —— 页面监听加载，也就是说页面变动一次，数据也hi更新一次。因此我们修改数据的时候，这个函数就会执行一次 - onLoad只是其中一个生命周期函数，后面还有很多个其他的函数，比如 onShow，onHide 等等就不一一介绍了
- 这些生命周期函数 均在
.js文件中运行
二、Page生命周期函数
每当Page 界面配置完成，就会接着调用其生命周期函数。生命周期函数在上面接触过，onLoad() 函数，可以实时更新数据,，接下来我把几个剩下 生命周期函数 一一列举出来，每个功能我尽量使用更加通俗的语言加深大家对此的理解
2.1 Page 生命周期函数的功能
函数 | 功能 |
|---|---|
onLoad() | 页面加载时触发，每次加载都会对数据进行初始化，所以，当我们更新数据的时候，onLoad() 就会起作用 |
onShow() | 当页面加载完成，就把界面显示出来，同时也会调用 onLoad() 方法 |
onReady() | 一个页面只会运行一次，当一个页面渲染完成之后，这个函数的生命周期也就结束了 |
onHide() | 当我们打开一个弹窗时，弹出的界面就把我们当时正在使用的界面给挡住了，也可以理解为隐藏了。这时候调用的就是 onHide()方法 |
onUnload() | 比如我们从 A页面跳转到 B界面 就会执行跳转的方法 |
接下来我们继续以上面的代码为蓝本，我们来比较下这些生命周期函数的执行顺序
2.2 代码示例
//index.js
Page({
data: {
username:'小程序',
person:{
username:'小小程序',
'age':18
},
},
/**
* 生命周期函数 —— 监听页面加载
*/
onLoad: function (options) {
// 传参 修改 传参
// var person = this.data.person;
// person.username = '小课'
// this.setData({
// person: person
// })
this.setData({
"person.username":"小课"
})
console.log("打开了 onLoad()方法");
},
onShow: function(event){
console.log("打开了onShow 方法");
},
onReady: function(event){
console.log("打开了onReady 方法");
},
onHide: function(event){
console.log("打开了 onHide 方法");
},
//这个放一下，由于篇幅过长，就不演示了，这个只要跳转界面就会触发
onUnload: function(){
}
})
在这里插入图片描述
三、微博发文功能实现
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/07/13 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
