微信小程序的快速搭建

「小程序」这个划时代的产品公布慢一周了，互联网技术人都在摩拳擦掌，跃跃欲试。可是小程序目前还在内测，首批只派发了 200 个公测资格（泪流满面）。本以为没 AppID 这个月就与小程序无缘了，遗憾的就是微信这两天公布了测试版开发者工具，无须公测应邀也可以尝鲜了。

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

挑选哪个「小程序」Demo？

在著名同性交友网站 Github 上，「小程序」的 Demo 不少，但是大多只是直观的 API 模拟，有的甚至轻易把页面数据埋在了 json 文件里（分野存有网络命令 API）。我想要体验的就是能将服务端和小程序端的无缝连接出来（体验够爽）的项目。最终，我挑选了腾讯云官方面世的「大书签」项目。

「大书签」主要同时实现了以下功能：

列举对象存储 COS 中的图片列表。

页面左上角上载图片图标，可以调用相机偷拍或从手机书签挑选图片，并将选上的图片上传至 对象存储 COS 中。

轻按任一图片，可以步入全屏图片预览模式，并可以左右滑动转换预览图片。

短按任一图片，可以将其留存至本地，或从 对象存储 COS 中删掉。

效果模拟图（受到开发工具的管制，部分功能尚未同时实现）

对象存储服务（Cloud Object Service）就是腾讯云面世的面向企业和个人开发者提供更多的高需用，低平衡，弱安全的云端存储服务。可以将任一数量和形式的非结构化数据放进COS，并在其中同时实现数据的管理和处置。

之所以挑选腾讯云的 Demo，一是因为它就是腾讯自家面世的，项目的质量存有确保；二是因为它就是鲜有的既谈小程序开发，又了解云端部署的项目。

稍微有点经验的程序员都晓得，架构必须动静拆分，静态文件最出色不要放到自己的服务器上，必须放到专门用以存储的对象存储服务器COS上，并且用CDN 快速。「大书签」后端的使用的就是 Node.js，Nginx做为逆向代理。

第一步：乘研发环境

首先，我们须要在本地构建不好微信「小程序」的研发环境。即为浏览开发者工具。微信官方已经面世了测试版 IDE，大家没必要再回去浏览破解版了。关上官网浏览页面，根据自己的操作系统挑选。我采用的就是 Mac 版。

加装不好之后关上运转，可以建议微信扫码进占。之后，就可以看见建立项目的页面了。

挑选嵌入项目，没 AppID 就选无（如果口误可以收起，至时可能将无法步入项目）。如果你挑选的项目目录为空，恳请如图所示键入在“当前目录中建立quick start项目”。

页面“嵌入项目”之后，我们可以步入开发工具的调试页面。

第二步：浏览「大书签」源码

接下来，我们浏览「大书签」的源码。可以挑选轻易从腾讯云官网提供更多的链接浏览，也可以从腾讯云团队的 Github 仓库拉取。我所推荐从 Github 仓库拉取，这样可以及时以获取最新的代码。

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

最终，我们可以获得相似这样的文件目录。

直观表述下目录结构：

applet（或app）: 「大书签」应用领域纸盒代码，可以轻易在微信开发者工具中做为项目关上。

server: 构建的Node服务端代码，做为服务器和app通信，提供更多 CGI USB示例，用作拉取图片资源、上载图片、删掉图片。

assets：「大书签」的模拟图片。

源码浏览顺利完成之后，我们关上微信 web 开发者工具，新建项目「大书签」，挑选目录applet（或app）。

「大书签」源码分析

在展开部署之前，我们去直观分析一下「大书签」的具体内容代码。毕竟只看看效果不是我们的目的，我们的目的就是以「大书签」为基准，介绍如何研发小程序并与服务端展开可视化。

「大书签」涵盖一个叙述整体程序的 app 和多个叙述各自页面的 page。主程序 app 主要由三个文件共同组成，分别就是 app.js（小程序逻辑）、app.json（小程序公共设置）和 app.wxss（小程序公共样式表），其中前两个为必不可少文件。config.js 文件中涵盖了一些部署域名的设置，现在不必管。

在 pages 目录下，存有两个 page 页面，分别就是 index 和 album。页面结构称得上比较简单的，其中 index 就是小程序启动时预设步入的页面。每个页面下，至少必须存有 .js（页面逻辑）和 .wxml（页面结构）两个文件，.wxss（页面样式表）和 .json（页面布局）文件为学测。你可能将注意到了，这些文件的文件名与父目录的名称相同。这就是微信官方的规定，目的就是增加布局项，便利开发者。

接下来我们以 index 页面为例做直观的表述。index.wxml 就是这个页面的整体表现层文件，其中的代码非常简单，可以分成上下两大部分。

页面的模拟效果如下：

我们看见，页面上存有一个“步入书签”的按钮。正常认知，页面后该按钮后我们就可以步入书签了（这不废话嘛）。那小程序背后就是怎样同时实现该操作方式的呢？

在 index.wxml 中，我们辨认出对应的 button 标签上定义了一个 bindtap 属性，存取了一个叫作 gotoAlbum 的方法。而这个方法可以在 index.js 文件中找出。事实上，文件中也只定义了这一个方法，继续执行的具体内容动作就是重定向至 album 页面。

Page({

// 前往二者册页

gotoAlbum() {

wx.navigateTo({ url: '../album/album' });

},

});

album.js 页面中撰写了程序的主要逻辑，包含挑选或摄制图片、图片预览、图片下载和图片删掉；album.wxml 中三种视图容器 view、scroll-view、swiper均存有采用，还提供更多了消息提示框 toast。具体方法和视图的同时实现恳请查阅项目源码。所有的这些功能都写下在 Page 类中。

lib 目录下提供更多了小程序会用的一些辅助函数，包含异步出访和对象存储 COS 的 API。

总的来说，和微信官方宣传的一样，在开发者工具下展开小程序的研发，效率的确提升了很多，而且存有很多微信提升的组件和 API。所以，在研发速度这点上的体验还是非常爽的。

另外，由于「大书签」须要采用诸多云端能力，例如图片的上载和浏览，我们还须要展开服务器端的部署和设置。具体内容恳请看看接下来的步骤。

第三步：云端部署 server 代码

虽然服务端的研发不是本文的重点，但是为了全面地体验「大书签」的整个研发部署流程，我们还是存有必要介绍服务端的部署，这里我们采用的就是腾讯云。

如果你想要无形中一点，那么可以挑选腾讯云官方提供更多的小程序云端镜像。「大书签」的服务器运转代码和布局已经装箱成腾讯云 CVM 镜像，可以轻易采用。堪称就是一键部署不好云端。

如果你以前没采用过腾讯云，可以挑选免费试用（我已经申领了 8 天的个人版服务器），或者申领礼包以优惠的价格出售所需的服务。

你也可以挑选将「大书签」源码中的server文件夹上传至自己的服务器。

第四步：准备工作域名和布局证书

如果你已经存有腾讯云的服务器和域名，并布局不好了 https，那么可以UX21LI2677E第 4-6 步。

在微信小程序中，所有的网络命令受严苛管制，不满足条件的域名和协议无法命令。直观来说，就是你的域名必须跑 https 协议。所以你还须要为你的域名提出申请一个证书。如果没域名，恳请先登记注册一个。由于我们没接到公测，也就暂时不必登入微信公众平台布局通信域名了。

第五步：Nginx 布局 https

微信小程序云端示例镜像中，已经部署不好了 Nginx，但是还须要在 /etc/nginx/conf.d 下修正布局中的域名、证书、私钥。

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

布局顺利完成后，再次读取配置文件并且重新启动 Nginx。

sudo service nginx reload

sudo service nginx restart

第六步：域名解析

我们还须要嵌入域名记录，将域名解析至我们的云服务器上，这样才可以采用域名展开 https 服务。在腾讯云登记注册的域名，可以轻易采用云解析控制器去嵌入主机记录，轻易挑选上面出售的 CVM。

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

第七步：启用和布局 COS

由于我们期望同时实现动静拆分的架构，所以挑选把「大书签」的图片资源就是存储在 COS 上的。必须采用 COS 服务，须要登入 COS 管理控制器，然后在其中顺利完成以下操作方式。

页面建立 Bucket。可以建议挑选所属项目，核对适当名称。这里，我们只须要填上上自己讨厌的 Bucket 名称即可。

然后在 Bucket 列表中，页面刚刚建立的 Bucket。然后在新页面页面“以获取API密钥”。

插入的页面中包含了我们所须要的三个信息：唯一的 APP ID，一对SecretID和SecretKey（用作调用 COS API）。看管不好这些信息，我们在稍后可以使用。

最后，在代莱 Bucket 容器中建立文件夹，命名为photos。这点后面我们也可以提及。

第八步：启动「大书签」的服务端

在官方提供更多的镜像中，大书签示例的 Node 服务代码已部署在目录 /data/release/qcloud-applet-album 下。步入该目录，如果就是你自己的服务器，恳请步入适当的文件夹。

cd /data/release/qcloud-applet-album

在该目录下，存有一个名叫 config.js 的配置文件（如下右图），按注解修正对应的 COS 布局：

module.exports = {

// Node 监听的端口号

port: '9993',

ROUTE_BASE_PATH: '/applet',

cosAppId: '核对启用 COS 时分配的 APP ID',

cosSecretId: '核对密钥 SecretID',

cosSecretKey: '核对密钥 SecretKey',

cosFileBucket: '核对建立的公有念私有写下的bucket名称',

};

另外，cd ./routes/album/handlers，修正 list.js，将 const listPath 的值修正为你的Bucket 下的图片存储路径。如果就是根目录，则修正为 '/'。当前服务端的代码中将该值设置为了 '/photos' ，如果你在第七步中没建立该目录，则无法调试顺利。

大书签示例采用 pm2 管理 Node 进程，继续执行以下命令启动 node 服务：

pm2 start process.json

第九步：布局「大书签」通信域名

接下来，在微信 web 开发者工具关上「大书签」项目，并把源文件config.js中的通讯域名 host 修正变成你自己提出申请的域名。

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

然后页面调试，即可关上大书签Demo已经开始体验。

最后提示信息一点，截至目前为止，微信小程序提供更多的上载和浏览 API 无法在调试工具中正常工作，须要用手机微信扫码预览体验。但是由于没公测资格，我们暂时就是没有办法体验了。

嗯，就这点比较爽，没公测应邀。