小程序运行机制及声明周期函数

小程序运行机制

整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。

每个小程序都需要在 app.js 中调用 App 方法注册小程序示例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

App(Object object)

app.js作为项目的入口文件，用于创建应用程序对象

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

// app.js
App({
    onLaunch:function(){……
    },
    globalData:{……
    }
})

页面加载顺序

默认加载页面：

//app.json
{
    "pages":[
        "pages/index/index",
        "pages/logs/logs"
        ],
}

页面js文件

index.js

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

//index.js
//获取应用实例
const app=getApp()
Page({
    data:{……
    },
//事件处理函数
    bindViewTap:function(){……
    },
    onload:function(){……
    },
    getUserInfo:function(e){……
    }
})

参数

参数属性 	类型 	描述
data 	Object 	页面的初始数据
onLoad 	Function 	生命周期函数--监听页面加载，触发时机早于onShow和onReady
onReady 	Function 	生命周期函数--监听页面初次渲染完成
onShow 	Function 	生命周期函数--监听页面显示，触发事件早于onReady
onHide 	Function 	生命周期函数--监听页面隐藏
onUnload 	Function 	生命周期函数--监听页面卸载
onPullDownRefresh 	Function 	页面相关事件处理函数--监听用户下拉动作
onReachBottom 	Function 	页面上拉触底事件的处理函数
onShareAppMessage 	Function 	用户点击右上角转发
onPageScroll 	Function 	页面滚动触发事件的处理函数
其他 	Any 	可以添加任意的函数或数据，在Page实例的其他函数中用 this 可以访问

小程序加载及生命周期

几个核心生命周期函数

大部分应用，应用的是onLoad函数

执行顺序：onload -> on shouw -> on ready

onLoad

页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

onShow

页面显示/切入前台时触发。

onReady

页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

onHide

页面隐藏/切入后台时触发。

onUnload

页面卸载时触发。

示例程序 test页面的js文件 test.js：

// pages/test/test.js
Page({

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     console.log("OnLoad OK");
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("OnReady OK");
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("OnShow OK !");
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("onHide OK !");
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("onUnload OK !");
  },

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

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("onReachBottom OK !");
  },

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

  }
})

输出：

OnLoad OK
test.js:29 OnShow OK !
test.js:22 OnReady OK

特殊回调函数：

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

  },

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

  },

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

  }
})

下部导航栏

tabBar

将图标的图片文件夹放入项目文件夹中

在项目的app.json项目 windows条目下方，加入下面的条目：

 "tabBar": {
    "list":[
      {
      "text":"主页",
      "pagePath":"pages/index/index",
      "iconPath":"images/wx2-26.png",
      "selectedIconPath": "images/wx2-26.png"
      },
      {
        "text": "测试",
        "pagePath": "pages/test/test",
        "iconPath": "images/wx2-26.png",
        "selectedIconPath": "images/wx2-26.png"
      }
    ]
  },