步骤一：准备环境和资源

部署高可用的小程序服务需要2台ECS实例（Alibaba Cloud Linux3.2104 LTS 64位 ARM版）、1台CLB实例。具体操作，请参见ECS实例创建方式介绍和创建和管理CLB实例。

本教程配置：

• 云服务器ECS

  • 地域：华北2（北京）

  • 操作系统：Alibaba Cloud Linux3.2104 LTS 64位 ARM版

  • 实例规格配置：2核4 GB

  • 实例数量：2（ECS01、ECS02）

  • 其他参数：保持默认值或按需选择

• 传统型负载均衡CLB

  • 地域与可用区：选择与ECS实例相同的地域，本教程选择华北2（北京）

  • 实例规格配置：按需创建

  • 实例计费方式：按使用量计费

  • 实例类型：公网

  • 实例数量：1

  • IP 版本：IPv4

步骤二：配置资源并搭建服务

步骤三：注册支付宝小程序

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

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

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

步骤四：安装小程序开发环境并创建项目

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

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

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

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

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

   

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

   • 项目名称：例如ECSAssistant。

   • 项目路径：例如/Users/demo/ECSAssistant。

   • 框架语言：原生小程序。

   

步骤五：开发小程序

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

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

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

    

   {
     "pages": [
       "pages/index/index"
     ],
     "window": {
       "defaultTitle": "ECS小助手"
     }
   }

3. 在pages/index目录下，编辑index.axml文件，定义index页面的页面结构，修改后的index.axml文件内容如下。

   说明

   AXML中标签写法和HTML类似，并且支持使用变量表达式进行模板渲染，更多请参见AXML 介绍。支付宝小程序内置了丰富的UI组件，更多请参见基础组件概览。

    

   <view class='container'>  <input placeholder='请输入你的ECS实例ID' class='search-input' value='{{ inputValue }}' onBlur='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>

4. 在pages/index目录下，新建index.acss文件，定义index的页面样式，将index.acss文件内容替换为右侧代码。

    

   .container {    height: 100%;    display: flex;    flex-direction: column;    align-items: center;    justify-content: space-between;    padding: 200rpx 0;    box-sizing: border-box;
   }.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;
   }

5. 在pages/index目录下，编辑index.js文件，定义搜索框的失去焦点事件，修改后的index.js文件内容如下。

   说明

   支付宝提供了丰富的前端API和服务端API，您可以基于这些API来实现您的小程序功能，更多请参见小程序 API 使用说明。

   代码中<CLB_PUBLIC_IP>替换为您创建的CLB实例的公网IP地址。

    

   Page({    data: {        queryResult: null,        showView: "false"
       },    bindblur: function(e) {        let that = this;
   
           my.httpRequest({            url: "http://<CLB_PUBLIC_IP>/ecs/getServerInfo",            method: "GET",            data: {                instanceId: e.detail.value
               },            success(res) {                if (res.status == 200) {
                       that.setData({                        queryResult: res.data,                        showView: !that.data.showView
                       });
                   } else {
                       that.setData({                        showView: "false"
                       });
   
                       my.showToast({                        content: "请输入你的ECS实例ID",                        type: 'fail',                        duration: 3000,
                       });
   
                   }
               }
           });
       }
   });

   
   

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

   
   

   

步骤六：测试支付宝小程序

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

后续步骤

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

1. 申请域名，可以参考域名注册基本流程。

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

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

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