「大众点评点餐」小程序开发经验 05:解析开发工具

文 | 周中坚

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

知晓程序(微信号 zxcx0101)已经为大家带来 4 篇来自大众点评的小程序开发文章,相信大家看了这些文章、再结合官方文档已经可以毫无压力地开发小程序了。

但是为什么小程序会有这些坑、是不是可以绕过去、怎么排查问题,我们还想从源头,也就是小程序的源码的角度来尝试分析,因此有了这篇源码解析。

代码结构

以 macOS 系统为例,首先进入应用程序文件夹,再右键微信开发者工具显示包内容,最后让我们进入 ./Contents/Resources/app.nw 目录。

接下来,我们就可以查看小程序的源码了。代码结构如图:

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

开发者工具

首页

这个页面里的很多信息,可以和这个项目中的 package.json 对应起来,比如 nameiconversion 等。

代理

代理的设置在 ./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 可以将配置转成 pageFrametrans/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 模块

总结

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

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

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-04-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Bug生活2048

利用云开发优化博客小程序(二)——评论功能

这次迭代主要是完善了评论功能「不知道审核能不能过」,一开始觉得很快能搞定,然而真正开发的时候还是碰到很多问题,这篇文章既是回顾总结,也是记录下自己在开发过程中遇...

3543
来自专栏python+iOS学习交流

7年iOS架构师教你如何快速提高并掌握 iOS开发核心技能

首先你要花点时间针对objective-c语言的学习;毕竟这个是iOS开发的基础(你也可以尝试用Swift,但此项目只是针对OC),编程套路其实都是差不多,多写...

1611
来自专栏FreeBuf

手把手教你修改旅行青蛙三叶草抽奖券数

0×00 最近有只蛙 2018年元旦过后,一款旅行青蛙(原名旅かえる)的放置类手游迅速受到广大有爱青年的热捧,朋友圈、微博、知乎等掀起了一场母爱泛滥的晒蛙风。 ...

2185
来自专栏Android自学

解决 WordPress 后台加载非常缓慢/打不开问题

1413
来自专栏杨逸轩 ' sBlog

常见的个人博客系统

3836
来自专栏腾讯IVWEB团队的专栏

使用HeadlessChrome做单页应用SEO

随着react、vue、angular等前端框架的流行越来越多的web应用变成了单页应用,它们的特点是异步拉取数据在浏览器中渲染出HTML。

1490
来自专栏极客编程

Angular 5 快速入门与提高

尽管被称为Angular5,实际上它只是这个诞生于2012年的前端框架的的第四个版本:

1762
来自专栏狂码一生

thinkphp3.2简洁美观的分页样式

风格一 分页模块: <div class="tp_page">     {$pageShow} </div> 分页样式: .tp_page{     width...

3676
来自专栏微信平台开发

【腾讯游戏人生】微信小程序开发总结

目前【腾讯游戏人生】小程序已经发布上线,大家可以扫小程序码进行体验。接下来主要介绍在开发该款小程序过程中的一些思考和积累。

5998
来自专栏惶心 - 技术博客

添加全站 APlayer 播放器

之前 @狗子 在群里秀他的 Aplayer,还 post 了博文。然后我一看,哇!这就是我想要的!

5003

扫码关注云+社区

领取腾讯云代金券