作者介绍:周中坚,美团点评工程师,4年 Web 前端开发经验,主要负责过会员卡、外卖、预订、商家平台等业务的前端开发,现在是美团点评点餐团队的一员。

我们团队的小程序开发经验系列文章已经发布了4篇,这些文章主要介绍了小程序开发概述小程序的视图层小程序的逻辑层小程序开发中碰到的坑(几个设计实例)。相信大家看了这些文章,再结合官方文档已经可以毫无压力地开发小程序了,但是为什么有这些坑,是不是可以绕过去,怎么排查问题,我们还想从源头——小程序的源码的角度来尝试分析,因此有了这篇源码解析。

代码结构

以 mac 电脑为例,首先进入应用程序文件夹,再右键微信开发者工具显示包内容,最后让我们进入 ./Contents/Resources/app.nw 目录下就可以查看小程序的源码了,代码结构如图:

文件夹看起来很多,但命名还算清晰,现在让我们先从开发者工具界面的角度来看下都用到了哪些文件吧。

开发者工具

首页


首页的很多信息可以和这个项目中的package.json对应起来,比如name, icon, version等。

代理


代理的设置在./app/dist/components/setting/setting.js,而用户设置的保存(包括后面要说的模拟器设备、网络等信息)是调用了./app/dist/stores/*.js方法。

菜单


上图可以看到我对菜单做的一些定制。
菜单的设置在./app/dist/common/menu/menu.js,动作在./app/dist/common/actions/actions.js,大家可以自行到代码中查看文件的require进一步分析。

设备及网络


上图可以看到我自己添加了一个设备以及一个网络类型。
模拟器的设备配置在./app/dist/config/DeviceModules.js,网络配置在./app/dist/common/jssdk/osInfoSdk.js

调试工具


调试工具是这一节最核心的内容了,乍一看微信的调试工具和 chrome 的 DevTools 长的很像,查看源代码发现果然就是借助 chrome 的 DevTools 实现的。

其中 Console, Sources, Network 就是直接使用的 DevTools, 而 Storage, AppData, Wxml, Sensor 是自己实现的。

参照 Storage, AppData, Wxml, Sensor 这些调试工具,这些我们要自己添加一个其实非常简单,只要在./app/dist/extensions目录下新建一个文件夹,用html/css/js完成这个工具的功能,再改devtools.html将这个工具引入进来chrome.devtools.panels.create()即可,如图:

有趣的是,在0.15.150201这个测试版中已经发现了一个名为Bluetooth的开发工具。

weapp

上面一节主要讲的是小程序开发者工具的源码,我们借助分析源码可以搞清楚代理是怎么设置的,模拟器的设备和网络如何添加,怎样开发一个满足自己特定需求的 DevTool。

这一节主要介绍我们写的微信小程序的代码是如何变成页面在用户的终端运行的:

  • tpl 文件夹下是页面模板。
  • onlinevendor/wcc 在编译时把 wxml 文件 转为 js,onlinevendor/wcsc 在编译时把 wxss 文件转化为 js,这也是编译包比代码库要大不少的重要原因。
  • trans 文件夹下有五个方法,其中 transConfigToPf 将配置转成pageFrame,trans/transWxmlToHtml 将 wxml 转成 dom tree, 再进一步用 webview 渲染,trans/transWxssToCss 将 wxss 转成 css,提供 view 层样式。
  • onlinevendor/WAService.js 提供了service 层几乎一切功能。

pageFrame

首先是看一下刚才提到的 pageFrame,对应的 transConfigToPf 主要用字符串替换的方式完成转换。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <link href="https://res.wx.qq.com/mpres/htmledition/images/favicon218877.ico" rel="Shortcut Icon">
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' *.qq.com 'unsafe-inline' 'unsafe-eval'">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

  <script>
    var __webviewId__;
  </script>

  <!-- percodes -->

  <!--{{appconfig}}-->

  <!--{{pageconfig}}-->

  <!--{{WAWebview}}-->

  <!--{{reportSDK}}-->

  <!--{{webviewSDK}}-->

  <!--{{exparser}}-->

  <!--{{components_js}}-->

  <!--{{virtual_dom}}-->

  <!--{{components_css}}-->

  <!--{{allWXML}}-->

  <!--{{eruda}}-->

  <!--{{style}}-->

  <!--{{currentstyle}}-->

  <!--{{generateFunc}}-->

</head>

<body>
  <div></div>
</body>

</html>

appservice 页面模板

开发者工具提供了封装过的 wxml pannel, 我们并不能从中看到页面完整的 dom 结构,但是用 $('*')选择器我们可以看到页面的 appservice 模板,看这段代码我们可以分析出小程序是如何使用 wxml, wxss, js 将页面生成出来的。

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval'">
  <link href="https://res.wx.qq.com/mpres/htmledition/images/favicon218877.ico" rel="Shortcut Icon">
  <script>
  var __wxAppData = {}
  var __wxRoute
  var __wxRouteBegin
  global = {}
  </script>
  <script></script><!-- 加载一堆script标签 -->
</head>

<body>
  <p>
    开发者工具使用 nwjs 来模拟小程序的实现,帮助大家来开发和调试微信小程序,所以这里是一个 webview,但真实
    的手机端是运行在 jscore 中的,所以请不要使用任何 bom 对象。
  </p>
  <p>
    我们建议你先完整阅读该开发文档,这将有助于更快地完成开发。如果发现我们的文档有任何错漏,
    或者开发过程中有任何疑问或者你有更好的建议,欢迎通过下列邮箱联系我们

    weixin_developer@qq.com

    或者访问微信小程序开发者社区提交问题:

    https://developers.weixin.qq.com
  </p>
  <script>
    window._____sendMsgToNW({
      sdkName: 'APP_SERVICE_COMPLETE'
    })
  </script>
</body>

</html>

WAService.js

WAService.js 是小程序页面运行的核心方法,主要有几大功能:

  • 内置的 report 方法定义
  • 微信小程序 API 封装
  • WeixinJSBridge 封装
  • appServiceEngine 模块
    // 内置的 report 方法定义,用于内部 API 的调用日志 & 报错记录等。
    var Reporter = {
      surroundThirdByTryCatch,
      slowReport,
      speedReport,
      reportKeyValue,
      reportIDKey,
      thirdErrorReport,
      errorReport,
      log,
      submit,
      registerErrorListener,
      unRegisterErrorListener,
      triggerErrorMessage
    }
    // 微信小程序 API 封装,所有文档中的 [API](https://mp.weixin.qq.com/debug/wxadoc/dev/api/)都在这里封装了,以showModal为例简单分析一下
    showModal: function() {
      var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}
        , t = {
          title: "",
          content: "",
          confirmText: "确定",
          cancelText: "取消",
          showCancel: !0,
          confirmColor: "#3CC51F",
          cancelColor: "#000000"
      };// 默认值,此处比文档准确
      if (t = (0,
      f.extend)(t, e),
      a("showModal", t, {// 调用 jsbridge,见下方代码
          title: "",
          content: "",
          confirmText: "",
          cancelText: "",
          confirmColor: "",
          cancelColor: ""
      }))
          return t.confirmText.length > 4 ? void B("showModal", e, "showModal:fail confirmText length should not large then 4") : t.cancelText.length > 4 ? void B("showModal", e, "showModal:fail cancelText length should not large then 4") : void (0, // 各种校验
          u.invokeMethod)("showModal", t, {
              beforeSuccess: function(e) {
                  e.confirm = Boolean(e.confirm)// 返回值处理
              }
          })
    }
    // 此处调用 WeixinJSBridge,此外还对每个 API 调用记 log,方便微信小程序的问题排查
    function a() {
      var e = Array.prototype.slice.call(arguments)
        , t = e[1];
      e[1] = function(e, n) {
          var o = e.data
            , r = e.options
            , i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : {}
            , a = r && r.timestamp || 0
            , s = Date.now();
          "function" == typeof t && t(o, n),
          Reporter.speedReport({
              key: "webview2AppService",
              data: o || {},
              timeMark: {
                  startTime: a,
                  endTime: s,
                  nativeTime: i.nativeTime || 0
              }
          })
      }
      ,
      WeixinJSBridge.subscribe.apply(WeixinJSBridge, e)
    }
    // WeixinJSBridge 封装,底层是调用 WeixinJSCore
    e.WeixinJSBridge = {
      invoke: d,
      invokeCallbackHandler: p,
      on: h,
      publish: v,
      subscribe: g,
      subscribeHandler: y
    }
    // 内置的 jsbridge core
    WeixinJSCore = {
      invokeHandler,
      publishHandler
    }
    // setData 方法定义,逻辑层通过 setData 方法改变 virtual dom,改变 dom tree,从而改变视图层
    // appServiceEngine 模块,提供 App 和 Page 相关的接口

总结

如果是为了源码分析而进行源码分析,我觉得大可不必,在小程序的场景下,源码分析的价值在于:

  • 官方文档不一定和实际情况是对齐的,开发时碰到不一致的情况可以查阅源码,以此为准。
  • 熟悉源码结构可以快速定位问题,提升开发效率,甚至给自己开发合适的 DevTool。
  • 小程序可以认为是前端的一个子集,而且相对封闭,开发时会有各种约束,查阅源码可以有助于小程序的设计。

本文对你有帮助?欢迎扫码加入前端学习小组微信群: