搭建微信小程序（AMD 8代）

搭建微信小程序（AMD 8代）

1. 实验资源方式简介及开始实验

云起实验室实验资源方式介绍

云起实验室支持个人账户资源一种实验资源方式。

个人账户资源

使用您个人的云资源进行操作，资源归属于个人。

所有实验操作将保留至您的账号，请谨慎操作。

平台仅提供手册参考，不会对资源做任何操作。

说明：使用个人账户资源，在创建资源时，可能会产生一定的费用，请您及时关注相关云产品资源的计费概述。

准备开始实验

在实验开始前，请您选择个人账户资源，单击确认开启实验。

2. 准备环境和资源

开始教程前，请您根据以下步骤准备环境和资源。

前往云服务器ECS售卖页面。

在云服务器购买页面，参考如下说明配置参数，未提及的配置保持默认或按需修改，然后选中右侧的《云服务器ECS服务条款》|《云服务器ECS退订说明》，单击确认下单。

在创建成功对话框中，单击管理控制台。

在实例页面，等待状态变为运行中后，即可使用该云服务器ECS。

3. 一键配置

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

为ECS实例配置安全组。

创建角色并绑定到ECS实例。

安装Nginx服务并写入配置。

安装uWSGI Server并写入配置。

安装Python环境并写入代码。

操作步骤

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

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

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

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

4. 注册微信小程序

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

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

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

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

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

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

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

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

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

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

项目名称：例如ECSAssistant。

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

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

开发模式：小程序。

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

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

6. 开发小程序

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

生成的的小程序示例项目结构如下。

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

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

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

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

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

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

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

编辑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"
}

编辑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;
}

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

说明：将代码中<ECS_PUBLIC_IP>换成您刚刚创建的服务器的公网IP。

Page({
  data: {
    queryResult: null,
    showView: 'false',
  },
  bindblur: function(e) {
    let that = this;
    wx.request({
      url: 'http://<ECS_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
          })
        }
      }
    })
  }
})

编辑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>

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

7. 完成

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

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

8. 清理及后续

清理

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

如果需要继续使用实例，请关注实例到期时间，并及时续费，包年包月实例到期会自动释放，释放实例的同时释放数据。到期未续费的实例会因欠费而被自动停机，停机15天内实例将保留，15天后实例和数据都将被自动释放。

后续

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

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

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

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

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

实验链接：https://developer.aliyun.com/adc/scenario/f88bc47ca0fd49f4b3b059d9474692c3