如何使用阿里云搭建微信小程序？

一、引言

微信小程序以其轻量、便捷和无需下载安装的特点，迅速成为移动互联网的一大趋势。通过阿里云的支持，可以更加高效地开发和部署微信小程序。本教程提供在阿里云云服务器ECS上基于Alibaba Cloud Linux 3.2104 LTS 64位操作系统搭建小程序服务端的指引。同时指导您在本地开发一个简单的微信小程序——ECS小助手，通过远程调用部署在ECS上的服务端，实现在小程序中输入框输入ECS实例ID查询实例详细信息的功能。

二、开通云服务器ECS免费试用

1. 在实验室页面下方，选择任意一个免费试用规格的云服务器ECS，单击立即试用。

2. 在云服务器ECS面板，根据如下说明完成参数配置，选中协议，单击立即试用，如弹出新的页面，您可先忽略。本试用教程以下列的配置信息为例，实际操作时，建议根据您的实际业务体量和需求选择。

3. 前往ECS控制台，在左侧导航栏，选择实例与镜像 > 实例。

4. 在顶部菜单栏左上角处，本实验中地域选择华东1（杭州）。

5. 设置该实例登录密码。找到您创建的试用实例，在其右侧操作列单击> 实例属性 > 重置实例密码，按照界面提示设置ECS实例的登录密码。

6. 单击试用实例的ID，选择安全组页签，单击安全组操作列的配置规则，在入方向添加需要放行的端口。本教程中，在安全组入方向放行80、443、22、3389端口。

三、一键配置

1. 打开一键配置模板链接前往ROS控制台，系统自动打开使用新资源创建资源栈的面板，并在模板内容区域展示YAML文件的详细信息。

2. ROS控制台默认处于您上一次访问控制台时的地域，请根据您创建的资源所在地域修改地域。确认好地域后，保持页面所有选项不变，单击下一步进入配置模板参数页面。

3. 在配置模板参数页面修改资源栈名称，选择您刚刚创建的ECS实例，并设置要创建的用于ECS实例扮演的角色名称。填写完所有必选信息并确认后单击创建开始一键配置。

4. 当资源栈信息页面的状态显示为创建成功时表示一键配置完成。

四、注册微信小程序

1. 进入小程序页面，单击前往注册，根据指引填写信息和提交相应的资料，点击注册，完成账号申请。

2. 使用申请的微信公众平台账号登录小程序后台，单击开发管理> 开发设置，可以看到小程序的AppID，请记录AppID，后续操作中需要使用。

五、安装小程序开发环境并创建项目

启动好后端服务后，我们接下来要开发小程序。先安装小程序开发环境。

1. 安装Node.js开发环境，请到Node.js页面下载并安装Node.js环境。

2. 下载并安装微信小程序开发工具。详细信息请参见开发工具下载。

3. 打开小程序开发工具，使用微信扫码登录。

4. 单击加号创建微信小程序示例项目。

5. 参考以下填写项目信息，最后单击新建。

• 项目名称：例如ECSAssistant。

• 目录：例如D:\workspace\wechat\ECSAssistant。

• AppID：小程序的唯一标识，从小程序控制台获取。

• 开发模式：小程序。

• 后端服务：不使用云服务。

• 模板选择：TS-基础模板

6. 配置项目允许访问非HTTPS域名。在顶部配置栏，选择设置>项目设置，在本地设置页签，选中不校验合法域名、web-view（业务域名）、TLS版本一级HTTPS证书。

六、开发小程序

安装好开发环境后，我们来编写小程序代码。

1. 生成的的小程序示例项目结构如下。可以看到小程序的项目结构中有三种前缀为app的文件，它们定义了小程序的一些全局配置。

• app.json 应用配置。用于配置小程序的页面列表、默认窗口标题、导航栏背景色等。更多信息，请参见全局配置。

• app.acss 应用样式。定义了全局样式，作用于当前小程序的所有页面。

• app.js 应用逻辑。可配置小程序的生命周期，声明全局数据，调用丰富的API。

3. 小程序所有的页面文件都在pages/路径下，页面文件有四种文件类型，分别是.ts、.wxml、.wxss、和.json后缀的文件。相比全局配置文件，页面配置文件只对当前页面生效。其中.wxml文件定义了当前页面的页面结构。小程序中的所有页面都需要在app.json文件中声明。更多信息，请参见代码构成。

4. 此外，项目顶层还有开发工具配置文件project.config.json和爬虫索引文件sitemap.json。

5. 编辑app.json文件，将小程序页面Title修改为ECS小助手。

6. 编辑pages/index/index.wxss文件，定义index的页面样式。

7. 编辑pages/index/index.ts文件，定义搜索框的失去焦点事件。

8. 编辑pages/index/index.wxml文件，编写展示界面。

9. 保存后，编辑器会自动刷新。看到如下界面，表示小程序运行成功了。

七、清理

ECS提供的试用实例有按量付费实例和包年包月实例。请在阿里云免费试用确认您试用的实例类型，并参考以下规则清理：

• 如果无需继续使用实例，可以登录ECS控制台，找到目标实例，在操作列单击，搜索并单击释放设置，根据界面提示释放实例。

• 如果需要继续使用实例，请至少在试用到期1小时前为阿里云账号充值，确保账户金额不小于100.00元人民币。到期未续费的实例会因欠费而被自动停机，停机15天内实例将保留，15天后实例和数据都将被自动释放。

• 包年包月实例到期会自动释放，释放实例的同时释放数据。

• 如果需要继续使用实例，请在试用到期前及时续费。到期未续费的实例会因欠费而被自动停机，停机15天内实例将保留，15天后实例和数据都将被自动释放。

八、后续

如果您期望上线您的小程序，您需要做下面几件事：

• 申请域名，可以参考域名注册基本流程如何注册阿里云域名。

• 申请SSL证书，并配置到服务器上，可以参考申请免费DV单域名试用证书。

• 上传小程序并提交审核，可以参考小程序发布上线。

• 待审核通过后，手动上线小程序，就可以在微信客户端中查看和使用小程序了。

九、使用ECS搭建微信小程序，最高赢小米路由器

想必你通过实操，已经学会如何利用阿里云ECS高效地搭建和部署微信小程序。现在邀请你来到阿里云开发者社区参加“搭建微信小程序”活动，领取免费试用云资源，跟随教程完成小程序搭建并发布小程序实验作品，即可领取柠檬电子秤，限量300个。邀请好友一起参加活动，有机会赢取小米路由器。

点击阅读原文，搭建微信小程序~