在一小时内快速构建微信小程序

具有划时代意义的产品“小程序”已经发布了将近一个星期，并且互联网技术的人们都在急于尝试. 但是，该小程序仍处于内部测试中，并且第一批仅颁发了200个内部测试资格（泪流满面）. 我本月以为没有AppID，就错过了这个applet. 幸运的是，微信在过去的两天内发布了开发人员工具的正式版本，您可以在没有内部测试邀请的情况下进行试用.

因此，我对“小程序”有第一次体验，我的感觉只有一个字！！

在著名的同性约会网站Github上，有很多“小程序”演示，但其中大多数只是简单的API演示，有些甚至直接将页面数据写在json文件中（是网络请求API）. 我想体验的是一个可以无缝连接服务器和Applet的项目（这种体验足够酷）. 最后，我选择了腾讯云正式启动的“小相册”项目.

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

演示图片（受开发工具的限制，某些功能尚未实现）

对象存储服务（云对象服务）是腾讯云为企业和个人开发人员推出的高可用性，高度稳定和高度安全的云存储服务. 您可以将任意数量和形式的非结构化数据放入COS，并在其中管理和处理数据.

之所以选择腾讯云的演示，是因为它是由腾讯启动的，并且可以保证项目的质量. 其次，这是一个罕见的项目，涉及小程序开发和云部署.

一些经验丰富的程序员知道体系结构应该动态和静态分离. 最好不要将静态文件放在您自己的服务器上，而应将对象文件存储服务器COS（专门用于存储）放置在CDN上并进行加速. “小相册”的后端使用Node.js和Nginx作为反向代理.

首先，我们需要在本地构建一个微信“小程序”开发环境. 下载开发人员工具. 微信官方已经发布了IDE的正式版，无需下载破解版. 打开官方网站下载页面，然后根据您的操作系统进行选择. 我使用的是Mac版本.

安装后，打开并运行，将要求您使用微信扫描代码登录. 之后，您将看到用于创建项目的页面.

选择添加项目. 如果您没有AppID，请选择无. （如果您搞砸了，将会收到一个错误消息，并且您可能此时无法输入该项目. ）如果您选择的项目目录为空，请勾选“在当前目录中创建快速启动项目”. 在图中.

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

接下来，我们下载“ Little Album”的源代码. 您可以选择直接从腾讯云官方网站提供的链接下载，也可以从腾讯云团队的Github仓库中下载. 我建议从Github存储库中提取信息，以便及时获取最新代码.

git clone

最后，我们将获得一个这样的文件目录.

目录结构的简单说明:

下载源代码后，我们打开微信Web开发工具，创建一个新项目“小相册”，然后选择目录applet（或应用程序）.

在部署之前，让我们简要分析“小相册”的特定代码. 毕竟，仅仅看效果不是我们的目的. 我们的目的是以“小相册”为例，了解如何开发小程序并与服务器交互.

“小相册”包含一个描述整个程序的应用程序以及多个描述其各自页面的页面. 主程序app主要由三个文件组成，即app.js（applet逻辑），app.json（applet公共设置）和app.wxss（applet公共样式表），其中前两个是必需文件. config.js文件包含一些用于部署域名的设置，该设置现已被忽略.

在页面目录下，有两个页面页面，索引页面和相册. 页面结构相对简单，其中小程序启动时index是默认页面. 在每个页面下，必须至少有两个文件，.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" 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中微信云端相册，我们发现相应的按钮标记定义了bindtap属性并绑定了一个名为gotoAlbum的方法. 可以在index.js文件中找到此方法. 实际上，文件中仅定义了一种方法，所执行的特定操作是跳转到相册页面.

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

Album.js页面编写了程序的主要逻辑，包括选择或拍照，图片预览，图片下载和图片删除； album.wxml中的三个视图容器视图，滚动视图和swiper都被使用. 提供消息提示框吐司. 请参阅项目源代码以了解具体方法并查看实现. 所有这些功能都是在Page类中编写的.

lib目录提供了applet将使用的一些辅助功能，包括用于异步访问的API和对象存储COS.

总的来说，正如微信官方所宣传的那样，在开发人员工具下开发小型程序的确确实改善了很多，并且微信改进了许多组件和API. 因此，开发速度方面的经验非常酷.

此外，由于“小相册”需要使用许多云功能，例如上载和下载图片，因此我们还需要在服务器端进行部署和设置. 有关详细信息，请参见后续步骤.

尽管服务器的开发不是本文的重点，但是为了充分体验“小相册”的整个开发和部署过程，我们仍然需要了解服务器的部署. 在这里，我们使用腾讯云.

如果您想更加舒适，可以选择腾讯云提供的小程序的云镜像. 服务器运行代码和“小相册”的配置已打包到腾讯云CVM映像中，可以直接使用. 可以说一键部署云.

如果您以前从未使用过腾讯云，则可以选择免费试用（我已经收到了8天的服务器），或者以折扣价购买所需的服务.

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

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

在微信小程序中，严格限制所有网络请求，并且不能请求不符合条件的域名和协议. 简而言之，您的域名必须遵循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管理控制台，然后完成其中的以下操作.

点击创建存储桶. 系统将要求您选择项目并填写相应的名称. 在这里，我们只需要填写我们喜欢的存储桶名称即可.

然后在“存储桶”列表中单击刚创建的存储桶. 然后在新页面上单击“获取API密钥”.

弹出窗口包含我们需要的三部分信息: 唯一的APP ID，一对SecretID和SecretKey（用于调用COS API）. 保留此信息，我们将在以后使用.

最后，在新的Bucket容器中创建一个文件夹，并将其命名为photos. 我们稍后还会提到.

在正式提供的图像中，小相册示例的Node服务代码已部署在目录/ data / release / qcloud-applet-album中. 输入此目录，如果是您自己的服务器，请输入相应的文件夹.

cd /data/release/qcloud-applet-album

在此目录中，有一个名为config.js的配置文件（如下所示），根据注释修改相应的COS配置:

module.exports = {
    // 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的值更改为存储桶下图像的存储路径. 如果它是根目录，请将其修改为“ /”. 在当前服务器端代码中，将此值设置为“ / photos”. 如果未在第七步中创建目录，则无法成功调试.

这个小相册示例使用pm2来管理Node进程并执行以下命令以启动Node服务:

pm2 start process.json

接下来，在微信Web开发人员工具中打开“小相册”项目，并将源文件config.js中的通信域名主机修改为您申请的域名.

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

然后单击“调试”，您可以打开演示Demo来开始体验.

最后一个提示是，到目前为止，微信小程序提供的上传和下载API在调试工具中无法正常工作，您需要在手机上使用微信代码扫描预览体验. 但是，由于缺乏内部测试资格，我们暂时无法体验.

嗯，这还不够好，没有邀请进行内部测试.

更新: 腾讯云还编写了另外三个小程序教程进行演示，您也可以看看.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/tongxinshuyu/article-234117-1.html