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

小程序的线程架构

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

总结

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

赞 (0)

相关推荐

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

    小程序的线程架构 每个小程序包含一个描述整体程序的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

  • 微信小程序开发经验总结（推荐）

    一: 参数传值的方法 1: data-id 我们可以给HTML元素添加data-*属性来传递我们需要的值,使用方法说明: (1)设置data-id <view class="block" bindtap="playTap" data-id="{{modle.id}}"> (2): 取值 + 传值 playTap:function(e) { const dataset = e.currentTarget.dataset; wx.navi

  • 微信小程序渲染性能调优小结

    网页的性能优化是前端开发老生常谈的热门话题,其中微信小程序因其页面双线程架构设计,所以性能优化的手段跟传统的 H5 应用不太一样.今天主要介绍一下微信小程序页面双线程架构的特性给页面渲染带来的一些影响,以及应对的一些渲染性能调优策略.为了叙述方便,下文会把微信小程序简称为小程序. 小程序的双线程架构 与传统的浏览器Web页面最大区别在于,小程序的是基于 双线程 模型的,在这种架构中,小程序的渲染层使用 WebView 作为渲染载体,而逻辑层则由独立的 JsCore 线程运行 JS 脚本,双方并不

  • 微信小程序 require机制详解及实例代码

    微信小程序 require机制详解 一, JS模块加载:一次性加载全部JS, 但并不一定立即执行. 先提一提微信小程序架构: 类浏览器 -> HTTP本地服务 -> 云端服务 微信小程序运行的架构,基本上是浏览器 -> HTTP本地服务 -> 云端服务, HTTP本地服务用来读取本地文件或者代理云端的文件资源.读取项目中JS文件, 是由HTTP本地服务取本地存储的脚本文件. 似乎比较简单,一个HTML 引用所有JS文件 既然采用了这种架构,那微信小程序就类似浏览器那样,借助一个HT

  • 微信小程序基础教程之worker线程的使用方法

    微信小程序基础教程之worker线程的使用方法

    前言 我们知道js是单线程的,在有时候需要处理一些密集计算或者是高延迟的时候,总会出现不便.而且,现在的cpu都是多核的,单线程也无法充分发挥电脑的计算能力.正是基于这种情况,才有了worker的诞生.由于微信小程序官方的教程比较看不懂...所以本篇主要介绍一下worker在小程序中的用法. worker的一些说明 本篇主要是在小程序中使用worker,因为说明部分也是和小程序相关. 1.主线程和worker线程之间是通过消息来通信的,主线程不能直接调用worker线程中的函数 2.worker

  • 微信小程序开发的四十个技术窍门总结（推荐）

    前言 微信"小程序"正式上线一周时间,相关话题持续升温.支付宝开发"小程序"的消息也随即曝出,互联网巨头们摩拳擦掌,不少网友调侃说,这势头感觉要挑战现有的"APP帝国"了.那么,面对如此炙手可热的小程序,WeX5移动开发云也没有闲着,经过全网搜索,为大家筛选出一条小程序开发者的必读文章,内容涵盖小程序开发实战需要注意的40个技术点,供大家参考! Q:为什么脚本内不能使用window等对象 A:页面的脚本逻辑是在JsCore中运行,JsCore是一

  • 手把手教你写一个微信小程序（推荐）

    需求 小程序语音识别,全景图片观看,登录授权,获取个人基本信息 一:基础框架 官方开发文档:https://developers.weixin.qq.com/miniprogram/dev/ (其实官方文档写的很清楚了) 1.跟着官方文档一步一步来,新建一个小程序项目就好 2.然后呢,毕竟默认的只是基本骨架,肌肉线条还是要自己填的 app.json 是当前小程序的全局配置 小程序的所有页面路径.界面表现.网络超时时间.底部 tab 需求一:底部tab,我们要像原生APP那样要有是三个常驻的按钮,

  • 微信小程序地图导航功能实现完整源代码附效果图（推荐）

    微信小程序地图导航功能实现完整源代码附效果图（推荐）

    正文: 一:需求及效果图展示 从后端API获取到起始地和目的地的经纬度坐标与地名.用户点击起始地便打开地图展示坐标的附近街景,路线,或者打开外部地图. 二:源代码 <block wx:for="{{data_2}}" wx:key='index' wx:if="{{data_2.length}}"> <view style='margin-left:10rpx;'>订单号: {{item.order_num}}</view> &l

  • 微信小程序实现跳转的几种方式总结（推荐）

    微信小程序实现跳转的几种方式总结（推荐）

    今天把实现微信页面的跳转的几种方法总结分享下 1.使用导航组件,标签,页面链接来实现(可以发现点击时有背景) <!-- sample.wxml --> <view class="btn-area"> <navigator url="../my/my">跳转到新页面</navigator> </view> 参数如下 2.给页面布局加监听bindtap事件,然后在方法里面,通过wx.navigatorTo来实现

  • 微信小程序js文件改变参数并在视图上及时更新【推荐】

    用过VUE的童鞋都知道,vue在改变data里面参数可以以直接用this.XXX=XXX,并且视图层也会立即更新呈现,但是这里我想介绍一下微信小程序是怎样操作data里面参数并在视图层及时更新的 一.简单参数 XX.wxml <view> <text>{{str}}</text> </view> <button bindtap="change">改变</button> XX.js Page({ data: { st

随机推荐