4-2
在上一节，我们已经把 index.wxml 跟 index.wxss 写完了。
这一件我们来讲 index.json 页面配置跟 index.js与小程序 page 页面生命周期。
页面配置
每一个小程序的页面也可以使用 .json 文件来对本页面的窗口表现进行配置。
请注意： 页面中的配置项会覆盖 app.json 的 window 中相同的配置项。
页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性。
# index.json
{
"navigationBarTitleText":"果酱先生"
}我们这里的文案虽然是一样的，但是 navigationBarTitleText 还是覆盖了app.json里面的。
页面逻辑层
使用 Page 构造器注册页面
这也就是为什么我一开始强调 index.js 里面一定要写 Page({}) 不然会报错的原因。
# index.js 代码
Page({
data:{
},
onLoad(){
// 页面创建时执行
},
onShow(){
// 页面出现在前台时执行
},
onReady() {
// 页面首次渲染完毕时执行
},
onHide() {
// 页面从前台变为后台时执行
},
onUnload() {
// 页面销毁时执行
}
})我们先来讲解一下我们上面 Page({})构造函数出现的常用的属性。
| 属性 | 说明 |
|---|---|
| data：是一个对象 | 页面的初始数据 |
| onLoad：是一个函数 | 生命周期回调——监听页面加载，一个页面只执行一次 |
| onShow：是一个函数 | 生命周期回调——监听页面显示 |
页面生命周期
上面我们也粗略的了解到了页面的生命周期，我们拿官网的图再来看一下。
拿着我上面写的详解，再来对比的看看这张图。看是不是稍微理解了一下一点小程序的生命周期。
onLoad()与onShow的区别：
-
onLoad()页面加载时调用，可以获取路由参数，全局只调用一次。 -
onShow页面显示时调用。
主要区别：
从二级页面返回该页面时，onLoad() 不会再次加载，而 onShow 会再次调用。也就是说你从该页面跳到别的页面，点小程序的导航栏的页面返回键回到该页面onLoad()不会再次加载。
这一点等我们写了数据交互之后，我会举例跟大家说明的。
总结
- 页面配置，其实了解了全局配置之后，页面配置不是问题。
- 页面的逻辑层，使用
Page({})注册页面，在app.js中，使用App({})注册小程序。 - 在理解小程序的页面生命周期时，我们也可以回顾一下小程序的生命周期。
- 掌握
onLoad()与onShow的区别，面试的时候会被经常问到。
了解了怎么注册小程序页面之后，我们需要进行数据交互，现在的数据都是我们写死的，并不是动态的。
所以我们需要知道小程序使用什么发送 HTTPS 网络请求的，与后台进行数据交互。在下一章节详细讲解。
4-2
在上一节，我们已经把 index.wxml 跟 index.wxss 写完了。
这一件我们来讲 index.json 页面配置跟 index.js与小程序 page 页面生命周期。
页面配置
每一个小程序的页面也可以使用 .json 文件来对本页面的窗口表现进行配置。
请注意： 页面中的配置项会覆盖 app.json 的 window 中相同的配置项。
页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性。
# index.json
{
"navigationBarTitleText":"果酱先生"
}我们这里的文案虽然是一样的，但是 navigationBarTitleText 还是覆盖了app.json里面的。
页面逻辑层
使用 Page 构造器注册页面
这也就是为什么我一开始强调 index.js 里面一定要写 Page({}) 不然会报错的原因。
# index.js 代码
Page({
data:{
},
onLoad(){
// 页面创建时执行
},
onShow(){
// 页面出现在前台时执行
},
onReady() {
// 页面首次渲染完毕时执行
},
onHide() {
// 页面从前台变为后台时执行
},
onUnload() {
// 页面销毁时执行
}
})我们先来讲解一下我们上面 Page({})构造函数出现的常用的属性。
| 属性 | 说明 |
|---|---|
| data：是一个对象 | 页面的初始数据 |
| onLoad：是一个函数 | 生命周期回调——监听页面加载，一个页面只执行一次 |
| onShow：是一个函数 | 生命周期回调——监听页面显示 |
页面生命周期
上面我们也粗略的了解到了页面的生命周期，我们拿官网的图再来看一下。
拿着我上面写的详解，再来对比的看看这张图。看是不是稍微理解了一下一点小程序的生命周期。
onLoad()与onShow的区别：
-
onLoad()页面加载时调用，可以获取路由参数，全局只调用一次。 -
onShow页面显示时调用。
主要区别：
从二级页面返回该页面时，onLoad() 不会再次加载，而 onShow 会再次调用。也就是说你从该页面跳到别的页面，点小程序的导航栏的页面返回键回到该页面onLoad()不会再次加载。
这一点等我们写了数据交互之后，我会举例跟大家说明的。
总结
- 页面配置，其实了解了全局配置之后，页面配置不是问题。
- 页面的逻辑层，使用
Page({})注册页面，在app.js中，使用App({})注册小程序。 - 在理解小程序的页面生命周期时，我们也可以回顾一下小程序的生命周期。
- 掌握
onLoad()与onShow的区别，面试的时候会被经常问到。
了解了怎么注册小程序页面之后，我们需要进行数据交互，现在的数据都是我们写死的，并不是动态的。
所以我们需要知道小程序使用什么发送 HTTPS 网络请求的，与后台进行数据交互。在下一章节详细讲解。
本文由博客群发一文多发等运营工具平台 OpenWrite 发布