这个划时代的产品“小程序”发布已经快一周了，互联网技术人士摩拳擦掌，跃跃欲试。不过小程序目前还处于内测阶段，第一批只发放了200个内测资格（泪流满面）。我想如果没有这个月我就没有机会使用小程序了。庆幸的是，微信这两天发布了正式版的开发者工具，无需邀请内测，大家也可以尝试一下。

所以，这是我第一次体验“小程序”，给我的感觉只有一个字——爽！

您应该选择哪个“小程序”演示？

知名同志交友网站上有很多“小程序”的demo，但大多只是简单的API演示，有的甚至直接将页面数据写入json文件中（明明有网络请求API）。我想体验的是一个能够无缝连接服务器端和小程序端的项目（体验还蛮过瘾的）。最终我选择了腾讯云官方推出的“小相册”项目。

《小相册》主要实现以下功能：

效果演示图（受开发工具限制，部分功能尚未实现）

对象存储服务（ ）是腾讯云面向企业和个人开发者推出的高可用、高稳定、高安全的云存储服务。任何数量和形式的非结构化数据都可以放入 COS 中并在其中进行管理和处理。

之所以选择腾讯云的Demo，一是因为它是腾讯自己推出的，项目质量有保证；其次，因为它是为数不多的既讲小程序开发，又引入云部署的项目之一。

稍有经验的程序员都知道，架构需要将动态文件和静态文件分开。静态文件最好不要放在自己的服务器上，而是放在专门用于存储的对象存储服务器 COS 上，并使用 CDN 进行加速。 《小相册》后端使用Node.js作为反向代理。

第一步：搭建开发环境

首先，我们需要在本地搭建微信“小程序”的开发环境。也就是下载开发者工具。微信正式推出IDE正式版。无需下载破解版。打开官网下载页面，根据自己的操作系统进行选择。我用的是Mac版本。

安装完成后，打开运行，会要求扫微信码登录，之后就可以看到创建项目的页面。

选择添加项目，或者选择None（如果乱写会报错，可能无法进入项目）。如果您选择的工程目录为空，请勾选“在当前目录创建工程”，如图。

点击“添加项目”后，我们将进入开发工具的调试页面。

第二步：下载“小相册”源码

接下来我们下载《小相册》的源码。您可以选择直接从腾讯云官网提供的链接下载，也可以从腾讯云团队仓库拉取。我建议从存储库中提取，以便您可以及时获取最新的代码。

git

最终，我们将得到一个与此类似的文件目录。

简单解释一下目录结构：

源码下载完成后，我们打开微信网页开发者工具，新建一个项目“小相册”，选择目录（或app）。

《小相册》源码分析

在部署之前，我们先简单分析一下“小相册”的具体代码。毕竟，只看效果并不是我们的目的。我们的目的是以“小相册”为例，了解如何开发小程序以及与服务器交互。

“小相册”包含一个描述整体程序的应用程序和描述各自页面的多个页面。主程序app主要由三个文件组成，分别是app.js（小程序逻辑）、app.json（小程序公共设置）和app.wxss（小程序公共样式表），其中前两个是必需文件。 .js 文件包含一些部署域名的设置，所以现在不用担心。

目录中有两个页面，分别是 和 。页面结构比较简单，就是小程序启动时默认进入的页面。每个页面下，必须至少有两个文件：.js（页面逻辑）和.wxml（页面结构）。 .wxss（页面样式表）和.json（页面配置）文件是可选的。您可能已经注意到这些文件与父目录具有相同的文件名。这是微信官方规定，旨在减少配置项，方便开发者。

接下来我们以页面为例进行简单的说明。 .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>

页面演示效果如下：

我们看到页面上有一个“进入相册”按钮。按正常理解，点击这个按钮后我们就可以进入相册了（这个不废话）。那么这个操作在小程序后面是如何发生的呢？

在.wxml中，我们发现相应的标签上定义了一个属性，并且绑定了一个调用的方法。这个方法可以在.js文件中找到。其实文件中只定义了这个方法，具体执行的动作就是跳转到页面。

Page({    
   // 前往相册页    gotoAlbum() {        wx.navigateTo({ url: '../album/album' });    }, });

程序的主要逻辑写在.js页面中，包括选择或拍照、图片预览、图片下载和图片删除； .wxml中的三个视图容器view和-view都用到了，还提供了消息提示框。具体实现方法和视图请参见项目源码。所有这些函数都写在Page类中。

lib 目录提供了一些小程序使用的辅助功能，包括异步访问和对象存储 COS API。

总的来说，正如微信官方推动的那样，在开发者工具下开发小程序的效率确实提升了不少，而且微信改进的组件和API也不少。因此，在开发速度方面的体验还是非常令人愉悦的。

另外，由于《小相册》需要用到很多云的能力，比如上传、下载图片等，所以我们还需要部署和设置服务器端。请参阅后续步骤了解详细信息。

第 3 步：在云端部署代码

虽然服务器的开发不是本文的重点，但是为了充分体验《小相册》的整个开发和部署过程，我们还是需要了解一下服务器的部署。这里我们使用腾讯云。

如果你想玩得更好，可以选择腾讯云官方提供的小程序云镜像。 《小相册》的服务器运行代码和配置已打包成腾讯云CVM镜像，可以直接使用。可以说，一键上云。

如果您之前没有使用过腾讯云，可以选择免费试用（我已经收到了个人版服务器8天），或者领取礼包以优惠价格购买所需服务。

您也可以选择将“小相册”源代码中的文件夹上传到您自己的服务器上。

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

如果您已有腾讯云服务器和域名并已配置，则可以跳过步骤4-6。

在微信小程序中，所有网络请求都受到严格限制，不符合条件的域名和协议无法请求。简单来说，你的域名必须符合协议。所以你还需要为你的域名申请一个证书。如果您没有域名，请先注册一个。由于我们还没有收到内测，所以暂时不需要登录微信公众平台配置通讯域名。

第5步：配置

微信小程序云示例镜像中已经部署完毕，但是还需要修改/etc//conf.d下配置中的域名、证书、私钥。

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

配置完成后，重新加载配置文件并重启。

sudo service nginx reload
sudo service nginx restart

第六步：域名解析

我们还需要添加域名记录，并将域名解析到我们的云服务器上，以便我们可以使用域名进行服务。对于在腾讯云注册的域名，可以直接使用云解析控制台添加主机记录，直接选择上面购买的云服务器。

解析生效后，我们的域名就可以访问了。

步骤7：激活并配置 COS

由于我们想要实现动静分离的架构，所以我们选择将“小相册”的图片资源存储在 COS 上。要使用 COS 服务，需要登录 COS 管理控制台并完成以下操作那里。

单击“创建”。系统会要求您选择项目并填写相应的名称。这里，我们只需要填写我们喜欢的名字即可。

然后在列表中单击您刚刚创建的那个。然后在新页面上点击“获取API密钥”。

弹出的页面包含了我们需要的三条信息：唯一的 APP ID、一对和（用于调用 COS API）。保存此信息，我们稍后会需要它。

最后，在新容器中创建一个文件夹并将其命名为 .稍后我们也会提到这一点。

第八步：启动“小相册”服务器

官方镜像中，小相册示例的Node服务代码已经部署在/data//--目录下。输入目录。如果是自己的服务器，则进入对应的文件夹。

cd /data/release/qcloud-applet-album

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

module.exports = {    
   // Node 监听的端口号    port: '9993',    ROUTE_BASE_PATH: '/applet',    cosAppId: '填写开通 COS 时分配的 APP ID',    cosSecretId: '填写密钥 SecretID',    cosSecretKey: '填写密钥 SecretKey',    cosFileBucket: '填写创建的公有读私有写的bucket名称', };

另外，cd .///，修改list.js，将值修改为你的图片存储路径。如果是根目录，则将其更改为“/”。在当前服务器代码中该值设置为“/”。如果没有在第七步创建目录，将无法调试成功。

小相册示例使用pm2来管理Node进程。执行以下命令启动节点服务：

pm2 start process.json

第九步：配置“小相册”通讯域名

接下来，在微信网页开发者工具中打开“小相册”项目，将源文件.js中的通信域名host更改为您申请的域名。

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

然后点击，打开小相册Demo，开始体验。

最后提醒一下：目前微信小程序提供的上传下载API在调试工具中还无法正常使用，需要使用手机扫描二维码进行预览体验。但由于我们没有内测资质，所以暂时无法体验。

好吧，这还不够，没有内测邀请。