1.搭建微信支付宝小程序服务

1.1教程简介

本教程提供在阿里云云服务器ECS上基于CentOS 7.9操作系统搭建高可用的小程序服务端的指引。同时指导您在本地开发一个简单的微信小程序——ECS小助手，通过远程调用部署在ECS上的服务端，实现在小程序中输入框输入ECS实例ID查询实例详细信息的功能。

小程序界面的示意图如下：

1.1.1我能学到什么

熟悉远程登录CentOS操作系统的ECS实例。
学会在ECS实例中部署一个高可用的Python服务。
开发微信小程序页面，并与服务端进行数据交互。

1.2准备环境和资源

1.2.1准备资源

部署高可用的小程序服务需要2个ECS实例（CentOS 7.9 64位）、1个CLB实例。

1.2.2领取免费试用权益

进入以下资源领取入口，单击页面右上方的登录/注册按钮，并根据页面提示完成账号登录（已有阿里云账号）、账号注册（尚无阿里云账号）或实名认证（根据试用产品要求完成个人实名认证或企业实名认证）。

如果您已有相应资源，可以跳过该步骤直接使用。如果您是产品新用户，可按下列步骤领取免费试用权益。

资源领取入口	本教程配置
云服务器ECS	1核2GB 3个月地域：华北2（北京）操作系统：CentOS 7.9 64位试用数量：2（ECS01、ECS02）其他参数：保持默认值或按需选择
传统型负载均衡CLB	每月750个小时 15LCU（免费：每月750小时实例使用时间，每月15个LCU，时长3个月）地域与可用区：选择与ECS实例相同的地域，本教程选择华北2（北京）实例计费方式：按使用量计费实例类型：公网 IP 版本：IPv4 试用数量：1
共享流量包	10GB 1个月（用于抵扣CLB公网流量费）

1.3一键配置

准备好资源后，您可以通过一键配置快速完成资源配置或应用搭建。一键配置基于阿里云资源编排服务ROS（Resource Orchestration Service）实现，旨在帮助开发者通过IaC（Infrastructure as Code）的方式体验资源的自动化配置。如需查看软件版本、安装命令等配置的具体信息，可查看教程的手动配置版。模板完成的内容包括：

为ECS实例配置安全组
创建角色并绑定到ECS实例
安装Nginx服务并写入配置
安装uWSGI Server并写入配置
安装Python环境并写入代码

1.3.1操作步骤

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

2.ROS控制台默认处于您上一次访问控制台时的地域，请根据您创建的资源所在地域修改地域。您可以在顶部导航栏选择华北2（北京）地域，保持页面所有选项不变，单击下一步进入配置模板参数页面。

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

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

1.4注册微信小程序

在开发小程序之前，您需要先注册微信小程序。

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

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

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

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

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

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

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

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

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

项目名称：例如ECSAssistant。
目录：例如D:\workspace\wechat\ECSAssistant。
AppID：小程序的唯一标识，从小程序控制台获取。
开发模式：小程序。
后端服务：不使用云服务。

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

1.6开发小程序

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

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

app.json 应用配置。用于配置小程序的页面列表、默认窗口标题、导航栏背景色等。更多信息，请参见全局配置。
app.acss 应用样式。定义了全局样式，作用于当前小程序的所有页面。
app.js 应用逻辑。可配置小程序的生命周期，声明全局数据，调用丰富的API。

小程序所有的页面文件都在pages/路径下，页面文件有四种文件类型，分别是.js、.wxml、.wxss、和.json后缀的文件。相比全局配置文件，页面配置文件只对当前页面生效。其中.wxml文件定义了当前页面的页面结构。小程序中的所有页面都需要在app.json文件中声明。更多信息，请参见代码构成。
此外，项目顶层还有开发工具配置文件project.config.json和爬虫索引文件sitemap.json。

ECSAssistant
├── app.js
├── app.json
├── app.wxss
├── pages
│ ├── index
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.wxml
│ │ └── index.wxss
│ └── logs
│     ├── logs.js
│     ├── logs.json
│     ├── logs.wxml
│     └── logs.wxss
├── project.config.json
└── sitemap.json

2.编辑app.json文件，将小程序页面Title修改为ECS小助手，修改后的app.json文件内容如下。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "ECS小助手",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3.编辑pages/index/index.wxss文件，定义index的页面样式，修改后的index.wxss文件内容如下。

.search-input {
  position: relative;
  margin-bottom: 50rpx;
  padding-left:80rpx;
  line-height: 70rpx;
  height: 80rpx;
  box-sizing: border-box;
  border: 2px solid #ff8f0e;
  border-radius: 100rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border 0.2s;
}
.resultView {
  margin-top: 70rpx;
}
.result {
  position: relative;
  left: 30rpx;
  display: list-item;
  font-size: small;
}

4.编辑pages/index/index.js文件，定义搜索框的失去焦点事件，修改后的index.js文件内容如下。
❔说明
将代码中换成您刚刚创建的CLB实例的公网IP。

Page({
  data: {
    queryResult: null,
    showView: 'false',
  },
  bindblur: function(e) {
    let that = this;
    wx.request({
      url: 'http://<CLB_PUBLIC_IP>/ecs/getServerInfo',
      method: 'GET',
      data: {
        instanceId: e.detail.value
      },
      success(res) {
        if(res.statusCode == 200){
          that.setData({
            queryResult: res.data,
            showView: !that.data.showView,
          });
        }else{
          that.setData({
            showView: 'false',
          });
          wx.showToast({
            title: '请输入你的ECS实例ID',
            duration: 1500,
            icon: 'none',
            mask: true
          })
        }
      }
    })
  }
})

5.编辑pages/index/index.wxml文件，编写展示界面，修改后的index.wxml文件内容如下。

<view class='container'>
  <input placeholder='请输入你的ECS实例ID' class='search-input' value='{{ inputValue }}' bindblur='bindblur'></input>
  <view class='resultView' hidden='{{ showView }}'>
    <text class='result'>CPU数：{{queryResult.Cpu}} 核</text>
    <text class='result'>内存大小：{{queryResult.Memory}} MB</text>
    <text class='result'>操作系统：{{queryResult.OSName}}</text>
    <text class='result'>实例规格：{{queryResult.InstanceType}}</text>
    <text class='result'>公网IP地址：{{queryResult.IpAddress}}</text>
    <text class='result'>网络带宽：{{queryResult.InternetMaxBandwidthOut}} MB/s</text>
    <text class='result'>在线状态：{{queryResult.instanceStatus == 'Running' ? '运行中':'已关机'}}</text>
  </view>
</view>

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

1.7完成

完成以上操作后，您已经成功部署了服务端程序，并且在本地开发好了小程序。

您可以登录ECS控制台，复制刚刚创建的ECS实例ID，输入到小程序输入框中，就可以看到结果了。

您可以通过停机一台ECS模拟故障进而验证服务的可用性。操作如下：

1.登录ECS控制台，找到目标实例，在操作列单击，在面板单击停止。

2.等ECS状态为已停止后，再次在小程序中查询ECS实例ID，看到返回正常内容，则表明服务可用。

1.8清理及后续

1.8.1清理

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

如果无需继续使用实例，可以登录ECS控制台，找到目标实例，在操作列单击，搜索并单击释放设置，根据界面提示释放实例。
如果需要继续使用实例，请至少在试用到期1小时前为阿里云账号充值，确保账户金额不小于100.00元人民币。到期未续费的实例会因欠费而被自动停机，停机15天内实例将保留，15天后实例和数据都将被自动释放。
包年包月实例到期会自动释放，释放实例的同时释放数据。
如果需要继续使用实例，请在试用到期前及时续费。到期未续费的实例会因欠费而被自动停机，停机15天内实例将保留，15天后实例和数据都将被自动释放。

2.CLB免费试用权益有期限限制，权益到期后未释放的CLB实例可能产生费用。完成教程后，请参考以下场景处理CLB实例：

如果无需使用CLB实例，您可以登录传统型负载均衡CLB控制台，在左侧导航栏，选择传统型负载均衡CLB(原SLB)>实例管理，在实例管理页面，找到目标CLB实例，在操作列单击 >释放设置，按照界面提示手动释放实例。
如果需继续使用CLB实例，请至少在试用到期1小时前为您的阿里云账号充值，确保账户金额不小于100.00元人民币。到期未续费的CLB实例会因欠费而被自动停机，停机7天内CLB实例将保留，7天后CLB实例和数据都将被自动释放。

1.8.2后续

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

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

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

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

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

1.9延伸阅读

2.搭建高可用的支付宝小程序服务

2.1教程简介

本教程提供在阿里云云服务器ECS上基于CentOS 7.9 64位操作系统搭建高可用的小程序服务端的指引。同时指导您在本地开发一个简单的支付宝小程序——ECS小助手，通过远程调用部署在ECS上的服务端，实现在小程序中输入框输入ECS实例ID查询实例详细信息的功能。

小程序界面的示意图如下：

2.1.1我能学到什么

1.熟悉远程登录CentOS操作系统的ECS实例。

2.学会在ECS实例中部署一个高可用的Python服务。

3.开发支付宝小程序页面，并与服务端进行数据交互。

2.2准备环境和资源

2.2.1准备资源

部署高可用的小程序服务需要2个ECS实例（CentOS 7.9 64位）、1个CLB实例。

2.2.2领取免费试用权益

如果您已有相应资源，可以跳过该步骤直接使用。如果您是产品新用户，可按下列步骤领取免费试用权益。

资源领取入口	本教程配置
云服务器ECS	1核2GB 3个月地域：华北2（北京）操作系统：CentOS 7.9 64位试用数量：2（ECS01、ECS02）其他参数：保持默认值或按需选择
传统型负载均衡CLB	每月750个小时 15LCU（免费：每月750小时实例使用时间，每月15个LCU，时长3个月）地域与可用区：选择与ECS实例相同的地域，本教程选择华北2（北京）实例计费方式：按使用量计费实例类型：公网 IP 版本：IPv4 试用数量：1
共享流量包	10GB 1个月（用于抵扣CLB公网流量费）

2.3一键配置

为ECS实例配置安全组

创建角色并绑定到ECS实例
安装Nginx服务并写入配置
安装uWSGI Server并写入配置
安装Python环境并写入代码

2.3.1操作步骤

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

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

2.4注册支付宝小程序

开发支付宝小程序前需要您入驻支付宝开放平台，具体操作请参见开发者入驻。

1.进入支付宝开放平台注册页根据指引填写信息和提交相应的资料，完成账号申请。

2.在支付宝开放平台上创建小程序应用，具体操作请参见创建小程序。

❔说明

您可以通过此账号关联本地开发项目和小程序，上传您的小程序项目到支付宝开放平台。

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

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

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

2.下载并安装支付宝小程序开发者工具。详细信息请参见下载说明。

3.打开小程序开发者工具。

4.单击加号创建支付宝小程序空白项目。

5.按照流程，选择支付宝，模板选择空白模板，填入如下项目信息后，单击完成。

项目名称：例如ECSAssistant。
项目路径：例如/Users/demo/ECSAssistant。
框架语言：原生小程序。

2.6开发小程序

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

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

app.json 应用配置。用于配置小程序的页面列表、默认窗口标题、导航栏背景色等。
app.acss 应用样式。定义了全局样式，作用于当前小程序的所有页面。
app.js 应用逻辑。可用于注册小程序应用，可配置小程序的生命周期，声明全局数据，调用丰富的 API。

小程序所有的页面文件都在pages/路径下，页面文件有四种文件类型，分别是.js、.axml、.acss（可选）和.json后缀的文件。相比全局配置文件，页面配置文件只对当前页面生效。其中.axml文件定义了当前页面的页面结构。
此外，小程序中的所有页面都需要在app.json文件中声明。
更多配置请参见小程序全局配置介绍。

ECSAssistant
├── app.acss
├── app.js
├── app.json
└── pages
    └── index
        ├── index.axml
        ├── index.js
        └── index.json