微信小程序选项卡功能开发步骤与方法全解析
1613
2022-12-29
小程序组件的生命周期（小程序的开发周期）
本篇文章给大家谈谈小程序组件的生命周期，以及小程序的开发周期对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
今天给各位分享小程序组件的生命周期的知识，其中也会对小程序的开发周期进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
App() 必须在 app.js 中调用，必须调用且 只能调用一次 ，app.js中定义了一些应用的生命周期函数
（1）onLaunch: 初始化小程序时触发，全局只触发一次
（2）onShow: 小程序初始化完成或用户从后台切换到前台显示时触发
（3）onHide: 用户从前台切换到后台隐藏时触发
（4）onError: 小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
后台：点击左上角关闭，或者按了设备 Home 键离开微信，并没有直接销毁，而是进入后台
前台：再次进入微信或再次打开小程序，相当于从后台进入前台。
官方介绍 https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
js文件中定义了一些页面生命周期函数，下面简述下这些生命周期函数的方法作用
（1）onLoad：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
（2）onShow：加载完成后、后台切到前台或重新进入页面时触发
（3）onReady：页面首次渲染完成时触发
（4）onHide：从前台切到后台或进入其他页面触发
（5）onUnload：页面卸载时触发
官方介绍 https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
通过console.log验证它们的触发顺序
以上是对生命周期粗略的认识，如有不足请指正~
参考链接 https://www.jianshu.com/p/2e48f2468d5f
onLaunch: function(options){
console.log("app.js ---onLaunch---" + JSON.stringify(options));
},
onShow:function(){
console.log("app.js ---onShow---");
},
onHide:function(){
console.log("app.js ---onHide---");
},
onError: function(msg){
console.log("app.js ---onError---" + msg);
},
globalData: {
userInfo: null
}
})
onLaunch 生命周期函数--监听小程序初始化 当小程序初始化完成时小程序组件的生命周期，会触发 onLaunch（全局只触发一次）
onShow 生命周期函数--监听小程序显示 当小程序启动小程序组件的生命周期，或从后台进入前台显示，会触发 onShow
onHide 生命周期函数--监听小程序隐藏 当小程序从前台进入后台，会触发 onHide
onError 错误监听函数 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
globalData 指的全局变量
(onLaunch, onShow 方法会返回一个参数对象， 里面包含了三个参数 ， path,query和scene ，path是打开小程序的路径
query是打开小程序页面url的参数，scene是打开小程序的场景值
)
修改全局变量赋值
在App.js中修改GlobalData的值
在小程序的所有页面中都可以随时调用和写入存放在GlobalData的数据。无论是调用还是写入，第一步都是要让页面与App.js产生关联。所以在页面的对应的JS中，第一句话就要写上：
var app = getApp();
app.globalData.userinfo = 123
1、componentWillMount
监听程序初始化，初始化完成时触发（全局只触发一次），在此生命周期中通过 this.$router.params，可以访问到程序初始化参数。
2、componentDidMount
监听程序初始化，初始化完成时触发（全局只触发一次），在此生命周期中也可以通过 this.$router.params，访问到程序初始化参数，与 componentWillMount 中一致。
3、componentWillReceiveProps
4、shouldComponentUpdate(nextProps, nextState)
页面是否需要更新，返回 false 不继续更新，否则继续走更新流程
5、componentWillUpdate
6、componentDidUpdate(prevProps, prevState)
页面更新完毕
7、componentWillUnmount()
页面卸载时触发，如 redirectTo 或 navigateBack 到其他页面时
8、componentDidShow
程序启动，或从后台进入前台显示时触发，微信小程序中也可以使用 Taro.onAppShow 绑定监听,在此生命周期中通过 this.$router.params，可以访问到程序初始化参数,参数与 componentWillMount 中获取的基本一致
9、componentDidHide
程序从前台进入后台时触发，微信小程序中也可以使用 Taro.onAppHide 绑定监听
10、componentDidCatchError(String error)
程序发生脚本错误或 API 调用报错时触发，微信小程序中也可以使用 Taro.onError 绑定监听
11、componentDidNotFound(Object)
程序要打开的页面不存在时触发，微信小程序中也可以使用 Taro.onPageNotFound 绑定监听
所以上述写法会出现惊奇的结果 哈哈 可以自行运行看看
先了解一下小程序组件的生命周期
[图片上传中...(image-9202b1-1629959126527-0)]
于是我使用了ready 测试发现 部分安卓机 可以操作数据 但是页面底部导航不会更新
看文档发现：
自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。
于是， （这里是在小程序底部导航组件里写这个方法）
测试发现 还是没有更改过来
找资料看到
即可 关于小程序组件的生命周期和小程序的开发周期的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 小程序组件的生命周期的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于小程序的开发周期、小程序组件的生命周期的信息别忘了在本站进行查找喔。
本文目录一览：
微信小程序：渲染流程、生命周期和触发顺序
小程序的生命周期分为 应用生命周期 、 页面生命周期App() 必须在 app.js 中调用，必须调用且 只能调用一次 ，app.js中定义了一些应用的生命周期函数
（1）onLaunch: 初始化小程序时触发，全局只触发一次
（2）onShow: 小程序初始化完成或用户从后台切换到前台显示时触发
（3）onHide: 用户从前台切换到后台隐藏时触发
（4）onError: 小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
后台：点击左上角关闭，或者按了设备 Home 键离开微信，并没有直接销毁，而是进入后台
前台：再次进入微信或再次打开小程序，相当于从后台进入前台。
官方介绍 https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
js文件中定义了一些页面生命周期函数，下面简述下这些生命周期函数的方法作用
（1）onLoad：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
（2）onShow：加载完成后、后台切到前台或重新进入页面时触发
（3）onReady：页面首次渲染完成时触发
（4）onHide：从前台切到后台或进入其他页面触发
（5）onUnload：页面卸载时触发
官方介绍 https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
通过console.log验证它们的触发顺序
以上是对生命周期粗略的认识，如有不足请指正~
参考链接 https://www.jianshu.com/p/2e48f2468d5f
小程序 app生命周期（app全局变量）
App({onLaunch: function(options){
console.log("app.js ---onLaunch---" + JSON.stringify(options));
},
onShow:function(){
console.log("app.js ---onShow---");
},
onHide:function(){
console.log("app.js ---onHide---");
},
onError: function(msg){
console.log("app.js ---onError---" + msg);
},
globalData: {
userInfo: null
}
})
onLaunch 生命周期函数--监听小程序初始化 当小程序初始化完成时小程序组件的生命周期，会触发 onLaunch（全局只触发一次）
onShow 生命周期函数--监听小程序显示 当小程序启动小程序组件的生命周期，或从后台进入前台显示，会触发 onShow
onHide 生命周期函数--监听小程序隐藏 当小程序从前台进入后台，会触发 onHide
onError 错误监听函数 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
globalData 指的全局变量
(onLaunch, onShow 方法会返回一个参数对象， 里面包含了三个参数 ， path,query和scene ，path是打开小程序的路径
query是打开小程序页面url的参数，scene是打开小程序的场景值
)
修改全局变量赋值
在App.js中修改GlobalData的值
在小程序的所有页面中都可以随时调用和写入存放在GlobalData的数据。无论是调用还是写入，第一步都是要让页面与App.js产生关联。所以在页面的对应的JS中，第一句话就要写上：
var app = getApp();
app.globalData.userinfo = 123
Taro组件生命周期
PS：最好放在static静态方法、constructor后面1、componentWillMount
监听程序初始化，初始化完成时触发（全局只触发一次），在此生命周期中通过 this.$router.params，可以访问到程序初始化参数。
2、componentDidMount
监听程序初始化，初始化完成时触发（全局只触发一次），在此生命周期中也可以通过 this.$router.params，访问到程序初始化参数，与 componentWillMount 中一致。
3、componentWillReceiveProps
4、shouldComponentUpdate(nextProps, nextState)
页面是否需要更新，返回 false 不继续更新，否则继续走更新流程
5、componentWillUpdate
6、componentDidUpdate(prevProps, prevState)
页面更新完毕
7、componentWillUnmount()
页面卸载时触发，如 redirectTo 或 navigateBack 到其他页面时
8、componentDidShow
程序启动，或从后台进入前台显示时触发，微信小程序中也可以使用 Taro.onAppShow 绑定监听,在此生命周期中通过 this.$router.params，可以访问到程序初始化参数,参数与 componentWillMount 中获取的基本一致
9、componentDidHide
程序从前台进入后台时触发，微信小程序中也可以使用 Taro.onAppHide 绑定监听
10、componentDidCatchError(String error)
程序发生脚本错误或 API 调用报错时触发，微信小程序中也可以使用 Taro.onError 绑定监听
11、componentDidNotFound(Object)
程序要打开的页面不存在时触发，微信小程序中也可以使用 Taro.onPageNotFound 绑定监听
小程序动态加载底部导航（根据不同角色展示不同导航栏）
测试发现 小程序组件（这里指底部导航组件）生命周期的attached 不支持操作 也就是 当想修改底部导航的内容是不支持的所以上述写法会出现惊奇的结果 哈哈 可以自行运行看看
先了解一下小程序组件的生命周期
[图片上传中...(image-9202b1-1629959126527-0)]
于是我使用了ready 测试发现 部分安卓机 可以操作数据 但是页面底部导航不会更新
看文档发现：
自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。
于是， （这里是在小程序底部导航组件里写这个方法）
测试发现 还是没有更改过来
找资料看到
即可 关于小程序组件的生命周期和小程序的开发周期的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 小程序组件的生命周期的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于小程序的开发周期、小程序组件的生命周期的信息别忘了在本站进行查找喔。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~