Shulou(Shulou.com)06/01 Report--

本文小编为大家详细介绍"小程序的view模块和service模块怎么构成"，内容详细，步骤清晰，细节处理妥当，希望这篇"小程序的view模块和service模块怎么构成"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

打开微信 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 如下：

var __webviewId__;

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

var pageFrameStartTime = new Date();

会被 WAWebview.js 内代码替换

到 之间暂时没有被使用到

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

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

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

以及生成 DOM 的启动脚本：

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

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.replaceDocumentElement(document.body) wx.initReady() } else { var other_vtree = createVirtualTree(props, false) var patches = vtree.diff(other_vtree) patches.apply(rootNode) vtree = other_vtree document.dispatchEvent(new CustomEvent("pageReRender", {})); } }) })

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

var DataStore = (function() { var data = {} return { getData: function() { return data }, setData: function(e) { for (var t in e) { 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]]; a && (a[s] = e[t]) } } } })() // 解析 key 为 data 内对象的路径字符串 function parsePath(e) { for (var t = e.length, n = [], i = "", r = 0, o = !1, a = !1, s = 0; s < t; s++) { var c = e[s]; if ("\\" === c) s + 1 < t && ("." === e[s + 1] || "[" === e[s + 1] || "]" === e[s + 1]) ? (i += e[s + 1], s++) : i += "\\"; else if ("." === c) i && (n.push(i), i = ""); else if ("[" === c) { if (i && (n.push(i), i = ""), 0 === n.length) throw new Error("path can not start with []: " + e); a = !0, o = !1 } else if ("]" === c) { if (!o) throw new Error("must have number in []: " + e); a = !1, n.push(r), r = 0 } else if (a) { if (c < "0" || c >

"9") throw new Error("only number 0-9 could inside []: " + e); o = ! 0, r = 10 * r + c.charCodeAt(0) - 48 } else i += c } if (i && n.push(i), 0 === n.length) throw new Error("path can not be empty"); return n }

As you can see, after each data change, Mini programs begin the diff patch process for the entire page.

For natively implemented components, exparser sends events to WeixinJSBridge when it detects data changes.

Detailed explanation of service page

The service page will be spliced as follows:

var __wxAppData = {} var __wxRoute var __wxRouteBegin var __wxConfig = {"pages":["page/index"], // app Related various configurations } __wxRoute = 'page/index'; __wxRouteBegin = true window._____ sendMsgToNW({ sdkName: 'APP_SERVICE_COMPLETE' })

In addition to configuration and developer pages, app.js, the page also loads asdebug.js and WAService.js.

The asdebug.js file is located in the nwjs project directory at app/dist/weapp/appservice/asdebug.js. It contains two parts, one is WeixinJSBridge for the service module implementation, the other is some convenient command interface, such as: help() will tell you some of the available functions:

This file will only be introduced in developer tools. If Mini programs run in WeChat, WeixinJSBridge should be provided by WeChat bottom layer.

WAService is responsible for some of the core logic of the service module, which contains the following sections (code line number after jsbeautify, developer tool version: 092300):

1-78 Line: WeixinJSBridge compatible module same as WAWebview.js

Line 79-245: Reporter module same as WAWebview.js

Line 246-1664: The wx interface module is richer than wx in WAWebview.js

Line 1665-2304: appServiceEngine module, providing Page, App, GetApp interfaces

Lines 2305-2360: Add AMD interface to window object require define

WAService now has a lot of dependencies on window objects, so it is likely that it will still run within the webview tag in WeChat as well as in developer tools.

Read here, this article "How to constitute the view module and service module of Mini programs" has been introduced, if you want to master the knowledge points of this article, you still need to practice it yourself to understand, if you want to know more related content articles, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.