Hybrid - 小程序原理 - 《Clear Note》

调试微信开发者工具
总结
Taro
文档链接

1.小程序架构和优化
2.横向框架对比预编译、半变异半运行时框架、运行时框架
3.taro源码

小程序开发:
js 逻辑层 -> v8引擎
wxml 视图模板 -> 转换为其他语言或者直接有一个引擎执行
wxss 样式文件

在 iOS 上，小程序逻辑层的 javascript 代码运行在 JavaScriptCore 中，视图层是由 WKWebView 来渲染的，环境有 iOS 12、iOS 13 等；
在 Android 上，小程序逻辑层的 javascript 代码运行在 V8 中，视图层是由自研 XWeb 引擎基于 Mobile Chrome 内核来渲染的；
在开发工具上，小程序逻辑层的 javascript 代码是运行在 NW.js 中，视图层是由 Chromium Webview 来渲染的。

js代码在逻辑层执行
wxml, wxss在视图层执行

两个线程的通信

不会阻塞视图层渲染加载

调试微信开发者工具

document.getElementsByTagName(‘webview’)[0].showDevTools(true, null)
对应的解析引擎解析wx-view，在基础库里面

openVendor()
wcc wxml 源码编译 -> html
wcsc wxss 源码编译 -> css

2.10.0.wxvpkg
WAWebView.js -> 视图层基础库
fundation -> 基础模块 (发布订阅、通信桥梁 ready实践)
wxjsbridge ->
exparser -> 解析和识别wx-view标签 (template), 组件系统，实现了一套自定义的组件模型，类似shadowDOM

WAService.js -> 逻辑层基础库
生命周期
App/Page 实例
路由管理
fundation -> 基础模块 (发布订阅、通信桥梁 ready实践)
wxjsbridge ->

WeixinJSBridge
js <====> native
on 监听原生方法
publish 发布消息到对应的逻辑层或者视图层
invoke 调用原生方法
subscribe 监听对应逻辑层或者视图层发送过来的消息

./wcc -d xx.wxml wxml.js
$gwx()
a = $gwx(‘wx-audio.wxml’)
a() —-> 生成虚拟DOM的函数 -> 基础库
a({ text: “dynamic” })

wcc -> wxss.js -> js(css) -> rpx -> setCssHead ->

总结

eval(js)

    var decodeName = decodeURI("./pages/cart/index.wxml")
    var generateFunc = $gwx(decodeName) 
    if (generateFunc) {
      var CE = (typeof __global === 'object') ? (window.CustomEvent || __global.CustomEvent) : window.CustomEvent;
      document.dispatchEvent(new CE("generateFuncReady", {
        detail: {
          generateFunc: generateFunc
        }
     }))
    } else {
      document.body.innerText = decodeName + " not found"
      console.error(decodeName + " not found")
    }

// 派发generateFuncReady
document.addEventListener('generateFuncReady', () => {
    console.log('---->>>123')
})


document.dispatchEvent(new window.CustomEvent('generateFuncReady'))

基础库监听generateFuncReady 这个事件，渲染视图准备完成
WeixinJSBridge.publish.apply(WeixinJSBridge, )

__wxCode
多线程怎么调用的?

Taro

文档链接

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/framework.html#API
微信小程序架构原理
 实现微信小程序最新运行环境系列(核心篇一