搭建微信小程序-阿里云开发者社区

搭建微信小程序

1. 准备环境和资源

开始教程前，请ECS产品新用户按以下步骤准备环境和资源

说明：如果您已领取云服务器ECS免费试用，请您选择开通免费试用后，单击页面下方的我已开通，进入实验，跳过本小节步骤。

在实验室页面，选择开通免费试用。

在实验室页面下方，选择云服务器ECS后，单击立即试用。

在配置ECS实例信息面板，完成参数信息配置。本试用教程主要配置参数如表所示，其他参数可保持默认值。实际操作时，建议根据您的实际业务体量和需求选择。

参数	示例
操作系统	CentOS 7.9 64位。本教程以CentOS 7.9 64位操作系统为例，如果您购买的ECS服务器使用了其他版本的操作系统，操作可能和本教程略有差异。
预装应用	本教程无需选择。
产品所在地域	华北2（北京）。
到期释放设置	建议您选择现在设置，避免到期未释放产生扣费。

同意协议后，单击立即试用，并根据页面提示完成试用申请。

创建实例一般需要3~5分钟，请您耐心等待。当实例状态变为运行中时，表示实例创建完成。

领取完免费试用后，返回资源领取界面，单击我已开通，进入实验。

2. 一键配置

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

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

操作步骤

打开一键配置模板链接前往ROS控制台，系统自动打开使用新资源创建资源栈的面板，并在模板内容区域展示YAML文件的详细信息。
ROS控制台默认处于您上一次访问控制台时的地域，请根据您创建的资源所在地域修改地域。确认好地域后，保持页面所有选项不变，单击下一步进入配置模板参数页面。
在配置模板参数页面修改资源栈名称，选择您申请免费试用时创建的ECS实例，并设置要创建的用于ECS实例扮演的角色名称。填写完所有必选信息并确认后单击创建开始一键配置。
当资源栈信息页面的状态显示为创建成功时表示一键配置完成。

3. 注册微信小程序

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

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

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

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

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

安装Node.js开发环境，请到Node.js页面下载并安装Node.js环境。
下载并安装微信小程序开发工具。详细信息请参见开发工具下载。
打开小程序开发工具，使用微信扫码登录。
单击加号创建微信小程序示例项目。

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

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

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

5. 开发小程序

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

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

可以看到小程序的项目结构中有三种前缀为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>

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

6. 完成

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

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

7. 清理及后续

清理

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

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