02微信小程序-app.json&page.json&小程序的生命周期

使用全局配置文件app.json

app.json 配置文件

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,

它决定了页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

app.json 配置文件中,最主要的配置节点是:

  • pages 数组:配置小程序的页面路径
  • window 对象:用于设置小程序的状态栏、导航条、标题、窗口背景色
  • tabBar 对象:配置小程序的tab栏效果
    注:全局配置详细文档

一.pages数组的用法

app.json 中的 pages 数组,用来配置小程序的页面路径

  • pages 用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径+文件名 信息。
  • 文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json、 .js、 .wxml 和 .wxss 四个文件进行处理。
    image.png
自动创建新页面
  1. 需要新建页面目录 -> 新建页面文件 -> 修改pages数组
  2. 打开 app.json -> pages 数组节点 -> 新增页面路径并保存 -> 自动创建路径对应的页面
设置默认首页
  • 打开 app.json -> pages 数组节点
  • 按需调整数组中路径的顺序,即可修改默认首页
    注意:
    ① 数组的第一项代表小程序的初始页面(首页)。
    ② 小程序中新增/减少页面,都需要对 pages 数组进行修改。

二。window对象

小程序窗口的组成部分
image.png
window节点常用的配置项

image.png

常见的属性配置: 常见的属性配置

1.设置导航栏标题文字内容
  • app.json --> window --> navigationBarTitleText
  • 将属性值修改即可
2.设置导航栏背景色
  • app.json --> window --> navigationBarBackgroundColor
  • 将属性值修改为指定的颜色就可以
3.设置导航栏标题颜色
  • app.json --> window --> navigationBarTextStyle
  • 将属性值修改为指定的颜色就可以black/white
4.全局开启下拉刷新功能

通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为

  • app.json --> window --> 把 enablePullDownRefresh 的值设置为 true
5.设置下拉刷新窗口的背景色

当全局开启下拉刷新功能之后,默认的窗口背景为白色

  • app.json -> window -> backgroundColor
    当全局开启下拉刷新功能之后,默认的窗口背景为白色;如果自定义下拉刷新窗口背景色,设置步骤为 :
    app.json -> window -> 为 backgroundColor 指定16进制颜色值 #eee
6.设置下拉loading的样式

当全局开启下拉刷新功能之后,默认窗口的loading样式为白色

  • app.json --> window --> backgroundTextStyle
    当全局开启下拉刷新功能之后,默认窗口的loading样式为白色,如果要更改loading样式的效果,设置步骤为
7.设置上拉触底的距离

手指在屏幕上的上拉滑动操作,从而加载更多数据的行为

  • app.json --> window --> onReachBottomDistance
    注意: 默认距离为 50px,如果没有特殊需求,建议使用默认值即可

三 .tabBar - 配置Tab栏

tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换;小程序中通常将其分为底部 tabBar 和顶部 tabBar

注意:tabBar 中,只能配置最少2个、最多5个 tab 页签,当渲染顶部 tabBar 的时候,不显示 icon,只显示文本
注: tabbar 详细文档

image.png

tabBar的组成部分
  • backgroundColor:导航条背景色
  • selectedIconPath:选中时的图片路径
  • borderStyletabBar上边框的颜色
  • iconPath:未选中时的图片路径
  • selectedColortab 上的文字选中时的颜色
  • colortab 上的文字默认(未选中)颜色
    image.png
tabBar节点的配置项
1. tabBar 节点的配置项
属性 类型 必填 默认值 描述
color HexColor . tab 上的文字默认颜色,仅支持十六进制颜色
selectedColor HexColor . tab 上的文字选中时的颜色,仅支持十六进制颜色
backgroundColor HexColor . tab 的背景色,仅支持十六进制颜色
borderStyle string black tabBar 上边框的颜色, 仅支持 black / white
list Array . tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab
position string bottom tabBar 的位置,仅支持 bottom/ top
custom boolean false 自定义 tabBar
2.list 节点的配置项
属性 类型 必填 说明
pagePath string 页面路径,必须在 pages 中先定义
text string tab 上按钮文字
iconPath string 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px
selectedIconPath string 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px

注意:

  • 都不支持网络图片
  • 当 position 为 top 时,不显示 icon。

使用页面配置文件page.json

页面级别和全局级别配置的关系

小程序中,app.json 中的 window节点,可以全局配置小程序中每个页面的窗口表现;
如果某些小程序页面,想要拥有特殊的窗口表现,此时,“页面级别的.json配置文件”就可以实现这种需求;
总结:页面级别配置优先于全局配置生效。

页面配置文件中可选的配置项列表

image.png

注意:页面的.json只能设置 window 相关的配置项,以决定本页面的窗口表现。

页面配置文件中可选的配置项列表

image.png

注意:页面的.json只能设置 window 相关的配置项,以决定本页面的窗口表现;

小程序的生命周期

生命周期(Life Cycle)是指一个对象从 创建 -> 运行 -> 销毁 的整个阶段,强调的是一个时间段。

生命周期的两种类型
小程序的生命周期
  • 小程序的启动,表示生命周期的开始
  • 小程序的关闭,表示生命周期的结束
  • 中间小程序运行的过程,就是小程序的生命周期
在小程序中,包含两种类型的生命周期:
  • 应用生命周期:特指小程序从启动 -> 运行 -> 销毁的过程;
  • 页面生命周期:特指小程序中,每个页面的加载 -> 渲染 -> 销毁的过程;
    其中,页面的生命周期范围较小,应用程序的生命周期范围较大,如图所示:


    image.png
什么是生命周期函数

小程序框架提供的内置函数,会伴随着生命周期,自动按次序执行
允许程序员在特定的生命周期时间点上,执行某些特定的操作。例如,页面刚加载的时候,在生命周期函数中自动发起数据请求,获取当前页面的数据;
注意:生命周期强调的是时间段,生命周期函数强调的是时间点。

应用生命周期函数

  • app.js 是小程序执行的入口文件,在 app.js 中必须调用 App() 函数,且只能调用一次。其中,App() 函数是用来注册并执行小程序的。
  • App(Object) 函数接收一个 Object 参数,可以通过这个 Object 参数,指定小程序的生命周期函数。
    app.js代码:
App({
   /**
   * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
   */
  onLaunch: function () {
    // console.log('小程序启动了')
  },
 /**
   * 当小程序启动,或从后台进入前台显示,会触发 onShow
   */
  onShow: function (options) {
    // console.log('小程序显示出来了')
  },

  /**
   * 当小程序从前台进入后台,会触发 onHide
   */
  onHide: function () {
    // console.log('小程序被隐藏到后台了')
  },

  /**
   * 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})
image.png

页面生命周期函数

  • 每个小程序页面,必须拥有自己的 .js 文件,且必须调用 Page() 函数,否则报错。其中 Page() 函数用来注册小程序页面。
  • Page(Object) 函数接收一个 Object 参数,可以通过这个 Object 参数,指定页面的生命周期函数。
    页面生命周期.js:
//index.js
//获取应用实例
const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: { },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) { },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () { },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () { },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { }
})
image.png

你可能感兴趣的:(02微信小程序-app.json&page.json&小程序的生命周期)