如何入门微信小程序开发，有哪些学习资料？

无公测应邀，1个小时快速构筑QQ小流程

「小流程」那个里程碑式的产品正式发布快两周了，互联网技术人都在摩拳擦掌，摩拳擦掌。可是小流程目前还在公测，第一批只派发了 200 个公测资格证书（泣不成声）。本以为没有 AppID 那个月就与小流程因伤了，遗憾的是QQ这三天正式发布了测试版开发人员辅助工具，无须公测应邀也能品雅版了。

因此也就有了我与「小流程」的初新体验，而我的体会只有一个字——爽！

优先选择别的「小流程」Demo？

在著名同性婚恋中文网站 Github 上，「小流程」的 Demo 不少，但是多半只是简单的 API 模拟，有的是甚至直接把网页统计数据写在了 json 文档里（分野有互联网允诺API）。我想新体验的是能够将服务项目器端和小流程端无缝连接起来（新体验够爽）的工程项目。最终，我优先选择了百度云非官方面世的「小快照」Demo。

「小快照」主要同时实现了以下机能：

效用模拟图（受开发辅助工具的限制，部分机能仍未同时实现）

或许优先选择百度云的 Demo，一原因在于它是百度他家面世的，工程项目的质量有保证；二原因在于它是鲜有的是既讲小流程开发，又介绍用户端布署的工程项目。

稍稍有点经验的流程员都知道，架构要动静分离，静态文档最好不要放在自己的服务项目器上，要放在专门用来储存的第一类储存服务项目器COS上，并且用CDN 加速。「小快照」后端采用的是 Node.js，Nginx作为反向代理。

第一步：搭开发环境

首先，我们需要在邻近地区构筑好QQ「小流程」的开发环境。即下载开发人员辅助工具。QQ非官方已经面世了测试版 IDE，大家没有必要再去下载破解版了。打开「非官方下载地址」，根据自己的操作系统优先选择。我使用的是 Mac 版。

安装好之后打开运行，会要求QQ扫码登陆。之后，就能看到创建工程项目的网页了。

优先选择添加工程项目，没有 AppID 就选无（如果乱写会报错，到时可能无法进入工程项目）。如果你优先选择的工程项目目录为空，请如图所示勾选在“当前目录中创建quick start工程项目”。

点选“添加工程项目”之后，我们会进入应用软件的调试网页。

第二步：下载「小快照」源码

接下来，我们下载「小快照」的源码。能优先选择直接从http://imgcache.qq.com/qcloud/la/demo-source/qcloud-applet-album.zip下载，也能从百度云团队的 Github 仓库拉取。我推荐从 Github 仓库拉取，这

git clone https://github.com/CFETeam/weapp-demo-album.git

最终，我们会得到类似这样的文档目录。

简单解释下目录结构：

源码下载完成之后，我们打开QQ web 开发人员辅助工具，新建工程项目「小快照」，优先选择目录applet（或app）。

「小快照」源码分析

在进行布署之前，我们来简单分析一下「小快照」的具体代码。毕竟只看效用不是我们的目的，我们的目的是以「小快照」为例，了解如何开发小流程并与服务项目器端进行交互。

「小快照」包含一个描述整体流程的 app 和多个描述各自网页的 page。主程序 app 主要由三个文档组成，分别是 app.js（小流程逻辑）、app.json（小流程公共设置）和 app.wxss（小流程公共样式表），其中前两个为必备文档。config.js 文档中包含了一些布署域名的设置，现在不用管。

在 pages 目录下，有两个 page 网页，分别是 index 和 album。网页结构算是比较简单的，其中 index 是小流程启动时默认进入的网页。每个网页下，至少要有 .js（网页逻辑）和 .wxml（网页结构）两个文档，.wxss（网页样式表）和 .json（网页配置）文档为选填。你可能注意到了，这些文档的文档名与父目录的名称相同。这是QQ非官方的规定，目的是减少配置项，方便开发人员。

接下来我们以 index 网页为例做简单的解释。index.wxml 是那个网页的表现层文档，其中的代码非常简单，能分为上下两大部分。

网页的模拟效用如下：

https://www.qcloud.com/act/event/yingyonghao.html

我们看到，网页上有一个“进入快照”的按钮。正常理解，点选后该按钮后我们就能进入快照了（这不废话嘛）。那小流程背后是怎样同时实现该操作的呢？

在 index.wxml 中，我们发现对应的 button 标签上定义了一个 bindtap 属性，绑定了一个叫做gotoAlbum 的方法。而那个方法能在 index.js 文档中找到。事实上，文档中也只定义了这一个方法，执行的具体动作就是跳转到 album 网页。

album.js 网页中编写了流程的主要逻辑，包括优先选择或拍摄相片、相片自动更新、相片下载和相片删掉；album.wxml 中三种视图容器 view、scroll-view、swiper均有使用，还提供了消息提示框 toast。具体方法和视图的同时实现请查看工程项目源码。所有的是这些机能都写在 Page 类中。

lib 目录下提供了小流程会用的一些辅助函数，包括异步访问和第一类储存 COS 的 API。

总的来说，和QQ非官方宣传的一样，在开发人员辅助工具下进行小流程的开发，效率确实提高了很多，而且有很多QQ提高的组件和 API。所以，在开发速度这点上的新体验还是非常爽的。

另外，由于「小快照」需要使用诸多用户端能力，如相片的上载和下载，我们还需要进行服务项目器端的布署和设置。具体请看接下来的步骤。

第三步：用户端布署 server 代码

虽然服务项目器端的开发不是本文的重点，但是为了全面地新体验「小快照」的整个开发布署流程，我们还是有必要了解服务项目器端的布署，这里我们使用的是百度云。

如果你想更爽一点，那么能优先选择百度云非官方提供的小流程用户端镜像。「小快照」的服务项目器运行代码和配置已经打包成百度云 CVM 镜像，能直接使用。可谓是一键布署好用户端。

如果你以前没有使用过百度云，能优先选择免费试用（我已经领取了 8 天的个人版服务项目器），或者领取礼包以优惠的价格购买所需的服务项目。

你也能优先选择将「小快照」源码中的server文档夹上载到自己的服务项目器。

第四步：准备域名和配置证书

如果你已经有百度云的服务项目器和域名，并配置好了 https，那么能跳过第 4-6 步。

在QQ小流程中，所有的是互联网允诺受到严格限制，不满足条件的域名和协议无法允诺。简单来说，就是你的域名必须走 https 协议。所以你还需要为你的域名申请一个证书。如果没有域名，请先注册一个。由于我们没有收到公测，也就暂时不用登录QQ公众平台配置通信域名了。

第五步：Nginx 配置 https

QQ小流程用户端示例镜像中，已经布署好了 Nginx，但是还需要在 /etc/nginx/conf.d 下修改配置中的域名、证书、私钥。

请将红框部分换成自己的域名和证书，并且将 proxy_pass 设置为 Node.js 监听的端口，我的是 9993。

配置完成后，重新加载配置文档并且重启 Nginx。

第六步：域名解析

我们还需要添加域名记录，将域名解析到我们的云服务项目器上，这样才能使用域名进行 https 服务项目。在百度云注册的域名，能直接使用云解析控制台来添加主机记录，直接优先选择上面购买的 CVM。

解析生效后，我们的域名就支持 https 访问了。

第七步：开通和配置 COS

由于我们希望同时实现动静分离的架构，所以优先选择把「小快照」的相片资源是储存在 COS 上的。要使用 COS 服务项目，需要登录COS 管理控制台，然后在其中完成以下操作。

第八步：启动「小快照」的服务项目器端

在非官方提供的镜像中，小快照示例的 Node 服务项目代码已布署在目录 /data/release/qcloud-applet-album下。进入该目录，如果是你自己的服务项目器，请进入相应的文档夹。

在该目录下，有一个名为 config.js的配置文档（如下所示），按注释修改对应的 COS 配置：

另外，cd ./routes/album/handlers，修改 list.js，将 const listPath 的值修改为你的Bucket 下的相片储存路径。如果是根目录，则修改为 /。当前服务项目器端的代码中将该值设置为了 /photos ，如果你在第七步中没有创建该目录，则无法调试成功。

小快照示例使用 pm2 管理 Node 进程，执行以下命令启动 node 服务项目：

第九步：配置「小快照」通信域名

接下来，在QQ web 开发人员辅助工具打开「小快照」工程项目，并把源文档config.js中的通讯域名 host 修改成你自己申请的域名。

将蓝色框内的内容修改为自己的域名

然后点选调试，即可打开小快照Demo开始新体验。

最后提示一点，截止目前为止，QQ小流程提供的上载和下载 API 无法在调试辅助工具中正常工作，需要用智能手机QQ扫码自动更新新体验。但是由于没有公测资格证书，我们暂时是没办法新体验了。

嗯，就这点不够爽，没有公测应邀。

我的同事还写了另外3个demo的「小流程教程」，大家也能看看。