欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-01 19:41:04
小程序的线程架构 每个小程序包含一个描述整体程序的app实例和多个描述页面的page。 其中app由3个文件构成: app.json 公共配置文件 app.wxss...

小程序的线程架构

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

总结

以上所述是小编给大家介绍的微信小程序的线程架构,希望对大家有所帮助