Taro 学习记录

Taro 生命周期到小程序生命周期的映射

componentWillMount

1. 在普通页面中，这个方法对应了 onLoad 方法。

Page({
    onLoad(query: object) {
      // query 表示的路由参数对象  
    }
})

2. 在 app 入口文件中对应了 onLaunch 方法。

App({
    onLaunch(query: object) {
        //  当小程序初始化完成时，会触发 onLaunch（全局只触发一次） 
        // query 表示的路由参数对象  
    }
})

componentDidMount

1. 在普通页面中，这个方法对应了 onReady 方法

Page({
    onReady() {
        // 表示页面已经加载完毕，此方法只在页面初始化加载完触发一次
    }
})

componentDidShow

1. 在普通页面中，这个方法对应了 onShow 方法

Page({
    onShow() {
        // 表示页面显示/切入前台时触发。比如 home 键切入后台，然后转到前台显示会触发
    }
})

2. 在 app 入口文件中也是同名方法 onShow

App({
    onShow() {
        // 表示小程序显示/切入前台时触发。比如 home 键切入后台，然后转到前台显示会触发
    }
})

componentDidHide

1. 在普通页面中相当于 onHide 方法

Page({
    onHide() {
        // 页面隐藏/切入后台时触发。 如 my.navigateTo 到其他页面或底部 tab 切换等。
    }
})

2. 在 app 入口文件中也是 onHide 方法

App({
    onHide() {
        // 生命周期回调：监听小程序隐藏，当当前小程序页面被隐藏时触发，例如跳转、按下设备 Home 键离开
    }
})

componentWillUnmount

1. 在普通页面中相当于 onUnLoad

Page({
    onUnLoad() {
        // 页面卸载时触发。 如 my.redirectTo 或 my.navigateBack 到其他页面等。
    }
})

componentDidCatchError

1. 在普通页面中无对应方法方法
2. 在 app 入口文件中相当于 onError 方法

App({
    onError(error: String) {
        //  小程序 js 代码发生错误时触发   
    }
})

onLanch 和 onShow 中 query 的属性介绍

属性	类型	描述
query	object	当前小程序的 query，从启动路由的 query 参数解析而来
sence	number	场景值 sence 值，表示的是用户进入小程序的途径
path	string	当前小程序的页面地址，从启动参数 page 字段解析而来，page 忽略时默认为首页
referrerInfo	object	来源信息

比如以下路径 alipays://platformapi/startapp?appId=1999&query=number%3D1&page=x%2Fy%2Fz

App({
    onLaunch(query) {
        // query.query {number:1}
        // query.page  x/y/z
    },
    onShow(query) {
        / query.query {number:1}
        // query.page  x/y/z
    }
})

关于 referrerInfo 属性

属性	类型	描述
appId	string	表示来源小程序的 appID
sourceServiceId	string	来源插件，当处于插件运行模式时可见
extaData	object	来源小程序传过来的数据，比如从一个小程序挑战到另一个小程序带来的额外参数

注意事项（下面的注意事项是 app.js 中的同名方法）

1. 不要在 onShow 中进行 redirectTo 或 navigateTo 等操作页面栈的行为。
2. 不要在 onLaunch 里调用 getCurrentPages()，因为此时 page 还未生成。