微信小程序

微信小程序整理3-启动流程&生命周期

2020年2月1日 /

小程序的启动流程图

看懂了小程序的双线程模型渲染机制，很好理解上图

双线程模型参考： https://luojing.top/rocyuan/?p=667

注册小程序App-参数

每个小程序都需要在 app.js 中调用 App 方法注册小程序示例 ； 在注册时, 可以绑定对应的生命周期函数, 在生命周期函数中, 执行对应的代码.
https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

属性类型必填说明
onLaunchfunction否生命周期回调——监听小程序初始化。
onShowfunction否生命周期回调——监听小程序启动或切前台。
onHidefunction否生命周期回调——监听小程序切后台。
onErrorfunction否错误监听函数。
onPageNotFoundfunction否页面不存在监听函数。
onUnhandledRejectionfunction否未处理的 Promise 拒绝事件监听函数。
其他any否开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问

注册App时一般会做什么

1）判断小程序进入场景（扫码进入、小程序列表进入、朋友分享进入……）
https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html
如何确定场景?
在onLaunch和onShow生命周期回调函数中,会有options参数，其中有scene值

2）监听生命周期（获取用户信息业务逻辑，…等）

全局app生命周期
初始化完成：onlaunch
小程序显示：onShow
小程序隐藏：onHide
小程序出错：onError
找不到页面：onPageNotFound

//onlaunch：
获取用户信息：
1）接口即将废弃
wx.getUserInfo({
	success: function (res) {
		//用户信息
		console.log(res)
	}
})

2）需要点击才获取用户信息(1.open-type, 2.bindgetuserinfo)
<button size="mini"
		open-type="getUserInfo"
		bindgetuserinfo="getUserInfo"
		>获取授权</button>

page({
	getUserInfo: (event) {
		console.log(event)
	}
})

3) open-data组件展示用户信息，只能展示
<open-data type="userNickName"></open-data>

3）App()实例只有一个，是全局共享的（单例对象），可以放一些共享数据

共享数据：
app.js
App({
	globalData: {
		name: rocyuan
		age: 18
	}
})

page.js
Page({
	//getApp() 获取App()产生的示例对象
	const app = getApp()
	const name = app.globalData.name
	const name = app.globalData.age
})

注册小程序Page-参数

小程序中的每个页面, 都有一个对应的js文件, 其中调用Page方法注册页面示例 ； 在注册时, 可以绑定初始化数据、生命周期回调、事件处理函数等。 https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

属性类型说明
dataObject页面的初始数据
onLoadfunction生命周期回调—监听页面加载
onShowfunction生命周期回调—监听页面显示
onReadyfunction生命周期回调—监听页面初次渲染完成
onHidefunction生命周期回调—监听页面隐藏
onUnloadfunction生命周期回调—监听页面卸载
onPullDownRefreshfunction监听用户下拉动作
onReachBottomfunction页面上拉触底事件的处理函数
onShareAppMessagefunction用户点击右上角转发
onPageScrollfunction页面滚动触发事件的处理函数
onResizefunction页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTapfunction当前是 tab 页时，点击 tab 时触发
其他any开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问

注册Page时一般会什么

1）监听页面的生命周期函数

page声明周期
onLoad: 页面加载
onShow: 页面显示
onReady: 页面初次渲染完成
onHide: 页面隐藏
onUnload: 页面被卸载掉（关系到跳转）

2）初始化数据 data:{}，用于被wxml展示

page({
  data: {
    message: "hello wx"
  }
})

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

<view bindtap="tapName"></view>
page({
  tapName(e){
    console.log(e)
    console.log("点击")
  }
})

4）监听页面其他事件（滚动，上拉加载更多…页面滚动到底部，下拉刷新）

监听页面滚动事件： 
onPageScroll (obj) {
	console.log(obj)
}

监听页面滚动到底部：
onReachBottom () {
	console.log("滚动到底部")
}

下拉刷新：
onPullDownRefresh () {
	console.log("下拉刷新中")
}

1,247条评论