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


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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
Javascript !!的作用
Dec 04 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
js判断节假日实例代码
Dec 27 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
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
JavaScript 乱码问题
2009/08/06 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
Javascript window对象详解
2014/11/12 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
js实现内置计时器
2019/12/16 Javascript
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Python的装饰器用法学习笔记
2016/06/24 Python
Python元组常见操作示例
2019/02/19 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
python3.7 的新特性详解
2019/07/25 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
幼儿园安全检查制度
2014/01/30 职场文书
教师节促销活动方案
2014/02/14 职场文书
学风建设演讲稿
2014/09/12 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
出纳试用期自我评价
2015/03/10 职场文书
法律意见书范本
2015/06/04 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技