⼀个⼩时快速搭建⼩程序教程
「⼩程序」这个划时代的产品发布快⼀周了，互联⽹技术⼈都在摩拳擦掌，跃跃欲试。可是⼩程序⽬前还在内测，⾸批只发放了 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 github/CFETeam/weapp-demo-album.git
最终，我们会得到类似这样的⽂件⽬录。
简单解释下⽬录结构：
applet（或app）: 「⼩相册」应⽤包代码，可直接在开发者⼯具中作为项⽬打开。
server: 搭建的Node服务端代码，作为服务器和app通信，提供 CGI 接⼝⽰例，⽤于拉取图⽚资源、上
传图⽚、删除图⽚。
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是这个页⾯的表现层⽂件，其中的代码⾮常简单，可以分为上下两⼤部分。
<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>
页⾯的演⽰效果如下：
我们看到，页⾯上有⼀个“进⼊相册”的按钮。正常理解，点击后该按钮后我们就可以进⼊相册了（这不废话嘛）。那⼩程序背后是怎样实现该操作的呢？
在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，那么可以跳过第 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 服务，需要登录，然后在其中完成以下操作。
1. 点击创建 Bucket。会要求选择所属项⽬，填写相应名称。这⾥，我们只需要填上⾃⼰喜欢的 Bucket 名称即可。
2. 然后在 Bucket 列表中，点击刚刚创建的 Bucket。然后在新页⾯点击“获取API密钥”。
弹出的页⾯中包括了我们所需要的三个信息：唯⼀的 APP ID，⼀对SecretID和SecretKey（⽤于调⽤ COS API）。保管好这些信息，我们在稍后会⽤到。
⼩程序应⽤号交流 563752274。
1. 最后，在新的 Bucket 容器中创建⽂件夹，命名为photos。这点后⾯我们也会提到。
第⼋步：启动「⼩相册」的服务端
在官⽅提供的镜像中，⼩相册⽰例的 Node 服务代码已部署在⽬录/data/release/qcloud-applet-album下。进⼊该⽬录，如果是你⾃⼰的服务器，请进⼊相应的⽂件夹。
cd /data/release/qcloud-applet-album
在该⽬录下，有⼀个名为config.js的配置⽂件（如下所⽰），按注释修改对应的 COS 配置：
// 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 ⽆法在调试⼯具中正常⼯作，需要⽤⼿机扫码预览体验。但是由于没有内测资格，我们暂时是没办法体验了。
嗯，就这点不够爽，没有内测邀请。
⼩程序应⽤号交流 563752274
作者：EarlGrey

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。