如何在一小时内快速搭建微信小程序

划时代的产品“小程序”发布已经快一周了，互联网技术人员已经整装待发，跃跃欲试。但是小程序还在内测，第一批只发了200个内测资格(泪流满面)。我以为这个月没有AppID我就无法逃脱这个小程序。好在这两天微信发布了开发者工具的官方版本，不用内部测试邀请就可以作为早期采用者。

所以，有我第一次用“小程序”的经历，我的感觉只有一个字：——爽！

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

在知名同性交友网站Github上，有很多Demo的“小程序”，但大多只是简单的API演示，有的甚至直接在json文件中写入页面数据(显然有网络请求API)。我想体验的是一个可以无缝连接服务器和小程序的项目(体验够爽)。最后选择了腾讯云正式推出的“小相册”项目。

“小相册”主要实现以下功能：

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

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

云对象服务(Cloud Object Service)是腾讯云面向企业和个人开发者推出的高可用、稳定、安全的云存储服务。任何数量和形式的非结构化数据都可以放入COS中，数据管理和处理都可以在COS中实现。

之所以选择腾讯云的Demo，是因为它是腾讯自己推出的，项目质量有保障；二是不多见的既谈小程序开发，又介绍云部署的项目。

稍有经验的程序员都知道，架构应该脱离静态和动态。静态文件不应该放在自己的服务器上，而应该放在COS上，COS是一个专用于存储的对象存储服务器，由CDN加速。“小相册”后端使用Node.js和Nginx作为反向代理。

第一步：构建开发环境

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

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

选择添加一个项目，如果没有AppID，选择无(如果写的不正确，可能到时候无法输入项目)。如果您选择的项目目录为空，请勾选“在当前目录下创建快速启动项目”，如图所示。

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

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

接下来，我们下载“小相册”的源代码。可以选择直接从腾讯云官网提供的链接下载，也可以从腾讯云团队的Github仓库拉取。我建议从Github仓库中拉出来，以便及时得到最新的代码。

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

最终，我们会得到这样一个文件目录。

简要说明目录结构：

小程序(或app):“小相册”应用包代码可以在微信开发者工具中直接作为项目打开。Server:构建了Node服务器代码，作为服务器和app之间的通信，提供了拉取图片资源、上传图片、删除图片的CGI接口示例。资产：《小相册》演示截图。下载源代码后，我们打开微信网页开发者工具，新建一个项目“小相册”，选择目录小程序(或app)。

“小相册”源代码分析

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

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

在pages目录下，有两个页面，即索引和相册。页面结构相对简单，其中索引是小程序启动时默认输入的页面。在每个页面下，必须至少有两个文件：js(页面逻辑)和wxml(页面结构)，以及wxss(页面样式表)和json(页面配置)文件是可选的。您可能已经注意到这些文件的文件名与父目录的文件名相同。这是微信的官方规定，旨在减少配置项，方便开发者。

接下来，我们以索引页为例做一个简单的说明。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 ' bind tap=' goto album '输入相册/button/view/view class=' page-bottom ' text class=' QR-txt '分享二维码，邀请朋友一起写小程序！/textimage src=' http:/./images/QR . png ' class=' QR-img '/image image src=' http 3360././images/logo . png ' class=' page-logo '/image/view/view page具有以下演示效果：

我们可以看到页面上有一个“进入相册”按钮。正常理解，点击这个按钮后，我们就可以进入相册了(这不是废话)。这个小程序背后的操作是如何实现的？

在index.wxml中，我们发现在对应的button标记上定义了一个bindtap属性，并绑定了一个名为gotoAlbum的方法。这个方法可以在index.js文件中找到。其实文件中只定义了这个方法，具体动作是跳转到相册页面。

页面({ //转到相册页面goto album(){ wx . navigatetto({ URL : ')./专辑/专辑' })；},});程序的主要逻辑写在相册. js页面，包括选择或拍摄图片、预览图片、下载图片和删除图片。在album.wxml中，使用了三个视图容器，即view、scroll-view和swiper，并且还提供了消息提示框toast。具体方法和观点请参考项目源代码。所有这些函数都是在Page类中编写的。

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

总的来说，正如微信官方所宣传的，在开发者工具下开发小程序的效率确实提高了很多，微信改进的组件和API也很多。所以开发速度的体验还是很让人耳目一新的。

此外，因为“小相册”需要使用很多云功能，比如上传和下载图片，我们还需要在服务器端进行部署和设置。详情请见后续步骤。

步骤3:在云中部署服务器代码

服务器的开发虽然不是本文的重点，但为了全面体验“小相册”的整个开发部署过程，我们有必要了解一下服务器的部署。这里我们使用腾讯云。

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

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

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

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

如果已经有了腾讯云的服务器和域名，配置了https，可以跳过步骤4-6。

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

步骤5: Nginx配置https

在微信小程序的云示例图中，已经部署了Nginx，但是需要在/etc /etc/nginx/conf.d下修改配置中的域名、证书和私钥

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

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

Sudo服务nginx重新加载sudo服务nginx重新启动步骤6:域名解析

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

决议生效后，我们的域名将支持https访问。

步骤7:打开并配置COS

因为要实现动静态分离架构，所以选择在COS上存储“小相册”的图像资源。要使用COS服务，您需要登录到COS管理控制台，然后在其中完成以下操作。

单击创建桶。系统会要求您选择项目并填写相应的名称。在这里，我们只需要填写我们最喜欢的Bucket名称。

然后，在“桶”列表中，单击刚刚创建的桶。然后点击新页面上的“获取应用编程接口密钥”。

弹出页面包括我们需要的三条信息：唯一的应用程序标识、一对密码和密码基(用于调用COS应用程序接口)。注意这些信息，我们稍后会用到。

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

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

在官方图片中，小相册示例的Node服务代码已经部署在目录/数据/发布/qcloud-applet-相册中。输入此目录。如果是自己的服务器，请输入对应的文件夹。

在这个目录下，CD/data/release/qcloud-applet-album有一个名为config.js的配置文件(如下图所示)，根据注意事项修改对应的COS配置：

module.exports={//节点侦听的节点号为port:' 9993 '，route _ base _ path:'/applet '，COS appid: '填写启用COS时分配的appid '。CosSecretId: '填写密钥SecretId '，cosSecretKey: '填写密钥SecretKey '，cosFileBucket: '填写公共读取和私有写入创建的桶名'，}；另外，cd。/routes/album/handlers，修改list.js，并将const listPath的值更改为Bucket下的图像存储路径。如果是根目录，则修改为“/”。在当前服务器代码中，该值设置为“/photos”。如果在步骤7中没有创建此目录，则无法成功调试。

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

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

接下来，在微信web Developer Tool中打开“小相册”项目，将源文件config.js中的通讯域名主机修改为你申请的域名。

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

然后点击调试，就可以打开一个小相册Demo开始体验了。

最后，截至目前，微信小程序提供的上传下载API在调试工具中无法正常工作，需要在微信上扫码预览体验。但由于缺乏内测资质，暂时无法体验。

这还不够酷。没有内部测试邀请。

更新：腾讯云还写了另外三个演示教程，大家也可以看看。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。