页面配置与Page页面生命周期小程序入门与实战八

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({})构造函数出现的常用的属性。

页面生命周期

上面我们也粗略的了解到了页面的生命周期，我们拿官网的图再来看一下。

拿着我上面写的详解，再来对比的看看这张图。看是不是稍微理解了一下一点小程序的生命周期。

onLoad()与 onShow 的区别：

1. onLoad() 页面加载时调用，可以获取路由参数，全局只调用一次。
2. 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({})构造函数出现的常用的属性。

页面生命周期

上面我们也粗略的了解到了页面的生命周期，我们拿官网的图再来看一下。

拿着我上面写的详解，再来对比的看看这张图。看是不是稍微理解了一下一点小程序的生命周期。

onLoad()与 onShow 的区别：

1. onLoad() 页面加载时调用，可以获取路由参数，全局只调用一次。
2. onShow 页面显示时调用。

主要区别：

从二级页面返回该页面时，onLoad() 不会再次加载，而 onShow 会再次调用。也就是说你从该页面跳到别的页面，点小程序的导航栏的页面返回键回到该页面 onLoad() 不会再次加载。

这一点等我们写了数据交互之后，我会举例跟大家说明的。

总结

• 页面配置，其实了解了全局配置之后，页面配置不是问题。
• 页面的逻辑层，使用 Page({}) 注册页面，在 app.js中，使用 App({}) 注册小程序。
• 在理解小程序的页面生命周期时，我们也可以回顾一下小程序的生命周期。
• 掌握onLoad() 与 onShow 的区别，面试的时候会被经常问到。

了解了怎么注册小程序页面之后，我们需要进行数据交互，现在的数据都是我们写死的，并不是动态的。

所以我们需要知道小程序使用什么发送 HTTPS 网络请求的，与后台进行数据交互。在下一章节详细讲解。

本文由博客群发一文多发等运营工具平台 OpenWrite 发布