如何快速搭建微信小程序？快速搭建微信小程序的方法( 二 ) _睿知

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

文章插图
「小相册」包含一个描述整体程序的 app 和多个描述各自页面的 page 。主程序 app 主要由三个文件组成，分别是app.js(小程序逻辑)、app.json(小程序公共设置)和 app.wxss(小程序公共样式表)，其中前两个为必备文件。config.js文件中包含了一些部署域名的设置，现在不用管。
在 pages 目录下，有两个 page 页面，分别是 index 和 album 。页面结构算是比较简单的，其中 index是小程序启动时默认进入的页面。每个页面下，至少要有 .js(页面逻辑)和 .wxml(页面结构)两个文件，.wxss(页面样式表)和.json(页面配置)文件为选填。你可能注意到了，这些文件的文件名与父目录的名称相同。这是微信官方的规定，目的是减少配置项，方便开发者。
接下来我们以 index 页面为例做简单的解释。index.wxml 是这个页面的表现层文件，其中的代码非常简单，可以分为上下两大部分。
恭喜你成功地搭建了一个微信小程序进入相册分享二维码邀请好友结伴一起写小程序!

文章插图
我们看到，页面上有一个“进入相册”的按钮。正常理解，点击后该按钮后我们就可以进入相册了(这不废话嘛) 。那小程序背后是怎样实现该操作的呢?
在 index.wxml 中，我们发现对应的 button 标签上定义了一个 bindtap 属性，绑定了一个叫做 gotoAlbum的方法。而这个方法可以在 index.js 文件中找到。事实上，文件中也只定义了这一个方法，执行的具体动作就是跳转到 album 页面。
Page({ // 前往相册页 gotoAlbum() { wx.navigateTo({ url: &＃39;../album/album&＃39; }); },});
album.js 页面中编写了程序的主要逻辑，包括选择或拍摄图片、图片预览、图片下载和图片删除;album.wxml 中三种视图容器view、scroll-view、swiper均有使用，还提供了消息提示框 toast 。具体方法和视图的实现请查看项目源码。所有的这些功能都写在 Page类中。
lib 目录下提供了小程序会用的一些辅助函数，包括异步访问和对象存储 COS 的 API 。
总的来说，和微信官方宣传的一样，在开发者工具下进行小程序的开发，效率确实提高了很多，而且有很多微信提高的组件和API 。所以，在开发速度这点上的体验还是非常爽的。
另外，由于「小相册」需要使用诸多云端能力，如图片的上传和下载，我们还需要进行服务器端的部署和设置。具体请看接下来的步骤。
第三步：云端部署 server 代码
虽然服务端的开发不是本文的重点，但是为了全面地体验「小相册」的整个开发部署流程，我们还是有必要了解服务端的部署，这里我们使用的是腾讯云。
如果你想更爽一点，那么可以选择腾讯云官方提供的小程序云端镜像。「小相册」的服务器运行代码和配置已经打包成腾讯云 CVM镜像，可以直接使用。可谓是一键部署好云端。
如果你以前没有使用过腾讯云，可以选择免费试用(我已经领取了 8 天的个人版服务器)，或者领取礼包以优惠的价格购买所需的服务。