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

4-2

在上一节,我们已经把 index.wxmlindex.wxss 写完了。

这一件我们来讲 index.json 页面配置跟 index.js与小程序 page 页面生命周期。

页面配置

每一个小程序的页面也可以使用 .json 文件来对本页面的窗口表现进行配置。

请注意: 页面中的配置项会覆盖 app.jsonwindow 中相同的配置项。

页面配置中只能设置 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的区别:

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

主要区别:

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

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

总结

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

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

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

4-2

在上一节,我们已经把 index.wxmlindex.wxss 写完了。

这一件我们来讲 index.json 页面配置跟 index.js与小程序 page 页面生命周期。

页面配置

每一个小程序的页面也可以使用 .json 文件来对本页面的窗口表现进行配置。

请注意: 页面中的配置项会覆盖 app.jsonwindow 中相同的配置项。

页面配置中只能设置 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的区别:

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

主要区别:

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

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

总结

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

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

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

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

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据