划时代产品“小程序”发布已经快一周了，互联网技术人员摩拳擦掌，跃跃欲试。 不过小程序目前还处于公测阶段，第一批只获得了200个公测资格（泪流满面）。 我想如果没有AppID，这个月小程序就没有机会了。 幸运的是，陌陌在这三天发布了开发者工具正式版，无需公测邀请即可试用。
于是，我有了第一次“小程序”的体验，而我的体验只有一个字——爽！
选择那个“小程序”Demo？
在著名的同性交友网站Github上，有不少“小程序”的demo，但大部分都只是简单的API演示，有的甚至直接将页面数据写入json文件中（显然有网络请求 API）。 我想体验的是一个可以无缝连接服务器和小程序的项目（体验够爽）。 最终我选择了腾讯云官方推出的“小相册”项目。
《小相册》主要实现以下功能：
效果演示图（受开发工具限制微信小程序搭建外卖网站，部分功能尚未实现）
云对象服务是腾讯云面向企业和个人开发者推出的高可用、高稳定、高安全的云存储服务。 任意数量、任意方式的非结构化数据都可以加载到COS中，并在其中实现数据管理和处理。
之所以选择腾讯云的Demo，是因为它是腾讯自己推出的，项目质量有保证； 第二，因为这是一个难得的项目，既讲小程序开发，又引入云部署。
稍有经验的程序员都知道，架构要静态与动态分离。 静态文件最好不要放在自己的服务器上，而是放在专门用于存储的对象存储服务器COS上，并使用CDN加速。 《小相册》后端是Node.js，使用Nginx作为反向代理。
第一步：搭建开发环境
首先，我们需要在本地搭建陌陌“小程序”的开发环境。 即下载开发者工具。 微信正式推出正式版IDE，您无需下载破解版。 打开官网下载页面，根据自己的操作系统进行选择。 我使用的是Mac版本。
安装完成后，打开并运行，Momo会需要扫描二维码进行登录，之后就可以看到创建项目的页面。
选择添加项目，如果没有AppID就选择None（如果乱写的话会报错，到时候可能很难进入项目）。 如果您选择的工程目录为空，请勾选“在当前目录创建快速启动工程”，如图。
点击“添加项目”后，我们将进入开发工具的调试页面。
第二步：下载“小相册”源码
接下来我们下载《小相册》的源码。 您可以选择直接从腾讯云官网提供的链接下载，也可以从腾讯云团队的Github仓库拉取。 我建议从 Github 存储库中拉取，以便您可以及时获取最新代码。
克隆
最终，我们将得到一个像这样的文件目录。
简单解释一下目录结构：
源码下载完成后，我们打开Momo Web开发者工具，新建一个项目“迷你相册”，选择目录小程序（或app）。
《小相册》源码分析
部署之前，我们先简单分析一下“迷你专辑”的具体代码。 毕竟，只看疗效并不是我们的目的。 我们的目标是以“迷你相册”为例，了解如何开发小程序以及与服务器交互。
“迷你相册”包含一个描述整个节目的应用程序和描述各个页面的多个页面。 主程序app主要由三个文件组成，分别是app.js（小程序逻辑）、app.json（小程序公共设置）和app.wxss（小程序公共样式表），其中前两个是必备文件。 config.js 文件包含一些部署域名的设置，所以现在不用担心。
在pages目录下，有两个页面，分别是index和album。 页面结构比较简单，其中index是小程序启动时默认进入的页面。 每个页面下至少必须有两个文件：.js（页面逻辑）和.wxml（页面结构），.wxss（页面样式表）和.json（页面配置）文件是可选的。 您可能已经注意到这些文件与父目录具有相同的文件名。 这是Momo官方规定，目的是减少配置项，方便开发者。
接下来我们以index页面为例进行简单的说明。 index.wxml是该页面的表现层文件。 里面的代码很简单，可以分为上下两部分。
<view>
<view class="page-top">
<text class="username">恭喜你</text>
<text class="text-info">成功地搭建了一个微信小程序</text>
<view class="page-btn-wrap">
<button class="page-btn" bindtap="gotoAlbum">进入相册</button>
</view>
</view>
<view class="page-bottom">
<text class="qr-txt">分享二维码邀请好友结伴一起写小程序！</text>
<image src="../../images/qr.png" class="qr-img"></image>
<image src="../../images/logo.png" class="page-logo"></image>
</view>
</view>页面demo效果如下：
我们看到页面上有一个“进入相册”按钮。 正常理解，点击按钮后我们就可以进入相册了（这不是废话）。 小程序是如何实现这个操作的呢？
在index.wxml中，我们发现在对应的button标签上定义了一个bindtap属性，绑定了一个名为gotoAlbum的技术。 这个方法可以在index.js文件中找到。 其实文件中只定义了这个方法，具体动作就是跳转到相册页面。
Page({
// 前往相册页
gotoAlbum() {
wx.navigateTo({ url: '../album/album' });
},
});程序的主要逻辑编译在album.js页面中，包括选择或拍照、预览图片、下载图片、删除图片； album.wxml中的三个视图容器view、scroll-view、swiper都用到了，而且还提供了消息提示框toast。 具体方法请参考项目源码并查看实现。 所有这些功能都写在 Page 类中。
lib 目录提供了小程序将使用到的一些辅助功能，包括异步访问和对象存储 COS API。
总的来说，正如陌陌官方宣传的那样，在开发者工具下开发小程序的效率确实得到了很大的提升，并且有很多陌陌增强的组件和API。 因此，在开发速度方面的体验还是很爽的。
另外，由于“小相册”需要用到很多云端的能力，比如上传、下载图片等，所以我们还需要在服务器端进行部署和配置。 请参阅后续步骤了解详细信息。
第三步：将服务器代码部署到云端
虽然服务器的开发不是本文的重点，但是为了充分体验《小相册》的整个开发和部署过程，我们还是需要了解一下服务器的部署。 这里我们使用腾讯云。
如果你想更酷，可以选择腾讯云提供的小程序官方云镜像。 “小相册”服务器的运行代码和配置已经打包成腾讯云CVM镜像，可以直接使用。 可以说是一键部署云端。
如果你以前从未使用过腾讯云，你可以选择免费试用（我已经分发了8天的个人服务器），或者分发礼包以无利润的价格订购所需的服务。
您也可以选择将“小相册”源代码中的服务器文件夹上传到您自己的服务器上。
第四步：准备域名并配置证书
如果您已经有腾讯云服务器和域名，并且配置了https，则可以跳过步骤4-6。
在陌陌小程序中，所有网络请求都受到严格限制，不符合条件的域名和合约无法请求。 简单来说，你的域名必须遵循https协议。 所以你还需要为你的域名申请一个证书。 如果您没有域名，请先注册一个。 由于我们还没有收到公测版，所以暂时不需要登录微信公众平台配置通讯域名。
第5步：Nginx配置https
微信小程序云样例镜像中，已经部署了Nginx，但需要更改/etc/nginx/conf.d下配置中的域名、证书、私钥。
请将红框替换为你自己的域名和证书，并将proxy_pass设置为Node.js监听的端口，我的是9993。
配置完成后，重新加载配置文件并重启Nginx。
sudo service nginx reload
sudo service nginx restart
第六步：域名解析
我们还需要添加一条域名记录，用于将域名解析到我们的云服务器上，这样域名就可以用于https服务了。 对于在腾讯云注册的域名微信小程序搭建外卖网站，您可以直接使用阿里云DNS控制台添加主机记录，并直接选择其中订购的云服务器。
解析生效后，我们的域名支持https访问。
步骤7：激活并配置 COS
由于我们要实现动静态分离的结构，所以我们选择将“迷你相册”的图片资源存储在 COS 上。要使用 COS 服务，需要登录 COS 管理控制台，然后完成下面的操作。
单击创建存储桶。 系统会要求您选择项目并填写相应的名称。 这里，我们只需要填写我们喜欢的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下的图片存储路径。 如果是 root，则更改为“/”。 当前的服务器代码将此值设置为“/photos”，如果您在第7步中没有创建此目录，将很难调试成功。
小相册示例使用pm2来管理Node进程，执行以下命令启动node服务：
pm2 start process.json第九步：配置“小相册”通讯域名
接下来，在Momo Web开发者工具中打开“小相册”项目，将源文件config.js中的通信域名host更改为您申请的域名。
将红框中的内容修改为自己的域名
然后点击Debug打开迷你专辑Demo即可开始体验。
最后提醒一下，目前微信小程序提供的上传下载接口在调试工具中还无法正常使用，需要使用陌陌扫码预览体验。 但由于我们还没有公测资格，所以暂时没办法体验。
好吧，这还不够酷，没有公开测试版邀请。
