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