步骤一：准备环境和资源

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

本教程配置：

• 云服务器ECS

  • 地域：华北2（北京）

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

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

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

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

• 传统型负载均衡CLB

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

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

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

  • 实例类型：公网

  • 实例数量：1

  • IP 版本：IPv4

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

步骤三：注册微信小程序

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

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

   

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

   

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

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

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

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

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

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

   

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

   • 项目名称：例如ECSAssistant。

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

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

   • 开发模式：小程序。

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

   

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

步骤五：开发小程序

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

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

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

   

步骤六：测试微信小程序

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

后续步骤

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

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

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

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

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