从《小睡眠》谈微信小程序开发的实用技术与注意事项

为什么要做小睡眠

自去年开始，小程序在移动互联网圈，是暗潮汹涌的存在，总在某个时刻，一个内测版就刷爆朋友圈。我们团队真正萌生做小睡眠小程序的想法，是在今年元旦过后，属于很后知后觉。毕竟在创业阶段，对于开发资源的分配很慎重，最终小睡眠小程序是由一个设计师和一个程序员负责，从敲定名字到完成提交，总共耗时36个小时。下面列出几点在开发小程序上的思考，分享给大家，或许有些帮助。

技术框架

初期阶段，小程序的开发框架比较弱，特别是针对音乐类的，很多功能无法实现，比如支持多音频播放和无缝衔接等。如果是 App 的话，往往多想想办法是可以解决的，例如 Android 的 WebView 自带的音频播放器无法进行音频的无缝播放，但是接入 Google 的扩展播放器 ExoPlayer 就可以解决这个问题。所以大家在设计小程序的功能框架时，不能简单照搬 App 的功能或者想当然地做减法，需要仔细评估小程序的技术支持程度。

设计交互

不考虑微信好友即时分享的入口，从启动微信开始，要进入小程序页面，至少需要三次点击（微信—发现—小程序），这还不包括进去之后的下拉搜索，而在最开始阶段，微信小程序也并没有开放模糊搜索和星标功能，所以对于小程序交互上的考虑，尽量要做到一键抵达功能，用最快的时间向用户表达自己。以小睡眠为例，微信授权登陆是我们最先舍弃的功能，而且我们也是在最后时刻进行删减，把两个页面变成一个页面，所以它的学习成本极低，几乎点到哪里都会有声音播放出来，目前小睡眠竟然有8%的用户是50岁以上的老人，算得上是全民小程序。

市场推广

毕竟是微信内部功能，分享是绕不过的需求。我们当时做了一件事情，把几十个白噪音和脑波进行颜色上的分类，并根据声音的种类和特性，以及听觉和认知给人的第一印象，比如“潮拍海岸”是蓝色，“红泥小炉”是红的，我们选出了五种很好看的颜色，后面在微信群分享的时候，小睡眠的分享界面骚气十足，很好看也抢眼球，吸引了很多人关注。所以说小程序天然带有推广属性，特别是目前微信也计划增加一个新入口，用户可以在群设置页看到“群小程序”，也就是最近群成员分享过的小程序，大家也可以在这方面多加思考。

微信小程序技术浅析

小程序初期，网络上能供参考的学习资源并不多，于是只能紧抱官方文档。翻看官方文档后，发现小程序虽然定义了一套新的开发框架、语言，但实际上与传统的前端开发技术非常相似（因为本质上是寄托于 WebView，基于 Web 开发技术）。而 WXML 相当于 HTML，WXSS 相当于 CSS，脚本代码均是 JavaScript，也正是前端一直以来的网页开发三剑客。所以，对于前端程序员来说，学习曲线并不高。

创建 quick start 项目后，会出现很多熟悉的代码，onLoad、onReady、onShow 等等。使用过 Vue.js、接触过 iOS、Android 等开发的同学，一定不会陌生。每一个页面都有自己的生命周期，跟 Vue.js 的每一个 page，iOS 的每一个 Controller，Android 的每一个 Activity 一样。小程序就像集百家之所长一样，把最经典、最简单，大家最熟悉的开发模式呈现出来。这样一来，学习门槛又降低了很多。

而在 UI 布局方面，小程序采用了 rpx（responsive pixel），其可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx。由于这是一个自适应的单位，所以，所有手机屏幕宽度均为750rpx，开发的时候，适配问题就减轻很多。开发时，设计师以 iPhone6 作为视觉稿的标准，就可以满足绝大部分机型。而在标签语言 WXML（类 HTML）中，view 标签相当于 HTML 中的 div，其他标签根据功能定义也很容易理解，可以当作一种变体 HTML 开发。而 WXSS 就相当于 CSS 了，而在 WXSS 中，几乎不用像传统浏览器那样考虑各种兼容属性前缀，也不需要考虑低版本浏览器的兼容，可以放心使用 Flex 布局和各种
CSS3 特性。

微信官方提供的开发工具，是使用 node-webkit 开发的（JavaScript），所以整套开发工具的源码均可查看，见图1所示。这就对广大开发者深入了解小程序的机制、框架提供了非常好的资料。目前也有很多优秀的开发者已经通过此对小程序开发框架进行了原理、基础、底层运行的详细分析。

图1 微信Web开发工具源码目录结构

接下来谈谈开发中需要注意的技术点。

• 生产发布环境中小程序所有网络请求都必须为 HTTPS，并在小程序后台绑定域名。目前，各大云服务提供商都提供免费的证书申请，过程也并不复杂。

• 在小程序开发中并不能调试查看 uploadFile 和 downloadFile 的网络请求，但你可以通过代理去查看。

• 小程序迭代升级过程中，很多新的 API 出现，需要向下兼容，并不是每个人都会升级微信客户端，由于一些新功能的升级可能会导致老版本 crash 掉。

微信小程序开发资源

下面是我们在项目中曾经接触到、使用过的优秀第三方库，并做简要说明。

开发框架

WePY，小程序组件化开发框架。它是 Vue.js 开发者的福音，让小程序开发变得“vue”化，支持 NPM 包，支持多种编译器，支持代码压缩、图片压缩，支持 ESLint 等众多功能。使用之后，小程序开发更加简单、高效。

工具库

wafer-client-sdk：Wafer，可用来快速构建具备弹性能力的微信小程序。这是腾讯云团队提供的 SDK，让小程序用户授权会话变得相当方便和简单，同时提供了小程序 SDK、服务器端 SDK。

XpmJS，微信小程序云端增强 SDK。提供了用户登录、WebSocket 通信、微信支付、云端数据表格、文件存储等轮子。

wxParse，微信小程序富文本解析自定义组件。支持 HTML 及 Markdown 解析。有了这个框架，就可以显示基本的 HTML 了，阅读类、资讯类的 App 就拥有了简单高效的富文本显示能力。

wemark，微信小程序 Markdown 渲染库。可用于在小程序中渲染 Markdown。

UI组件

ZanUI-WeApp，高颜值、好用、易扩展的微信小程序UI库，有赞出品。UI 组件库包含badge、btn、card、cell、color、dialog、form、helper、icon、label、loadmore、panel、quantity、steps、tab、toast、toptip 共计17类组件或元素，设计优美，使用方便。

wx-charts，微信小程序图表 charts 组件。图表组件包含饼图、圆环图、线图、柱状图、区域图、雷达图，为数据分析利器。

weui-wxss，微信官方设计团队提供的一套 UI 组件库，提供了最有用的插件、模块。
当然还有一大批优秀开发者开发出的优秀的库，在此就不一一列出了。

微信小程序调试实战

优秀的代码资源，对每个开发者、学习者来说都是非常重要的。往往研读一个优秀的项目都能有很多收获。而小程序也是一样，小程序开发作为前端开发的变体，自然很多人也会希望像一般前端项目一样，打开开发者工具调试查看别人代码参考学习（当然不排除有作恶的人）。而实际上，确实是可以查看其他优秀小程序的源码。也正因为你的小程序源码是可以被查看的，所以敏感信息不应该写到代码中。

以下进入干货环节，将一步步实战带你查看别人小程序源码。

第一步，设置代理

以 Mac 为例，首先，打开 Charles，然后手机接入 Charles（见图2），而 Charles
怎么连接，如果有疑问，可以在网络上搜索教程。连接 Charles 后，不需要特别代理相关 SSL 域名（使用 Charles 期间，注意关掉手机和电脑的其他代理，以免链接失败）。

图2 手机接入Charles

第二步，打开并加载想要查看的微信小程序

查找并下载想要“偷窥”的小程序。如果微信小程序已经加载过，先删掉再重新搜索下载。

第三步，查看 Charles，可以发现微信小程序的安装包

下载完毕后，回头查看 Charles。此时你可以发现有一个 wxapkg（wexin app package）的小程序安装包请求链接，果断右键保存下来，见图3。

图3 小程序下载完毕后，将发现安装包请求链接

第四步，研究安装包源码

实际上，微信小程序的安装包是包含所有图片、代码等资源。所以，你可以使用文本编辑器以纯文本模式查看整个安装包（像 iOS、Android 安装包一样后缀改为 zip 解压是没用的）。这是你可以看到资源编排，图片数据（可能会呈现为乱码），JavaScript 代码，WXSS 代码等。而所有小程序需要的数据，都可以据此一一还原出来，见图4所示。

图4 查看小程序源码

第五步，格式化代码

一般来说，对程序员最有参考价值的就是 JavaScript 了，所以往下浏览查找并截取
JavaScript 部分代码，并新建 JavaScript 文件，在编辑器中格式化后，便可以开始我们的学习之旅了。图5是《小睡眠》小程序格式化后的代码，已经变得很具可读性了。当然，《小睡眠》的代码由于程序员“偷懒”，肯定有很多不足和可提高的地方，欢迎大家指导并督促改进。

图5 小睡眠小程序格式化后的代码

到此，微信小程序源码查看基本告一段落。然而，在最近的微信更新之后，就不能再通过捉包获取微信小程序的安装包了，源码数据流似乎不再走 HTTP 协议。这一变化大概是微信出于安全性的考虑，毕竟源码暴露对很多有数据安全要求的小程序来说是很致命的。也正因为此，小程序的开发也要格外注意不能把各种 key、secrect 写在小程序代码中，该服务器处理的还是得服务器处理。

当然，聪明的你肯定已经想到解决方法了。

结语

小程序自正式诞生至今，才刚刚过了半年，外界对它的看法便已经历很多起伏。同样的，今天的小程序所提供的技术特性，跟半年前也不可同日而语，未来小程序能走多远，是否可以形成一个生态，市场会给出答案，希望我们技术从业者们能以动态，不断成长的眼光去看待小程序，也希望此文能给大家一些启发与帮助，共勉。

感谢“造程序”（微信 ID：zaochengxucom）对内容的建议和审校。

刘剑华

心潮&小睡眠移动技术开发总监，全栈工程 师。曾于多家企业任职技术咨询、技术总监 等职位。熟悉 Web 前端、Node.js、PHP、 Python、Android、iOS 等技术开发领域。热 爱技术，乐于分享，当前关注人工智能方向。