时间:2021-05-18
小程序的线程架构
每个小程序包含一个描述整体程序的app实例和多个描述页面的page。
其中app由3个文件构成:
app.json 公共配置文件
app.wxss 公共样式文件
app.js 主体逻辑文件
page页面最多由4个文件构成:
page.jason 页面配置
page.wxml 页面结构
page.wxss 页面样式
page.js 页面主体逻辑
app.js和page.js中包含小程序在生命周期的每个阶段相应的事件。
典型的app.js代码结构如下:
App({ onLaunch:function(){ //小程序启动时执行的初始化工作 }, onShow:function(){ //程序启动或从后台进入前台时,触发执行的操作 }, onHide:function(){ //程序从前台进入后台时,触发执行的操作 },globalConf:{ indexDate:'', matchData:''},dataCache:{},globalData:''})典型的page.js代码结构如下:
Page({ Data:{} onLoad:function(){ //页面加载时,执行的初始化工作 }, onReady:function(){ //页面就绪后,触发执行的操作 }, onShow:function(){ //页面打开时,触发执行的操作 }, onHide:function(){ //页面隐藏时,触发执行的操作 }, onUnload:function(){ //页面关闭时,触发执行的操作 }, //Events handler viewTap:function(){ this.setData({ text:'set some data for updating view.' })}})一个完整的小程序执行的过程或生命周期如下:
app.onLaunch-->app.onShow-->page1.onLoad-->page1.onShow-->page1.onReady(打开程序,第一个页面page1加载完成)-->page1.onHide-->page2.onLoad-->page2.onShow-->page2.onReady (从第1个页面打开第2个页面)-->page2.onUnload-->page1.onShow-->...-->app.onUnload (关闭page2,返回page1...退出小程序)一个page的生命周期开始于onLoad事件,在整个生命周期内onLoad、onReady、onUnload这三个事件各执行一次,onHide和onShow事件在每次页面隐藏和显示时都会触发。
当用户手动触发小程序的退出箭头时,小程序仅触发app.Hide,下次进入小程序时会触发app.onShow以及当前页的page.onShow。仅当小程序在后台运行超过一定时间未被唤起、或者用户手动在小程序的控制栏里点击退出程序、或者小程序内存占用过大被系统关闭时,小程序将被销毁,会触发app.onUnload事件。
每个小程序分为2个线程,view与appServer。
view 线程 appServer线程
.wxml + wxss
ios:safari
Android:X5浏览器
开发工具:chrome
.js
ios:JavaScriptCore
Android:X5内核
开发工具:nwjs
view线程负责解析渲染页面(wxml和wxss文件)。
appServer线程负责运行js。appServer线程运行在jsCore(安卓下运行在X5中,开发工具运行在nwjs中)。由于js不跑在WebView里,就不能直接操纵DOM和BOM,这就是小程序没有window全局变量的原因。
总结
以上所述是小编给大家介绍的微信小程序的线程架构,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
网页的性能优化是前端开发老生常谈的热门话题,其中微信小程序因其页面双线程架构设计,所以性能优化的手段跟传统的H5应用不太一样。今天主要介绍一下微信小程序页面双线
由腾讯云与微信小程序团队联合举办的“小程序·云开发”技术峰会在北京召开。会上,微信小程序团队相关负责人表示“小程序·云开发”系统架构
微信小程序slider相关文章:微信小程序Button微信小程序radio微信小程序slider微信小程序switch微信小程序textarea微信小程序pic
微信小程序switch相关文章:微信小程序Button微信小程序radio微信小程序slider微信小程序switch微信小程序textarea微信小程序pic
微信小程序Button相关文章:微信小程序Button微信小程序radio微信小程序slider微信小程序switch微信小程序textarea微信小程序pic