微信小程序

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

小程序的启动流程图

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

双线程模型参考: 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条评论