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

【引自第九程序的博客】本文探讨一下小程序的 view 模块和 service 模块是如何构成的。

成都创新互联公司主要从事网站制作、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务浦口,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

打开微信 web 开发者工具，然后输入 openVendor() 便会打开 WeappVendor这个目录，这里包含了 view 模块和 service 模块使用的几个核心文件：

  • wcc 可执行程序，用于将 wxml 转为 view 模块使用的 js 代码，使用方式为wcc xxx.wxml
  • wcsc 可执行程序，用于将 wxss 转为 view 模块使用的 css 代码，使用方式为 wcsc xxx.wxss
  • WAService.js 提供 service 模块大部分功能，下面会有详细介绍
  • WAWebview.js 提供 view 模块大部分功能，下面会有详细介绍

view 页面详解

view 页面的 template 如下：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.    
    5. 
  
  
  
  
  5.    
    6. 
  
  
  
  
  6.    
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8.    
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10.    
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12.    
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14.    
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16.    
    17. 
  
  
  
  
  17.  
    18. 
  
  
  
  
  18.    
    19. 
  
  
  
  
  19.  
    20. 
  
  
  
  
  20.    
    21. 
  
  
  
  
  21.  
    22. 
  
  
  
  
  22.    
    23. 
  
  
  
  
  23.  
    24. 
  
  
  
  
  24.    
    25. 
  
  
  
  
  25.  
    26. 
  
  
  
  
  26.    
    27. 
  
  
  
  
  27.  
    28. 
  
  
  
  
  28.    
    29. 
  
  
  
  
  29.  
    30. 
  
  
  
  
  30.    
    31. 
  
  
  
  
  31.  
    32. 
  
  
  
  
  32.    
    33. 
  
  
  
  
  33.  
    34. 
  
  
  
  
  34.    
    35. 
  
  
  
  
  35.  
    36. 
  
  
  
  
  36.  
    37. 
  
  
  
  
  37.  
    38. 
  
  
  
  
  38.   
     
    39. 
  
  
  
  
  39.  
    40. 
  
  
  
  
  40.  
    41. 
  
  
  
  
  41.   
    42.

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

会被 WAWebview.js 内代码替换

到 之间暂时没有被使用到

会被 wcc 命令生成后的 js 代码替换

除了上面这些，页面上还会被插入页面和应用的 style 标签，如：

 
 
 
 
    
  
  
  
  
  1.  
    2.

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

以及生成 DOM 的启动脚本：

 
 
 
 
    
  
  
  
  
  1.   
    2.

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 的主要流程如下：

 
 
 
 
    
  
  
  
  
  1. var vtree 
    2. 
  
  
  
  
  2. var rootNode 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. document.addEventListener("generateFuncReady", function(e) { 
    5. 
  
  
  
  
  5.   var generateFunc = e.detail.generateFunc; 
    6. 
  
  
  
  
  6.   wx.onAppDataChange(function(obj) { 
    7. 
  
  
  
  
  7.     // 合并 data 到现有 data 
    8. 
  
  
  
  
  8.     DataStore.setData(obj.data) 
    9. 
  
  
  
  
  9.     // 生成 virtual dom 的 javascript plain object 
    10. 
  
  
  
  
  10.     var props = generateFunc(DataStore.getData()) 
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12.     // ***次渲染 
    13. 
  
  
  
  
  13.     if (obj.options.firstRender) { 
    14. 
  
  
  
  
  14.       vtree = createVirtualTree(props, true) 
    15. 
  
  
  
  
  15.       rootNode = vtree.render() 
    16. 
  
  
  
  
  16.       rootNode.replaceDocumentElement(document.body) 
    17. 
  
  
  
  
  17.       wx.initReady() 
    18. 
  
  
  
  
  18.     } else { 
    19. 
  
  
  
  
  19.       var other_vtree = createVirtualTree(props, false) 
    20. 
  
  
  
  
  20.       var patches = vtree.diff(other_vtree) 
    21. 
  
  
  
  
  21.       patches.apply(rootNode) 
    22. 
  
  
  
  
  22.       vtree = other_vtree 
    23. 
  
  
  
  
  23.       document.dispatchEvent(new CustomEvent("pageReRender", {})); 
    24. 
  
  
  
  
  24.     } 
    25. 
  
  
  
  
  25.   }) 
    26. 
  
  
  
  
  26. })  
    27.

上面的 DataStore 对象提供合并和获取当前页面 data 对象的功能，其实现如下：

 
 
 
 
    
  
  
  
  
  1. var DataStore = (function() { 
    2. 
  
  
  
  
  2.   var data = {} 
    3. 
  
  
  
  
  3.   return { 
    4. 
  
  
  
  
  4.     getData: function() { 
    5. 
  
  
  
  
  5.       return data 
    6. 
  
  
  
  
  6.     }, 
    7. 
  
  
  
  
  7.     setData: function(e) { 
    8. 
  
  
  
  
  8.       for (var t in e) { 
    9. 
  
  
  
  
  9.         for (var n = (0, parsePath)(t), o = data, a = void 0, s = void 0, c = 0; c < n.length; c++) Number(n[c]) === n[c] && Number(n[c]) % 1 === 0 ? Array.isArray(o) || (a[s] = [], o = a[s]) : "[object Object]" !== Object.prototype.toString.call(o) && (a[s] = {}, o = a[s]), s = n[c], a = o, o = o[n[c]]; 
    10. 
  
  
  
  
  10.         a && (a[s] = e[t]) 
    11. 
  
  
  
  
  11.       } 
    12. 
  
  
  
  
  12.     } 
    13. 
  
  
  
  
  13.   } 
    14. 
  
  
  
  
  14. })() 
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16. // 解析 key 为 data 内对象的路径字符串 
    17. 
  
  
  
  
  17. function parsePath(e) { 
    18. 
  
  
  
  
  18.   for (var t = e.length, n = [], i = "", r = 0, o = !1, a = !1, s = 0; s < t; s++) { 
    19. 
  
  
  
  
  19.     var c = e[s]; 
    20. 
  
  
  
  
  20.     if ("\\" === c) s + 1 < t && ("." === e[s + 1] || "[" === e[s + 1] || "]" === e[s + 1]) ? (i += e[s + 1], s++) : i += "\\"; 
    21. 
  
  
  
  
  21.     else if ("." === c) i && (n.push(i), i = ""); 
    22. 
  
  
  
  
  22.     else if ("[" === c) { 
    23. 
  
  
  
  
  23.       if (i && (n.push(i), i = ""), 0 === n.length) throw new Error("path can not start with []: " + e); 
    24. 
  
  
  
  
  24.       a = !0, o = !1 
    25. 
  
  
  
  
  25.     } else if ("]" === c) { 
    26. 
  
  
  
  
  26.       if (!o) throw new Error("must have number in []: " + e); 
    27. 
  
  
  
  
  27.       a = !1, n.push(r), r = 0 
    28. 
  
  
  
  
  28.     } else if (a) { 
    29. 
  
  
  
  
  29.       if (c < "0" || c > "9") throw new Error("only number 0-9 could inside []: " + e); 
    30. 
  
  
  
  
  30.       o = !0, r = 10 * r + c.charCodeAt(0) - 48 
    31. 
  
  
  
  
  31.     } else i += c 
    32. 
  
  
  
  
  32.   } 
    33. 
  
  
  
  
  33.   if (i && n.push(i), 0 === n.length) throw new Error("path can not be empty"); 
    34. 
  
  
  
  
  34.   return n 
    35. 
  
  
  
  
  35. } 
    36.

可以看到，每次 data 变化之后，小程序就会开始整个页面的 diff patch 过程。

对于原生实现的组件， exparser 会在监视到数据变化后发送对应事件到 WeixinJSBridge。

service 页面详解

service 页面会被被拼接为以下的样子：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.    
    5. 
  
  
  
  
  5.    
    6. 
  
  
  
  
  6.    
    7. 
  
  
  
  
  7.    
    8. 
  
  
  
  
  8.    
    9. 
  
  
  
  
  9.    
    10. 
  
  
  
  
  10.    
    11. 
  
  
  
  
  11.    
    12. 
  
  
  
  
  12.    
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16.    
    17. 
  
  
  
  
  17.  
    18. 
  
  
  
  
  18.  
    19. 
  
  
  
  
  19.   
    20.

除了配置和开发者编写的页面、app.js，页面还在加载了 asdebug.js 和 WAService.js 两个文件。

asdebug.js 文件位于 nwjs 项目目录下，路径为app/dist/weapp/appservice/asdebug.js。 它包含了两个部分，一个是 WeixinJSBridge 针对 service 模块的实现，另一块是一些方便命令使用的接口， 例如：help() 会告诉你一些可用的函数：

该文件只会在开发者工具内被引入，如果小程序在微信内运行，应该会由微信底层提供 WeixinJSBridge。

WAService 负责 service 模块的一些核心逻辑，它包含以下部分 (行号为 jsbeautify 之后代码行号，开发者工具版本：092300)：

  • 1-78 行： 跟 WAWebview.js 一样的 WeixinJSBridge 兼容模块
  • 79-245 行： 跟 WAWebview.js 一样的 Reporter 模块
  • 246-1664 行：比 WAWebview.js 中 wx 功能更为丰富 wx 接口模块
  • 1665-2304 行：appServiceEngine 模块，提供 Page，App，GetApp 接口
  • 2305-2360 行： 为 window 对象添加 AMD 接口 require define

现在的 WAService 还有有很多地方依赖 window 对象，所以很有可能它在微信中和开发者工具内一样，依然运行于 webview 标签之内。 

网站题目：微信小程序架构分析(中)
文章起源：http://www.shufengxianlan.com/qtweb/news3/239703.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

Google知识

分类信息网站

盐亭网站建设　　 　成发金汇　　 　成都力比特　　 　成都网站推广公司　　 　泸州网站建设　　 　成都网站设计　　 　成都装饰装修　　 　成都二枢机房　　 　成都网站推广　　 　香港云空间　　 　java虚拟主机　　 　主动防护网　　 　绵阳服务器托管　　 　腾讯云免备案空间　　 　遂宁海缘科技　　 　背发光字　　 　成都网站制作　　 　高端网站建设　　 　网站改版维护　　 　橡塑保温管