微信小程序架构分析 (中)

type="text/css" href=http://developer.51cto.com/art/201706/"index.wxss">

个中  会在 dev 模式开启后被调换为一个时光锚点，例如：

这里的 wxss 文件包含的是原始 wxss 文件转换后的 css

以及生成 DOM 的启动脚本：

<script> 
  document.dispatchEvent(new CustomEvent("generateFuncReady", { 
    detail: { 
      generateFunc: $gwx('./page/index.wxml') 
    } 
  })) 
</script>

WAWebview.js 文件中的各个模块(行号为 jsbeautify 之后代码行号，开辟者对象版本：092300)：

1-77 行： WeixinJSBridge 对象兼容层，这个大年夜概只会在调试时用到，因为开辟时和运行时页面都邑被后台以注入的方法添加 WeixinJSBridge 这个对象。我们可以经由过程这段代码看到它裸露的办法： invoke invokeCallbackHandleron publish subscribe subscribe subscribeHandler。
78-235 行：Reporter 对象，它的感化就是发送缺点和机能统计数据给后台
236-596 行：wx 对象，页面的核心之一，一方面封装 WeixinJSBridge 的 invokeMethod 方位为易于调用的情势(例如 redirectTo, navigateTo等)，另一方面封装 WeixinJSBridge 回调办法，调用者可以应用wx.onAppDataChange(callback) 添加数据变革的回调函数，最后供给wx.publishPageEvent 发送页面事宜到后台
607-1267 行：wxparser 对象，供给 dom 到 wx element 对象之间的映射操作，供给元素操作治理和事宜治理功能
1268-1285 行：转发 window 上的 animation 和 transition 相干的动画事宜到 exparser
1286-1313 行：订阅并转发 WeixinJSBridge 供给的全局事宜到 exparser
1324-1345 行：转发 window 上的 error 以及各类表单事宜到 exparser
1347-3744 行：应用 exparser.registerBehavior 和exparser.registerElement 办法注册各类以 wx- 做为标签开首的元素到 exparser
3744-4498 行：virtual dom 衬着算法实现，供给 diff apply render 等办法，该模块接口根本与 virtual-dom 一致，这里特其余处地点于它所 diff 和生成的并不是原生 DOM，而是各类模仿了 DOM 接口的 wx element 对象
4599-4510 行：插入默认样式到页面

大年夜页面 data 到 dom 的重要流程如下：

var vtree 
var rootNode 
 
document.addEventListener("generateFuncReady", function(e) { 
  var generateFunc = e.detail.generateFunc; 
  wx.onAppDataChange(function(obj) { 
    // 归并 data 到现有 data 
    DataStore.setData(obj.data) 
    // 生成 virtual dom 的 javascript plain object 
    var props = generateFunc(DataStore.getData()) 
 
    // 第一次衬着 
    if (obj.options.firstRender) { 
      vtree = createVirtualTree(props, true) 
      rootNode = vtree.render() 
      rootNode.WordStrDocumentElement(document.body) 
      wx.initReady() 
    } else { 
      var other_vtree = createVirtualTree(props, false) 
      var patches = vtree.diff(other_vtree) 
      patches.apply(rootNode) 
      vtree = other_vtree 	
			 2/5   首页 上一页 1 2 3 4 5 下一页 尾页	
			

　　推荐阅读
　　微信小程序架构分析 (上)
【引自第九法度榜样的博客】信赖不少上手试用了微信小法度榜样开辟者对象的开辟者都邑对其实现有些困惑， 本文试图对其架构模型进行一些解析。如出缺点之处，迎接留言指出。本文分为以下几个部分：    小法度榜样调试>>>详细阅读


本文标题：微信小程序架构分析 (中)
地址：http://www.17bianji.com/lsqh/35673.html
 1/2    1