小程序双线程模型和生命周期函数

双线程模型总结

界面渲染的整体流程

1、在渲染层将wxml文件与wxss文件转化成js对象也就是虚拟DOM

2、在逻辑层将虚拟的DOM对象配合生成真实的DOM树，再交给渲染层渲染

3、当数据变化时，逻辑层提供更新数据，js对象发生改变，用diff算法进行比较

4、将更新的内容反馈到真实的DOM树中，更新页面

小程序中app.js中的生命周期

//app.js,小程序全局只有一个App对象
// 下文中所说的后台是指：用户将小程序切换到手机的后台运行。这种操作我们叫做从前台切换到后台。和我们平时开发中的后台没有关系
//下文中所说的前台是指：用户将小程序重手机后台运行，调用到用户手机的显示界面，我们叫做从后台切换到前台。
App({

  /*
   *当小程序初始化完成时会触发onlaunch(全局只触发一次)，onlaunch在手机后台到前台切换是不会执行的。如果
   *要他再次执行，除非在手机中关闭（是关闭而不是切换到后台，而是直接删除小程序的后台运行）小程序，然后重新打开，才能执行，
   */
  onLaunch: function () {
    console.log("小程序的初始话：onlaunch")
  },

  /**
   * 当小程序启动或是从后台进入到前台的时候，会执行onshow,
   * 那我们可以通过这个option中的scene值来判断不同进入场景
   */
  onShow:function(option){
    console.log("小程序onshow，：onShow",option)
  },

  /*小程序从前台进入到后台时触发：onHide*/
  onHide:function(){
    console.log("小程序从前台进入到后台的时候，会触发：onHide")
  },

  /*可以在全局使用 */
  globalData: {
    userInfo: null
  }
})

执行App.js生命周期的时候以及在整个App对象中我们可以做什么？

执行App（）函数也就是注册一个app

1、在注册app时候，我们可以通过onshow来判断用户进入小程序的场景

2、我们可以在生命周期函数中，做一些数据请求。

3、我们可以在app中设置一个全局的对象，让所有的页面都可以使用，比如上面的globalData

小程序的页面的生命周期

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

  /**
   * 页面的初始数据
   */
  data: {
    msg:'own is sb',
  },

  /**
   * 生命周期函数--监听页面加载,页面如果不关闭，这个onload只执行一次
   */
  onLoad: function (options) {
      console.log("onLoad")
  },

   /*生命周期函数--监听页面显示，页面从后台切到前台的时候也会执行*/
  onShow: function () {
    console.log("onShow")
  },
    
  /*生命周期函数--监听页面隐藏*/
  onHide: function () {
    console.log("onHide")
  },

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

   /*生命周期函数--监听页面初次渲染真实dom时，就会执行*/
  onReady: function () {

  },

  /*页面相关事件处理函数--监听用户下拉动作，如果你要监听这个动作，然后触发底下的函数的话，你必须"enablePullDownRefresh" ：true配置成可以下拉刷新。*/
  onPullDownRefresh: function () {
      console.log("onPullDownRefresh")
  },

  /*页面上拉触底事件的处理函数，如果要成功触发这个事件，必须页面不够一页显示*/
  onReachBottom: function () {
    console.log("onReachBottom")
  },

})

在页面的page对象中可以做哪些事情

1、在生命周期函数中发送网络请求，向服务器请求数据

2、在data中初始化数据，给wxml使用

3、监听wxml事件，绑定对应的事件函数

4、监听页面的上拉，下拉等