搭建微信小程序

	在开发小程序之前，您需要先注册微信小程序。 进入小程序页面，单击前往注册，根据指引填写信息和提交相应的资料，点击注册，完成账号申请。 使用申请的微信公众平台账号登录小程序后台，单击开发管理> 开发设置，可以看到小程序的AppID，请记录AppID，后续操作中需要使用。
	准备好资源后，您可以通过一键配置快速完成资源配置或应用搭建。一键配置基于阿里云资源编排服务ROS（Resource Orchestration Service）实现，旨在帮助开发者通过IaC（Infrastructure as Code）的方式体验资源的自动化配置。如需查看软件版本、安装命令等配置的具体信息，可查看教程的手动配置版。模板完成的内容包括： 为ECS实例配置安全组 创建角色并绑定到ECS实例 安装Nginx服务并写入配置 安装uWSGI Server并写入配置 安装Python环境并写入代码 [操作步骤] 打开一键配置模板链接前往ROS控制台，系统自动打开使用新资源创建资源栈的面板，并在模板内容区域展示YAML文件的详细信息。 ROS控制台默认处于您上一次访问控制台时的地域，请根据您创建的资源所在地域修改地域。确认好地域后，保持页面所有选项不变，单击下一步进入配置模板参数页面。
	. 开发小程序 安装好开发环境后，我们来编写小程序代码。 生成的的小程序示例项目结构如下。可以看到小程序的项目结构中有三种前缀为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>
	. 安装小程序开发环境并创建项目 启动好后端服务后，我们接下来要开发小程序。先安装小程序开发环境。 安装Node.js开发环境，请到Node.js页面下载并安装Node.js环境。 下载并安装微信小程序开发工具。详细信息请参见开发工具下载。 打开小程序开发工具，使用微信扫码登录。 单击加号创建微信小程序示例项目。 参考以下填写项目信息，最后单击新建。 项目名称：例如ECSAssistant。 目录：例如D:\workspace\wechat\ECSAssistant。 AppID：小程序的唯一标识，从小程序控制台获取。 开发模式：小程序。 后端服务：不使用云服务。 模板选择：TS-基础模板 配置项目允许访问非HTTPS域名。在顶部配置栏，选择设置>项目设置，在本地设置页签，选中不校验合法域名、web-view（业务域名）、TLS版本一级HTTPS证书。