小程序

生命周期

应用周期

• onLaunch 首次打开
• onShow 初始化完成
• onHide 切换

页面周期

• onLoad 加载页面
• onShow 前后台切换
• onHide 前后台切换
• onUnLoad 重定向 / 路由切换
• onPullDownRefresh 下拉
• onReachBottom 上拉
• onShareAppMessage 分享

应用生命周期

1. onLaunch 用户首次打开小程序 全局只触发一次
2. onShow 小程序初始化完成以后触发、从后台进入前台触发
3. onHide 小程序从前台进入后台触发

页面生命周期

1. onLoad 加载页面
2. onSHow 显示页面，从后台，或者重新进入本页面触发
3. onReady 首次显示页面，一个页面只会触发一次
4. onHide 后台运行或者跳转到其他页面触发
5. onUnLoad 重定向 / 路由切换

双线程模型

小程序的渲染层和逻辑层分别由2个线程管理

1. 在渲染层将wxml与wxss转化成js对象也就是虚拟DOM
2. 在逻辑层将虚拟的DOM对象配合生成真实的DOM树，交给渲染层渲染
3. 当数据变化时，逻辑层提供更新数据，js对象发生改变，用diff算法进行比较
   4 将更新的反馈到真实的DOM树中，更新页面

运行机制

1. 热启动：假如⽤户已经打开过某⼩程序，然后在⼀定时间内再次打开该⼩程序，此时⽆需重新启动，只需将后台态的⼩程序切换到前台，这个过程就是热启动；
2. 冷启动：⽤户⾸次打开或⼩程序被微信主动销毁后再次打开的情况，此时⼩程序需要重新加载启动，即冷启动。

遇到的坑

1. 自定义tabbar在页面存在下拉更新（scrollview）的时候，页面被下拉，tabbar也会跟着下拉。

2. require在小程序中不支持绝对路径，只能用相对路径去选取'../../../utils/tool.js'

• 方案：

  App({
      require: function($uri) {
          return require($url);
      }
  })

comp.js

  const Api = app.require('utils/tool.js');

利用require返回uri带上/

3. 组件引用资源路径不能解析特殊字符或汉字

4. {{}}模板中不能执行特殊方法，只能处理简单的四则运算

  const money = 345678;
  <view>{{ money }}</view>

• 利用wxs的format
  vue {{ money | moneyFilter }}
  wxs 实现format

.wxs

  const fnToFixed = function(num) {
      return num.toFixed(2);
  }
  module.exports = {
      fnToFixed
  }

  <wxs src='../../../xxx.wxs' module="filters">

  <view>{{ filters.fnToFixed(money) }}</view>

5.wxs无法使用new Date()

• getDate()

6.setData过程中需要注意对象覆盖

  data: {
      a: '1',
      b: {
        c: 2,
        d: 3
      }
  }

  this.setData({
      b: {
        c: 4
      }
  });

  const { b } = this.data;
  b.c = 4;
  this.setData({ b });
  // wx-update-data

7. IOS的date不支持2020-06-26格式，必须要转成2020/06/26

8. wx接口promise化

  wx-promise-pro

• 安装Promise wx-promise-pro

npm i -S wx-promise-pro

import { promisifyAll } from 'wx-promise-pro';
// before
wx.showLoading({
  success: res => {
      wx.request({
          // ……
      })
  }
})
// after
wx.pro.showLoading({
    title: 'loading',
    mask: true
}).then(() => {
    consol.log('I am in promise');
})

• 自己手写封装一个promise化的接口

wx.request({
  url: '',
  data: (),
  success: res => {}
})
// 实现
wx.pro.request({
    url: '',
    data: ()
}).then(res => {}).catch(res => {})

• 做法：

function request(opt) {
    return new Promise( (resolve, reject) => {
        wx.request({
            ...opt,
            success: res => {
                resolve(res);
            },
            fail: err => {
                reject(err);
            }
        })
    } )
}
function promisify(api) {
    return (opt = {}) => {
        return new Promise((resolve, reject) => {
            api({
                ...opt,
                success: resolve,
                fail: reject
            })
        })
    }
}
promisify(wx.request)(opt);

9. app入口

• 可以通过getApp来获取全局的app()
  a. 如果在App()内部函数中，在调用APP之前用getApp,直接用this即可
  b. 获取getApp之后，可不可以拿到生命周期？可以，但是禁止操作

• page()
  a. getCurrentPage()获取当前page，不要修改页面栈，不要在app.onLaunch时候调用，page还没生成
  b. wx.navigateTo(). 被打开的页面可以通过调用？this.getOpenEventChannel()来获取eventChannel对象
  打开方，也可以在回调中拿到这个对象

10. node属性名不要使用data开头