微信小程序

一、生命周期

应用生命周期

onLaunch: 启动小程序时触发，只执行一次；
onShow：小程序从后台进入前台；
onHide：小程序从前台进入后台；
onPageNotChanged：访问的页面没找到；
onHandledRejection：执行promise出错；
onThemeChanged：切换主题；
onError：调用api出错或脚本出错；

页面生命周期

onLoad：监听页面加载；
onReady：页面初始化渲染完成；
onShow：进入当前页面；
onHide：退出当前页面；
onUnload：卸载当前页面；

组件生命周期

created：创建组件；
ready：监听页面初始化完成；
attached：监听页面展示；
moved：监听页面隐藏；
error：组件报错时调用；
detached：监听页面卸载；

二、跳转有哪些方式

navigationTo

从当前页A跳转到下一页B时不会对A页进行销毁，B可通过navigationBack返回到A页面。返回时，会销毁页面B;
使用该跳转的好处是，可以提升用户访问速度。但是需要注意页面不能过多，过多了会很消耗内存（栈过深）
跳转的url可携带参数，可通过options获取携带过来的参数。

navigationBack

默认返回上一层级，navigationBack(k)，返回k层；
可通过getCurrentPage获取当前页面的栈层级，然后决定返回多少层；
navigationBack会触发onUnload卸载页面事件；

redirectTo

该方法会卸载当前页，然后跳转，可携带参数。

switchTab

tab页跳转，不能携带参数；

三、性能优化

1、减少包体积

1）分包：分包可实现按需加载模块，减少加载包的大小。分的包不能太大，否则影响用户体验。
在pages.json里配置subPackages字段，表明子包的路径。
2）代码压缩；
3）图片尽量不要存到本地，而是通过cdn获取；

2、渲染

1）合理使用setData，避免触发不必要的更新；可将多次setData合并为一次；
2）独立模块拆分封装为不同组件，使渲染粒度更小；
3）减少js导致的布局改变，多使用css动画和transition；

3、数据

将常用的数据进行缓存，减少和服务器的交互；

四、小程序实现原理

和浏览器的单线程不同，小程序是双线程运行，一个渲染线程，一个逻辑处理线程；
小程序视图层用于展示页面，一个页面为一个webview，逻辑层单独为一个webview，所有的逻辑都在这一个webview中，因此小程序至少有2个webview。
视图层和逻辑层通过jsBridge进行通信。逻辑层将数据变化通知给视图层，触发视图层更新，视图层把触发的事件通知给逻辑层进行处理。
为了用户体验，小程序规定一个文件大小不能超过2M，打开页面层级不能超过10层。

五、数据传递方法

1）url携带参数，可为常量也可为对象；
2）从getStorage中获取缓存数据；
3）使用acceptDataFromOpenerPage方法监听传递过来的数据；

A页面:
 handletap: function() {
    wx.navigateTo({
      url: '/pages/set_up/set_up',
      // 接收被打开页面传递到当前页面的值
      events: {
        // acceptDataFromOpenedPage该字段为自定义的
      	acceptDataFromOpenedPage: function(data) {
      		console.log(data); // {data: 'hahaha'}
      }},
      success: function(res) {
       // 向即将被打开页面传递数据
        res.eventChannel.emit('adviser_list', { data: 'test' })
      }
    })
}
 
B页面：
onload: function(option) { 
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'hahaha'});
    // 获取A页面传递过来的值
    eventChannel.on('adviser_list', function (data) {
      console.log(data)； // { data: 'test' }
    });
}

4）在app.js文件中，设置全局共享字段

// app.js
{
	globalData: {};
}
// A.js
const APP = getApp();
APP.globalData