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

 更新时间:2019年05月14日 09:11:40   作者:IDreamo  
这篇文章主要介绍了微信小程序的线程架构,每个小程序包含一个描述整体程序的app实例和多个描述页面的page,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下

小程序的线程架构

每个小程序包含一个描述整体程序的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玩转继承(三)

    Javascript玩转继承(三)

    在前两篇文章中,介绍了构造继承和原型继承。今天把剩下的两种写完,这两种的应用相对于前两种来说应用很少,因此我把他们称为是非主流继承方式
    2014-05-05
  • js 中的switch表达式使用示例

    js 中的switch表达式使用示例

    switch 这种表达式在很多语言中都有,比如java, C等待, 使用switch比使用if else 来得方便,来得清晰,下面为大家详细介绍下其具体的使用,感兴趣的朋友可以参考下
    2013-09-09
  • 原生JS实现拖拽排序的示例代码

    原生JS实现拖拽排序的示例代码

    说到拖拽,应用场景不可谓不多。无论是打开电脑还是手机,第一眼望去的界面都是可拖拽的,靠拖拽实现APP或者应用的重新布局,或者拖拽文件进行操作文件。本文就将利用JS实现拖拽排序,需要的可以参考一下
    2022-12-12
  • JavaScript开发中需要搞懂的字符编码总结

    JavaScript开发中需要搞懂的字符编码总结

    字符集就是字符的集合,字符编码则代表字符集的实际编码规则,是用于计算机解析字符的。本文为大家整理了JavaScript开发中需要搞懂的字符编码,希望对大家有所帮助
    2023-02-02
  • JS中循环遍历数组的几种常用方式总结

    JS中循环遍历数组的几种常用方式总结

    文章主要总结了 JS 中循环遍历数组的十二种常用方式,包括 for 循环(普通和优化版)、forEach、map、filter、for…of、for…in、find、findIndex、some、every、reduce 等,并对它们的特点、语法、优缺点、适用场景及返回值等进行了详细说明,需要的朋友可以参考下
    2025-01-01
  • 鼠标移到图片上变大显示而不是放大镜效果

    鼠标移到图片上变大显示而不是放大镜效果

    这篇文章主要介绍了通过js实现的,当鼠标移到图片上变大显示而不是放大镜效果,需要的朋友可以参考下
    2014-06-06
  • 代码触发js事件(click、change)示例应用

    代码触发js事件(click、change)示例应用

    Chrome , Firfox 不支持fireEvent的方法可以使用dispatchEvent的方法替代,直接给一个兼容的Code,下面有个不错的示例,喜欢的朋友可以收藏下
    2013-12-12
  • js获取页面description的方法

    js获取页面description的方法

    这篇文章主要介绍了js获取页面description的方法,涉及javascript操作页面元素的相关技巧,需要的朋友可以参考下
    2015-05-05
  • JavaScript字符串对象

    JavaScript字符串对象

    这篇文章主要为大家详细介绍了JavaScript字符串对象,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JS设计模式之访问者模式定义与用法分析

    JS设计模式之访问者模式定义与用法分析

    这篇文章主要介绍了JS设计模式之访问者模式定义与用法,结合实例形式分析了javascript设计模式中访问者模式的概念、功能、应用场景及使用方法,需要的朋友可以参考下
    2018-02-02

最新评论