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

在上一节,我们已经把 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:{
         message""        
   },
   onLoad(){
   
       // 页面创建时执行
   },
   onShow(){
   
       // 页面出现在前台时执行
       
   },
   onReady() {
   
       // 页面首次渲染完毕时执行
    },
     onHide() {
     
       // 页面从前台变为后台时执行
     },
     onUnload() {
     
       // 页面销毁时执行
     }

   
})

我们先来讲解一下我们上面 Page({})构造函数出现的常用的属性。

属性说明
data:是一个对象页面的初始数据
onLoad:是一个函数生命周期回调——监听页面加载,「一个页面只执行一次」
onShow:是一个函数生命周期回调——监听页面显示
页面生命周期

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

image

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

onLoad()onShow的区别:

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

「主要区别:」

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

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

总结

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

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

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