【技术干货第14期】微信小程序实战入门

[fanchangyong]

前言

公众号最近断更了几天，其实我也没闲着，这几天学习了一下微信小程序，顺便做了一个小程序，现在已经上架。这篇文章就来记录一下我这几天学习的一些感悟，以及分享一下我做这个小程序的时候遇到的一些问题。这些问题我想刚开始接触小程序开发的朋友都有可能会遇到，如果你以后做小程序开发应该会有帮助。

准备工作

如果你打算做小程序开发，有几个准备工作是必不可少的：

1. 读一遍官方文档，我们学习一项技术，官方文档是最权威的信息来源，对于微信小程序这种封闭生态的技术更是这样，因为除了官方文档实在是没有太多其他更靠谱的信息来源，所以，花上一到两天的时间将官方文档通读一遍是必须的。

2. 下载官方开发者工具。由于小程序开发环境的限制，编译、预览、调试微信小程序都是离不开微信官方发布的开发者工具的，所以首先要下载微信开发者工具。开发者工具的下载及使用请参考官方文档。

3. 为你的小程序想一个名字，然后注册小程序。如果只是做学习测试用，也可以不用申请正式的小程序账号，在开发者工具中新建项目的时候可以选择使用测试账号。但如果你要开发正式的小程序，建议首先把账号申请好，避免想好的名字被别人占用。申请小程序的邮箱要求没有注册过公众平台及开放平台（非常坑爹的设定）。

4. 开发测试及发布，如果你已经对小程序的开发方式有了一定了解，就可以进行开发了。开发完成之后就可以在小程序后台申请审核，审核通过之后就可以上线了。小程序审核的速度还是挺快的，我的只用了半小时就通过了，不知道是不是普遍情况。

小程序架构

小程序的架构建议参考官方文档，这里只是说一下我读过文档之后我自己对它的理解，不一定完全准确。
小程序是建立在微信客户端之上的一套运行环境，在这里微信客户端可以被成为小程序的宿主环境。
宿主环境由以下几个部分组成：

• 逻辑层线程 - 逻辑层主要负责小程序中逻辑部分的处理，相当于网页中的JavaScript部分。

• 视图层 - 视图层主要负责小程序中页面元素的渲染和展示，相当于网页中的HTML+CSS部分。视图层和逻辑层是分离的两个线程，不像在普通的浏览器环境中这两部分是在同一个线程中。在普通网页中，如果JavaScript中有一段阻塞的运算，通常会导致页面卡顿无响应，而小程序中由于是分离的线程设计，所以逻辑层的阻塞不会影响页面的展示和响应。当然这也是有代价的，就是页面中的操作要通知逻辑层的时候成本是比较高的，需要通过宿主环境做中转。

• 页面管理 - 一个小程序有几个页面是事先配置在JSON文件中的，没有写在配置文件中的页面是不会生效的，这一点不像普通网页开发那么灵活。另外像程序顶部的标题和导航按钮，以及底部的TabBar，这些默认都是固定的格式，我们可以通过JSON文件配置它的显示内容。如果想要完全自定义，需要在配置文件中显式地指定相关选项为custom才行。在这一点上，小程序比较像是一个被严格管控的网页运行环境，以使得小程序的样式和行为比较统一。

• 组件库 - 小程序提供了一些常用的组件库，我们可以直接在wxml文件中使用。至于普通的HTML标签，虽然写上去也不会报错，但还是不建议使用，因为它们的默认表现效果通常是消失的。比如你写一个<h1>Hello</h1>，并不会使Hello的字体变大。建议在写页面的时候只使用小程序提供的组件库中的组件。

• 微信API - 小程序提供了丰富的API供开发者调用，比如获取用户身份信息、获取位置信息、播放背景音乐等。

• 云开发环境 - 云开发提供了几个功能，包括：云存储、云数据库、云函数、云调用。使用云开发，我们不需要自己搭建服务器，使用小程序提供的云开发API，即可完成数据存储等服务器端功能。而如果不使用云开发，小程序要求所有与服务端的通信必须使用域名，而且是HTTPS协议，这对很多个人初学者可能门槛是有点高的。另外云开发提供免费的配额，对于个人开发的小程序来说应该完全够用了，所以如果你的后端逻辑比较简单，强烈建议使用云开发。下面我们依次来看一下：

  • 云存储适合用来存储文件，类似于阿里云的对象存储OSS，本质上是个Key-Value存储。
  • 云数据库是一个类似于MongoDB的数据库，存储数据的格式为JSON，它提供的增删改查API也非常类似于MongoDB。
  • 云函数，类似于我们在后端程序中写的controllers，只不过我们不需要关心底层的通信细节，比如搭建express服务器，以及写router做请求分发等。我们只需要写一个云端函数，然后在小程序段调用即可。
  • 云调用，基于云函数实现的，是我们可以使用云函数的方式来调用微信提供的一些系统API，如发送模板消息、获取小程序码等。

小程序与网页开发

网页开发用到的技术有HTML+CSS+JavaScript，小程序本质上也是个网页，不太严谨地说可以认为它是经过封装的Web技术的子集。小程序用到的几种技术分别叫：WXML+WXSS+JavaScript。其中WXML对应于HTML，WXSS对应于CSS，小程序中使用的JavaScript在语言层面基本是完整的，但缺少一些Web上常用的API（如DOM操作等），但多了一些微信环境特有的API。此外小程序中的配置文件大都使用JSON。
除了上边这几种语言，还有一种成为WXS(WeiXinScript)的语言，我们下面单独介绍一下它。

WXS

关于WXS，官网上是这样描述的：

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

那么WXS到底是什么呢？上面提到过，小程序中的JS与页面表现层的WXML是运行在两个线程中的，在页面中用户所做的操作（比如按钮的点击事件等），要通知JS代码，需要付出一定的通信成本。而一些需要频繁通信的场景（比如用户在页面上拖动一个滑块，要实时通知JS层做一些逻辑处理），用普通的方式可能就会比较慢，造成用户操作起来没那么顺畅。这种问题就可以使用WXS来解决。简单的说，WXS就是可以允许你在表现层线程中直接运行逻辑层代码的一种技术，它的本质其实还是JS，只是被严格管理，我们只能使用JS中被允许的一部分语句。

关于WXS，官网上的文档非常少，描述也比较模糊，所以我觉得一般情况下还是不使用的为好。

我的小程序

写到这里，你应该比较好奇我这几天到底做了个啥小程序？我做的是一个文字转语音（语音合成TTS）的的程序，名字叫多多英语朗读，长这样：

这个其实起源是一个朋友，他是一个小学生家长，最近周末的时候老师经常会发一些英语短文让孩子回家练。我正好有时间，就想到帮他写一个网页来自动朗读。最开始想用的技术是Web Speech API，也就是在网页前端实现的文字转语音技术。但这项技术有个缺陷，就是它的语音库是依赖系统自带的语音库的，而在很多设备上都没有带这种语音库，所以在这些设备上就没法播放。
接下来很自然就想到使用一些云服务，然后我就去试用了国内各大云平台的语音合成产品，包括科大讯飞、阿里云、腾讯云、百度云等都试了一遍，但是发现国内的这些服务商的语音合成产品大都只针对中文做了优化，英文发音都不纯正。然后我又去试用了国外的云服务，包括Google Cloud、Microsoft Azure、AWS都试了一遍，它们的英文发音都非常纯正，而且很自然，就决定选用国外的服务商。最终选择了AWS，因为他在国内有服务区，所以网络状况有保障，其他两家就不多说了。

这个小程序目前只是实现了基本的朗读功能，看接下来的用户情况，如果试用的人多我会考虑加入更多功能。

总结

最近几天一直在弄小程序，对小程序的开发基本算是熟悉了。如果总结小程序的开发体验，我觉得可以引用Taro框架文档中的一句话：

从前端工业时代回退到了刀耕火种的年代

所以如果下次再开发小程序，我肯定会考虑选择一个开发框架，而不是使用小程序原生的框架。
在这篇文章中我们讲了想要入门小程序开发的学习步骤，总结了小程序框架的架构，以及小程序中的各个技术名词与网页开发中的对应关系。其实如果你之前做过网页开发，想要入手写小程序是非常简单的，因为本质上它就是个网页。另外小程序原生框架的语法非常类似于Vue的语法，如果你学过Vue那么上手会非常快。不要被它的那些概念吓到，记住小程序只是Web开发的一个子集就好了。