如何快速搭建微信小程序

昵称50409557 2019-03-21

展开全文

在GitHub上，分享分享小程序Demo可不少，但是仅仅只停留在API调用及静态数据展示层面，本教程想给大家展现的是将小程序与服务端无缝结合使用，最终，我们参考腾讯云推出的小程序体验demo微信小程序用户资源上传COS示例，也就是小程序的小相册项目。

根据官方文档，小相册是结合腾讯云对象存储服务（Cloud Object Service，简称COS）制作的一个微信小程序示例。在代码结构上包含如下两部分：

applet: 小相册应用包代码，可直接在微信开发者工具中作为项目打开
server: 搭建的 Node 服务端代码，作为服务器和applet通信，提供 CGI 接口示例用于拉取 COS 图片资源、上传图片到 COS、删除 COS 图片等。

小相册主要功能如下：

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

现在，就让我们开始学习如何部署这个Demo吧！

搭建小程序开发环境

开发小程序的第一步，你需要拥有一个小程序账号，通过这个账号你就可以管理你的小程序。

申请账号

点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序账号。

如果你注册过小程序，可以点击右侧的立即登录。如果没有的话，请重新注册，值得注意的是，邮箱必须填写未在微信公众平台、未在微信开放平台、个人未绑定的邮箱，不然这里是无法注册的。密码请填写你能记住的密码即可。

现在登录https://mp.weixin.qq.com/，点击左侧的设置——开发设置，在这里，我们就能看到你小程序的AppID了。

当小程序的ID拿到之后，我们就可以下载安装开发工具了。

安装开发工具

现在，打开开发者工具下载页面，根据自己的操作系统下载对应的安装包进行安装。

创建“小相册”项目

在创建“小相册”项目之前，我们需要下载“小相册”源代码文件，你可以直接点击这里下载官方的DEMO文件，也可以去官方GitHub仓库拉取，以便获取最新的代码。我这里使用Git命令获取官方最新源码。

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

app.js 是小程序入口文件
app.json 是小程序的微信配置，其中指定了本示例的用户资源上传页面index
pages目录 内包含各个页面的入口和配置，业务逻辑，如index目录则为index页面

之后，点击开发者中间首页的小程序项目按钮，项目目录选择你刚下载“小相册”项目目录，AppID写第一步自己获取到的。项目名称可自行填写，我这里填写为小相册。然后点击确定按钮即可。

准备域名和证书

在微信小程序中，所有的网络请求受到严格限制，不满足条件的域名和协议无法请求，具体包括：

只允许和在微信公众平台中配置好的域名进行通信，如果还没有域名，需要注册域名。
网络请求必须走 HTTPS 协议，所以你还需要为你的域名申请一个证书。

注册域名

我们可以在这里注册购买自己喜欢的域名，腾讯云最近也在做优惠活动，最低价格仅1元/年！我们就从中挑选一个吧，这里我以域名为例。当我们注册完域名后，就需要将你的域名解析到你的服务器了。

等解析完成后，我们可以测试下你的域名是否指向了你的服务器，我们在你的Windows电脑上按下Win键+R键，然后输入cmd，在弹出的命令提示符窗口中输入你刚设置的域名，我这里以weixin.为例，这里请改成你自己的域名。

申请证书

之后，我们需要申请SSL证书，可以点击这里申请腾讯云提供的免费证书，在购买页面，选择域名型免费版（DV）证书。

配置服务器

小相册的服务器运行代码和配置已经打包成腾讯云 CVM 镜像，大家可以直接使用。如果你和我一样，已经拥有了一台服务器，那则可以重装系统选择已有镜像进行部署。腾讯云用户可以免费领取礼包，体验腾讯云小程序解决方案。

连接服务器

首先检查你的服务器安全组设置，确保其开放SSH使用的22和HTTP访问使用80端口，建议先打开全部端口。然后我们通过SSH软件登录服务器，如果你本地电脑是Windows情况下可以使用putty等软件，Linux及MacOS请使用终端进行连接。

我这里以MobaXterm的终端软件为例，点击左上角的Session按钮，选择以SSH方式连接，在Remote host输入你的服务器的公网IP地址，Specify username输入你的用户名，如果你的服务器是Ubuntu系统，请输入ubuntu如果是CentOS系统则输入root。这里我们是CentOS系统，所以我们输入root。

点击OK后，输入你设置的密码（默认不显示），即可连接到你的服务器，你会看到类似下面的页面。

这样，你就进到你的服务器的页面了。

配置HTTPS

镜像默认中已经部署了Nginx服务，在启动Nginx之前，我们需要对其进行配置。打开/etc/nginx/conf.d下修改配置中的域名、证书、私钥。首先，上传你在准备域名证书步骤中下载的证书。我们先将其解压出来，然后再将其上传到服务器的/etc/nginx/ssl目录下。

cd /etc/nginx/ssl
ls

cd /etc/nginx/conf.d
ls

mv www.qcloud.la.conf weixin..conf

然后，使用nano命令对其进行编辑

nano weixin..conf

将全部的www.qcloud.la替换成你的域名，我这里以weixin..conf为例。

server {
        listen 80;
    listen 443 ssl;

    server_name weixin.;
        charset utf-8;

        access_log logs/weixin..access.log main;
        error_log logs/weixin..error.log;

    ssl on;
    ssl_certificate ssl/1_weixin._bundle.crt;
    ssl_certificate_key ssl/2_weixin..key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1;
    ssl_ciphers HIGH:!aggNULL:!MD5;
    ssl_prefer_server_ciphers on;

        include conf.d/partials/*.conf;
}

注意：ssl_certificate ssl/1_weixin._bundle.crt;和ssl_certificate_key ssl/2_weixin..key;这两行名称一定要和你上传文件的名称相同！

之后，我们就可以启动Nginx了，输入Nginx启动HTTP服务。

nginx

然后，打开你的浏览器，访问https://weixin.这里替换成你的域名，前缀一定要是https。

开通COS

小相册示例的图片资源是存储在 COS 上的，要使用 COS 服务，需要登录 COS 管理控制台，然后在其中完成以下操作，注意，本Demo不支持COS V5版本，使用前请先确定你创建的存储桶的版本。

创建并设置

开通 COS 得到APP ID及密钥对

然后，我们点击左侧的密钥管理，在这个页面，点击「云 API 密钥」按钮，获取我们的API。

一切准备就绪，终于可以在服务器端启动我们小相册的服务了。打开我们的服务器SSH页面。在刚才部署的镜像中中，小相册示例的 Node 服务代码已部署在目录/data/release/qcloud-applet-album下，进入该目录：

cd /data/release/qcloud-applet-album

在该目录下有个名为config.js的配置文件，按注释修改对应的 COS 配置：

nano config.js

修改对应的 COS 配置

module.exports = {
    // Node 监听的端口号
    port: '9993',
    ROUTE_BASE_PATH: '/applet',

    cosAppId: '填写开通 COS 时分配的 APP ID',
    cosSecretId: '填写密钥 SecretID',
    cosSecretKey: '填写密钥 SecretKey',
    cosFileBucket: '填写创建的公有读私有写的bucket名称',};

这里填写你上一步设置的APPID、SecretID、SecretKey、及bucket名称，如图