深入学习小程序框架底层原理，培养双线程思维（自研小程序框架能力）

用户16516613430
257 阅读3分钟

深入学习小程序框架底层原理，培养双线程思维

//xia仔k：百度网盘

一、原生小程序

1. 小程序底层架构

传统的HTML：

解析规则是解析html->遇到js解析执行js->遇到css解析css文件

微信小程序：

文件对应关系
wxml ===> html  dom
wxss ===> css  款式
js   ===> js 逻辑
json ===> json

小程序打包之后的文件：

1、WAService.js 框架JS库。提供逻辑层根底的API才能
2、WAWebview.js 框架JS库，提供视图层根底的API才能
3、WAConsole.js 框架JS库。控制台
4、app-config.js 小程序完好的配置。包括我们经过app.json里的全部配置，综合了默许配置型
5、app-service.js 我们本人的JS代码，全部打包到这个文件
6、page-frame.html 小程序视图的模板文件，全部的页面都运用此载入渲染。且全部的WXML都拆解为JS完成打包到这里
7、pages 全部的页面。这个不是我们之前的wxml文件了，主要是处置WXSS转换，运用js插入到header区域。

微信小程序是双线程架构，分为逻辑层和渲染层，在停止文件解析的时分不会发作阻塞。
逻辑层：
（1）解析js，担任逻辑处置、事情逻辑、动态数据的处置
（2）小程序的一切代码逻辑都包含在同一个逻辑线程（逻辑层是单线程），小程序只要一个APP实例，但是有多个page,小程序编译之后将会把一切page打包至同一个js文件

渲染层：
（1）解析wxml、wxss，担任页面的渲染（展现页面构造和款式）
（2）小程序中的每个页面都会维护一个页面的实例，每个页面都有独一的pageId, 因而逻辑层能只是当前与之交互的page实例是哪一个
（3）一个页面的展现逻辑关于一个渲染线程，相似于webview或者iframe

由于小程序逻辑层与视图层是双线程的缘由，他们之间的通讯经过jsBridge停止音讯通讯：

逻辑层setData ===> jsBridge ====> 视图层更新视图
视图层响应用户操作 ===> jsBridge ===> 逻辑层停止用户操作逻辑处置

例：

    Page({
        bindViewTap: function(e) {
            e.mark.myMark === "last" // true
            e.mark.anotherMark === "leaf" // true
            this.setData({
                name:'test'
            })
        }
    })
    
    ~~~~

详细查看方式：
（1）查看小程序逻辑层，翻开调式微信开发者工具---》document.getElementsByTagName('webview')查询一切webviw标签，包含渲染层和逻辑层
console里面输入document查看逻辑层代码
（2）微信小程序开发者工具是运用electron 开发的；经过document.getElementsByTagName('webview')[0].showDevTools(true)查看当前页小程序渲染层代码，
查看小程序组件wx-picker等看到，小程序组件是运用webComponent完成的，将一切逻辑封装在里面

2. 小程序底层代码解析

  1. 查看小程序底层代码方式，help()查看一切快捷命令，openVendor()翻开小程序根底库存储位置。下面包含每个版本的根底库包的信息。该目录下包含两个执行文件wcc.exe，

    wcsc.exe；wcc.exe wcc Compiler -->编译 wxml --> jswxml == 动态 ==> js ==>VDom ==> html./wcc -d index.wxml >> wxml.jswcsc --> WeChat Stylesheet Compile --> 编译 wxss./wcsc -js index.wxss >> wxss.jsrpx --> px
avatar
文章
阅读
粉丝