微信小程序开发宝典:1微信小程序生命周期
2021/5/13 12:27:16
本文主要是介绍微信小程序开发宝典:1微信小程序生命周期,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
微信小程序开发宝典:1微信小程序生命周期
参考文档:微信开放文档
一、App下的生命周期:
1、onLaunch:初始化完成时触发,只触发一次
例子:
onLaunch: function () { console.log('初始化完成-只触发一次'); }
编译结果:
2、onShow / onHide:从后台进入前台触发/从前台进入后台时触发
例子:
onShow: function (options) { console.log('从后台进入前台触发'); },
onHide: function () { console.log('从前台进入后台触发'); },
(在前台前台进入后后台时可以利用微信开发者工具中的模拟器上方有一个圆圈,点击即可从前台进入后台的测试)
二、page下的生命周期
1、onLoad:页面加载时触发
例子:
onl oad: function (options) { console.log("加载中..."); },
2、onReady:初次渲染完成时触发
例子:
onReady: function () { console.log('初次渲染'); },
3、onShow: 页面显示时触发
例子:
onShow: function () { console.log('页面显示'); },
4、onHide:页面隐藏时触发
例子:
onHide: function () { console.log('页面隐藏'); },
(在测试页面隐藏时我们需要点击模拟器上的圆圈这样可以隐藏页面)
5、onShareAppMessage:用户分享时触发
例子:
onShareAppMessage: function () { console.log('分享+1'); }
(需要点击微信小程序上的三个小点的标志并点击分享给好友触发,值得注意的是他在点击玩分享给好友就触发了,并没有实际分享出去的话也一样触发)
如上图所示,在为发送出去时已经触发,用户一样可以点取消进行不分享,但却触发分享功能
三、全局方法的调用
1、在App中调用:在App中定义一个全局方法object,直接使用this调用即可
测试:
App({ /** * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次) */ onLaunch: function () { console.log('初始化完成-只触发一次' + this.object.info); }, /** * 当小程序启动,或从后台进入前台显示,会触发 onShow */ onShow: function (options) { console.log('从后台进入前台触发'); }, /** * 当小程序从前台进入后台,会触发 onHide */ onHide: function () { console.log('从前台进入后台触发'); }, /** * 当小程序发生脚本错误,或者 api 调用失败时,会触发 one rror 并带上错误信息 */ one rror: function (msg) { }, /** * 自定义全局方法 */ object: { info: '全局方法' } })
2、在Page(页面)中调用,则需要使用getApp()来获取App中的函数。
例子:
// 获取app实例 const appInst = getApp(); Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onl oad: function (options) { console.log("加载中..." + appInst.object.info); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { console.log('初次渲染'); }, /** * 生命周期函数--监听页面显示 */ onShow: function () { console.log('页面显示'); }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { console.log('页面隐藏'); }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { console.log('页面卸载'); }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { console.log('分享+1'); } })
结果:
感谢大家看到这里,如果觉得我写得好的话麻烦大家给我一个
这篇关于微信小程序开发宝典:1微信小程序生命周期的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04微信小程序如何实现点击图片查看大图功能-icode9专业技术文章分享
- 2024-09-28uniapp 小程序获取到数据库的换行符怎么展示-icode9专业技术文章分享
- 2024-09-20微信小程序全栈项目实战:从零开始的全面指南
- 2024-09-20微信小程序项目实战:零基础入门教程
- 2024-09-19微信小程序项目中miniprogram_npm文件跟node_modules文件的差别-icode9专业技术文章分享
- 2024-08-27小程序 单行显示,超出部分省略号显示的方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取到特种设备的刘海屏高度-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取苹果手机底部一横线高度信息方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序 顶部状态栏标签背景为none但还是看不到状态栏什么原因-icode9专业技术文章分享
- 2024-08-21微信小程序全栈入门:从零开始的一站式指南