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


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 相关文章推荐
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
javascript编写简易计算器
May 06 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
JavaScript实现打字游戏
Feb 19 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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中对2个数组相加的函数
2011/06/24 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
php构造函数与析构函数
2016/04/23 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
详解JS函数防抖
2020/06/05 Javascript
Python实现对字符串的加密解密方法示例
2017/04/29 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
使用C++扩展Python的功能详解
2018/01/12 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
python实现决策树分类
2018/08/30 Python
python 自动重连wifi windows的方法
2018/12/18 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
新教师工作感言
2014/02/16 职场文书
硕士生工作推荐信
2014/03/07 职场文书
整改报告怎么写
2014/11/06 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL