小程序的生命周期——App.js

App() 必需在 app.js 中注册，，，且不可注册多个。。。。。以是App（）要领在一个小程序中有且仅有一个。。。。。

App() 函数用来注册一个小程序。。。。。接受一个 object 参数，，，其指定小程序的生命周期函数等。。。。。先上代码：

App({
  onLaunch: function () {
      console.log('App onLaunch');

  },

  onShow:function (){
     console.log('App onShow');

  },

  onHide:function(){
      console.log('App onHide');

  },
  onError:function(){
     console.log('App onError');

  },

  getPics: function() {
      return this.globalData.picList;
  },
  globalData:{
      picList: [] // 图片列表
  },

  globalName: 'tangdekun'

});

最外层的整个{ }就是一个object 参数。。。。。

通过表格的形式看App()中的object参数说明：

将原有的app.js中替换为上面的代码，，，首次翻开小程序，，，可以在Log信息中看到以下Log信息,会看到onShow（）要体会执行两次

App onLaunch App onShow() App onShow()

前台、后台界说： 当用户点击左上角关闭，，，或者按了装备 Home 键脱离微信，，，小程序并没有直接销毁，，，而是进入了后台；；当再次进入微信或再次翻开小程序，，，又会从后台进入前台。。。。。

只有当小程序进入后台一准时间，，，或者系统资源占用过高，，，才会被真正的销毁。。。。。

注重：

1.不要在界说于 App() 内的函数中挪用 getApp() ，，，使用 this 就可以拿到 app 实例。。。。。

2.不要在 onLaunch 的时间挪用 getCurrentPage()，，，此时 page 还没有天生。。。。。

3.通过 getApp() 获取实例之后，，，不要私自挪用生命周期函数。。。。。

2.页面的生命周期

Page() 函数用来注册一个页面。。。。。接受一个 object 参数，，，其指定页面的初始数据、生命周期函数、事务处理函数等。。。。。

生命周期函数

onLoad: 页面加载
    一个页面只会挪用一次。。。。。
    吸收页面参数   可以获取wx.navigateTo和wx.redirectTo及中的 query。。。。。

onShow: 页面显示
    每次翻开页面都会挪用一次。。。。。

onReady: 页面首次渲染完成
    一个页面只会挪用一次，，，代表页面已经准备稳当，，，可以和视图层举行交互。。。。。


onHide: 页面隐藏
    当navigateTo或底部tab切换时挪用。。。。。

onUnload: 页面卸载
    当redirectTo或navigateBack的时间挪用。。。。。
1234567891011121314151617

其中APP的生命周期和页面的生命周期是相互交织的：举例：

我们有页面Test和Test1，，，我们在test.js,test1.js和App.js的生命周期要领中都打印log，，，代码如下：

test1.js

Page({
  data:{
    names:"tangdekun test1"
  },
  onLoad:function(options){
    // 生命周期函数--监听页面加载
    console.log("test1 onLoad");
  },
  onReady:function(){
    // 生命周期函数--监听页面首次渲染完成
    console.log("test1 onReady");
  },
  onShow:function(){
    // 生命周期函数--监听页面显示
   console.log("test1 onShow");
  },
  onHide:function(){
    // 生命周期函数--监听页面隐藏
     console.log("test1 onHide");
  },
  onUnload:function(){
    // 生命周期函数--监听页面卸载
     console.log("test1 onUnload");
  },
  onPullDownRefresh: function() {
    // 页面相关事务处理函数--监听用户下拉行动
     console.log("test1 onPullDownRefresh");
  },
  onReachBottom: function() {
    // 页面上拉触底事务的处理函数
     console.log("test1 onReachBottom");
  }

})

test.js

Page({
  data:{
    name:"test"
  },
  onLoad:function(options){
    // 生命周期函数--监听页面加载
    console.log("test onLoad");
  },
  onReady:function(){
    // 生命周期函数--监听页面首次渲染完成
    console.log("test onReady");
  },
  onShow:function(){
    // 生命周期函数--监听页面显示
   console.log("test onShow");
  },
  onHide:function(){
    // 生命周期函数--监听页面隐藏
     console.log("test onHide");
  },
  onUnload:function(){
    // 生命周期函数--监听页面卸载
     console.log("test onUnload");
  },
  onPullDownRefresh: function() {
    // 页面相关事务处理函数--监听用户下拉行动
     console.log("test onPullDownRefresh");
  },
  onReachBottom: function() {
    // 页面上拉触底事务的处理函数
     console.log("test onReachBottom");
  },
  onShareAppMessage: function() {
    // 用户点击右上角分享
    return {
      title: '分享页面', // 分享问题
      desc: '这是一个分享的测试', // 分享形貌
      path: 'pages/waimai/waimai' // 分享路径
    }
  },
  navigateToPageB: function() {
    wx.navigateTo({
      url: '../../pages/pageB/pageB?id=3',
      success: function(res){

      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
  redirectToPageA : function(){
    wx.redirectTo({
      url: '../../pages/pageA/pageA?id=4',
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
 switchTabToTest1:function(){
   wx.switchTab({
     url: '../../pages/test1/test1',
     success: function(res){
       // success
     },
     fail: function() {
       // fail
     },
     complete: function() {
       // complete
     }
   })
 } 

})

app.js

//app.js
App({
  onLaunch: function () {
      console.log('App onLaunch');

  },

  onShow:function (){
     console.log('App onShow1'+this.globalName);

  },

  onHide:function(){
      console.log('App onHide');

  },
  onError:function(){
     console.log('App onError');

  },

  getPics: function() {
      return this.globalData.picList;
  },
  globalData:{
      picList: [] // 图片列表
  },

  globalName: 'tangdekun'

});

我们将test页面设置为首页【在app.json中设置】，，，程序会自动加载test页面，，，挪用test.js中的生命周期要领，，，打印Log信息如下：

然后点击菜单栏【作业中心】test1，，，会挪用test 的onHide,test1的onLoad,onShow,onReady，，，打印Log信息如下：

在点击【朋侪圈】test，，，会挪用test1的onHide要领，，，test的onshow要领，，，而不会挪用test的onLoad,onReady要领，，，log信息如下：

通过实例我们一起明确一下官方的小程序页面的生命周期：

View thread是pp电子wxml文件，，，AppServiceThread就是我们js文件中研究的页面的生命周期。。。。。这里我们可以看到每个生命周期要领的挪用顺序以及和Wxml之间的信息交流。。。。。各人可以简略的看一下就好。。。。。

由于页面的生命周期和页面的路由【即页面之间的跳转方式】有关，，，以是接下来我会向各人展示页面跳转的三种方式和种种跳转方式之下的生命周期要领的调理。。。。。

小程序工具提供多类型商城/门店小程序制作，，，可视化编辑 1秒天生5步上线。。。。。通过拖拽、拼接？？？榻峁剐〕绦蛏坛且趁，，，所看即所得，，，只需要美工就能做出细腻商城。。。。。更多小程序市肆请审查：小程序市肆