文 | 周中坚
周中坚,美团点评工程师,4年 Web 前端开发经验,主要负责过会员卡、外卖、预订、商家平台等业务的前端开发,现在是美团点评点餐团队的一员。
知晓程序(微信号 zxcx0101)已经为大家带来 4 篇来自大众点评的小程序开发文章,相信大家看了这些文章、再结合官方文档已经可以毫无压力地开发小程序了。
但是为什么小程序会有这些坑、是不是可以绕过去、怎么排查问题,我们还想从源头,也就是小程序的源码的角度来尝试分析,因此有了这篇源码解析。
代码结构
以 macOS 系统为例,首先进入应用程序文件夹,再右键微信开发者工具显示包内容,最后让我们进入 ./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 长的很像。查查源代码,果然就是借助它实现的。
其中 Console、Sources、Network 就是直接使用的 DevTools,而 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 树,再进一步用 WebView 渲染,trans/transWxssToCss
将 WXSS 转成 CSS,提供 View 层样式。onlinevendor/WAService.js
提供了service 层几乎一切功能。pageFrame
首先是看一下刚才提到的 pageFrame
,对应的 transConfigToPf
主要用字符串替换的方式完成转换。
AppService 页面模板
开发者工具提供了封装过的 WXML pannel,我们并不能从中看到页面完整的 DOM 结构。但是,利用 $('*')
选择器,我们可以看到页面的 AppService 模板。
我们可以分析它,了解小程序是如何使用 WXML、WXSS、JS 将页面生成出来的。
WAService.js
WAService.js
是小程序页面运行的核心方法,主要有几大功能:
report
方法定义API
封装WeixinJSBridge
封装appServiceEngine
模块总结
如果是为了源码分析而进行源码分析,我觉得大可不必。在小程序的场景下,源码分析的价值在于: