划时代产品“小程序”发布已经快一周了，互联网技术人士跃跃欲试，然而小程序还在内测中，首批只发放了200个内测资格（泪）。本以为这个月没了小程序就错过了，幸好微信这两天发布了开发者工具正式版，不用内测邀请也可以试用了。搭建微信小程序必须设置域名，下面就来下载吧。小编会在下篇文章解答微信小程序如何设置域名。

于是，我首次体验了“小程序”，当时的感受就一个字——爽！

选择哪个小程序Demo？

知名同志交友网站上有很多“小程序”的demo，但大多只是简单的API演示，有的甚至直接把页面数据写在json文件中（明明有网络请求API）。想体验一个可以无缝打通服务端和小程序的项目（体验感相当不错），最终选择了腾讯云官方推出的“小相册”项目。

「小相册」主要实现以下功能：

列出对象存储 COS 中的图片。点击左上角的上传图片图标，可以调用相机拍照或者从手机相册中选择图片，并将所选图片上传到对象存储 COS。点击任意一张图片可进入全屏图片预览模式，左右滑动可切换预览图片。长按任意一张图片可将其保存到本地或者从对象存储 COS 中删除。

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

之所以选择腾讯云的Demo，一是因为它是腾讯自己推出的，项目质量有保证；二是因为它是为数不多不仅讲小程序开发还介绍云端部署的项目。

稍有经验的程序员都知道，架构应该动静分离，静态文件不要放在自己的服务器上，而是放在专门的对象存储服务器 COS 上，通过 CDN 加速。《小相册》的后端采用 Node.js 作为反向代理。

步骤 1：设置开发环境

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

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

选择Add ，如果没有就选择None（如果输入错误会报错，可能无法进入项目）。如果你选择的项目目录为空，请勾选如图所示的“在当前目录下创建项目”。

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

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

接下来我们下载“小相册”的源代码，你可以选择直接从腾讯云官网提供的链接下载，也可以从腾讯云团队的仓库拉取，我建议从仓库拉取，这样可以及时获取新的代码。

git

最后，我们将得到一个类似这样的文件目录。

目录结构简单说明：

(或app)：“小相册”应用包代码，可在微信开发者工具中直接作为项目打开。 ：构建的作为服务端和app通讯的Node服务端代码，提供拉取图片资源、上传图片、删除图片的CGI接口示例。 ：”小相册”演示截图。

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

“小相册”源码分析

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

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

目录下有 和 两个页面。页面结构比较简单，是小程序启动时的默认页面。每个页面下至少要有 .js（页面逻辑）和 .wxml（页面结构）两个文件，.wxss（页面样式表）和 .json（页面配置）文件是可选的。大家可能注意到了，这些文件的文件名和父目录的名字一致。这是微信官方的规定，目的是为了减少配置项，方便开发者。

接下来我们以页面为例进行简单的说明，.wxml是这个页面的展现层文件，里面的代码很简单，可以分为两部分。

恭喜您成功构建微信小程序，进入相册分享二维码邀请朋友一起编写小程序吧！

页面演示效果如下：

我们可以看到页面上有一个“进入相册”按钮，正常情况下，点击这个按钮之后，我们就可以进入相册了（这简直是废话）。那么小程序是如何实现这个操作的呢？

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

Page({ // 转到相册页面() { wx.({ url: &＃39;..//&＃39; }); }, });

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

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

总的来说，正如微信官方所宣传的，在开发者工具下开发小程序的效率确实要高很多，而且微信改进的组件和API也不少，所以在开发速度方面的体验还是很不错的。

另外，由于“小相册”需要用到很多云端的功能，比如图片的上传、下载等，所以我们还需要部署和设置服务端，具体请参见下一步。

步骤 3：在云上部署代码

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

如果想要更舒服一点，可以选择腾讯云提供的小程序云镜像，“小相册”的服务器运行代码和配置都已经打包成腾讯云 CVM 镜像，直接使用即可，可以说是一键部署上云。

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

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

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

如果您已有腾讯云服务器及域名并已配置完毕，可跳过4-6步。

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

步骤5：配置

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

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

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

须藤须藤

步骤6：域名解析

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

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

步骤 7：激活并配置 COS

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

1.点击，会要求选择项目，并填写相应的名称，这里我们只要填写自己喜欢的名字即可。

2. 然后在列表中点击刚刚创建的 API Key，然后在新页面上点击“获取 API Key”。

弹窗中包括我们需要的三项信息：一个唯一的 APP ID，一对 和 （用于调用 COS API）。这些信息请保存好，后面会用到。

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

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

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

cd /数据//--

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

. = { // 节点监听端口号 port: '9993', : '/', : '填写开启 COS 时分配的 APP ID', : '填写密钥', : '填写密钥', : '填写创建的名称 read ', };

另外，cd .///，修改list.js，将 的值改为你的目录下的图片存放路径，如果是根目录就改为 '/'，当前服务端代码设置的值就是 '/'，如果你在第7步没有创建这个目录，那么调试是无法成功的。

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

pm2.json

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

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

将蓝色框里的内容改成你自己的域名

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

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