微信小程序的线程架构【推荐】


Posted in Javascript onMay 14, 2019

小程序的线程架构

每个小程序包含一个描述整体程序的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全局变量的原因。

总结

以上所述是小编给大家介绍的微信小程序的线程架构,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
jquery实现选项卡切换代码实例
May 14 #jQuery
Vue表单之v-model绑定下拉列表功能
May 14 #Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 #jQuery
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 #Javascript
vue实现动态按钮功能
May 13 #Javascript
详解小程序之简单登录注册表单验证
May 13 #Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 #Javascript
You might like
php实现插入排序
2015/03/29 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
jquery easyui使用心得
2014/07/07 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
JS前端加密算法示例
2016/12/22 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
vue配置请求本地json数据的方法
2018/04/11 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python实现文件按照日期命名的方法
2015/07/09 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
python如何制作英文字典
2019/06/25 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
python实现实时视频流播放代码实例
2020/01/11 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
销售冠军获奖感言
2014/02/03 职场文书
元旦活动感言
2014/03/08 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
建筑投标担保书
2014/05/20 职场文书
七一讲话心得体会
2014/09/05 职场文书
小学生暑假生活总结
2015/07/13 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
用Java实现简单计算器功能
2021/07/21 Java/Android
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS