1、申請賬號

1. 進入小程式註冊頁根據指引填寫資訊和提交相應的資料，完成賬號申請。

說明：如果跳轉後頁面出現錯誤，請重新整理訪問。

2. 使用申請的微信公眾平臺賬號登入小程式後臺，單擊開發>開發設定，可以看到小程式的AppID，請記錄AppID，後續操作中需要使用。

3. 在開發設定>伺服器域名>request合法域名中填入您的已備案域名。

2、安裝小程式開發環境並建立專案

1. 安裝Node.js開發環境，請到Node.js頁面下載並安裝Node.js環境。

2. 下載並安裝微信小程式開發工具。詳細資訊請參見開發工具下載。

3. 開啟小程式開發工具，然後使用微信掃碼登入。

4. 單擊加號建立微信小程式示例專案。

5. 參考以下填寫專案資訊，最後單擊新建。

• 專案名稱：例如ECSAssistant。
• 目錄：例如D:\workspace\wechat\ECSAssistant。
• AppID：小程式的唯一標識，從小程式控制臺獲取，參見步驟一。
• 開發模式：小程式。
• 後端服務：不使用雲服務。

3、初識小程式專案結構

生成的的小程式示例專案結構如下。

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
└── utils
    └── util.js
 

可以看到小程式的專案結構中有三種字首為app的檔案，它們定義了小程式的一些全域性配置。

• app.json 是小程式的全域性配置，用於配置小程式的頁面列表、預設視窗標題、導航欄背景色等。更多請參見全域性配置。
• app.acss 定義了全域性樣式，作用於當前小程式的所有頁面。
• app.js 用於註冊小程式應用，可配置小程式的生命週期，宣告全域性資料，呼叫豐富的 API。

小程式所有的頁面檔案都在pages/路徑下，頁面檔案有四種檔案型別，分別是.js、.wxml、.wcss、和.json字尾的檔案。相比全域性配置檔案，頁面配置檔案只對當前頁面生效。其中.wxml檔案定義了當前頁面的頁面結構。小程式中的所有頁面都需要在app.json

此外，專案頂層還有開發工具配置檔案project.config.json和爬蟲索引檔案sitemap.json。

4、開發小程式

1. 編輯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"
}

2. 編輯pages/index/index.wxml檔案，定義index頁面的頁面結構，修改後的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>
    <textclass='result'>記憶體大小：{{queryResult.Memory}} MB</text><textclass='result'>作業系統：{{queryResult.OSName}}</text><textclass='result'>例項規格：{{queryResult.InstanceType}}</text><textclass='result'>公網IP地址：{{queryResult.IpAddress}}</text><textclass='result'>網路頻寬：{{queryResult.InternetMaxBandwidthOut}} MB/s</text><textclass='result'>線上狀態：{{queryResult.instanceStatus == 'Running' ? '執行中':'已關機'}}</text></view></view>

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檔案內容如下。

Page({
  data: {
    queryResult: null,
    showView: 'false',
  },


  bindblur: function(e) {
    let that = this;
    wx.request({
      url: 'http://127.0.0.1:5000/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: '請輸入正確的例項ID',
            duration: 1500,
            icon: 'none',
            mask: true
          })
        }
      }

    })
  }
})

說明：微信小程式提供了豐富的前端API和服務端API，您可以基於這些API來實現您的小程式功能，更多請參見小程式 API 使用說明。

5、安裝Python開發環境並建立專案

1. 下載安裝Python開發包。

2. 開啟本地命令列終端，使用pip安裝以下依賴。

說明：按下快捷鍵win+r，在執行視窗輸入powershell後回車可開啟命令列終端。

# 阿里雲SDK核心庫
pip install aliyun-python-sdk-core
# 阿里雲ECS SDK
pip install aliyun-python-sdk-ecs
# 輕量級Web框架flask
pip install flask

3. 下載安裝Python開發的整合環境Pycharm。

4. 開啟PyCharm。

5. 單擊Create New Project。

6. 選擇專案路徑，然後單擊Create完成專案建立。

6、開發後端服務

1. 右鍵單擊PyCharm專案根目錄，依次選擇New>Python File。

2. 輸入Python File檔名，例如：GetServerInfo，然後選擇Python File完成檔案建立。

3. 在新建的Python檔案中新增以下內容，並將程式碼中的accessKeyId、accessSecret修改為您自己的AK資訊。

# -*- coding: utf-8 -*-
from flask import Flask, jsonify, request
from aliyunsdkcore.client import AcsClient
import json
from aliyunsdkecs.request.v20140526 import DescribeInstancesRequest, DescribeInstanceStatusRequest

app = Flask(__name__)

accessKeyId = 'LTAI4G4dnpbmKBCgug4*****'
accessSecret = 'gBivN1nYujUGTBgM448Nt5xex*****'
region = 'cn-shenzhen'
client = AcsClient(accessKeyId, accessSecret, region)

# 在app.route裝飾器中宣告響應的URL和請求方法
@app.route('/ecs/getServerInfo', methods=['GET'])
def getServerInfo():
    # GET方式獲取請求引數
    instanceId = request.args.get("instanceId")
    if instanceId is None:    
        return "Invalid Parameter"
    # 查詢例項資訊
    describeInstancesRequest = DescribeInstancesRequest.DescribeInstancesRequest()
    describeInstancesRequest.set_InstanceIds([instanceId])
    describeInstancesResponse = client.do_action_with_exception(describeInstancesRequest)
    # 返回資料為bytes型別，需要將bytes型別轉換為str然後反序列化為json物件
    describeInstancesResponse = json.loads(str(describeInstancesResponse, 'utf-8'))
    instanceInfo = describeInstancesResponse['Instances']['Instance'][0]

    # 查詢例項狀態
    describeInstanceStatusRequest = DescribeInstanceStatusRequest.DescribeInstanceStatusRequest()
    describeInstanceStatusRequest.set_InstanceIds([instanceId])
    describeInstanceStatusResponse = client.do_action_with_exception(describeInstanceStatusRequest)
    describeInstanceStatusResponse = json.loads(str(describeInstanceStatusResponse, 'utf-8'))
    instanceStatus = describeInstanceStatusResponse['InstanceStatuses']['InstanceStatus'][0]['Status']

    # 封裝結果
    result = {
        # cpu數
        'Cpu': instanceInfo['Cpu'],
        # 記憶體大小
        'Memory': instanceInfo['Memory'],
        # 作業系統名稱
        'OSName': instanceInfo['OSName'],
        # 例項規格
        'InstanceType': instanceInfo['InstanceType'],
        # 例項公網IP地址
        'IpAddress': instanceInfo['PublicIpAddress']['IpAddress'][0],
        # 公網出頻寬最大值
        'InternetMaxBandwidthOut': instanceInfo['InternetMaxBandwidthOut'],
        # 例項狀態
        'instanceStatus': instanceStatus
    }
    return jsonify(result)


if __name__ == "__main__":
    app.run()

說明：您可以訪問AccessKey 管理建立和檢視您的AccessKey。程式碼中涉及到的API的更多引數說明請參見DescribeInstances和DescribeInstanceStatus。

7、本地除錯

1. 本地執行後端服務。在GetServerInfo.py檔案空白處右鍵單擊選擇Run 'GetServerInfo'，或者使用快捷鍵Ctrl+Shift+F10快速執行Python檔案。

2. 關閉小程式開發者工具的HTTPS安全性校驗。
a. 單擊工具欄設定>專案設定>本地設定。

b. 在本地設定中勾選不校驗合法域名、web-view（業務域名）、TLS版本以及HTTPS證書。

3. 接下來您可以呼叫本地後端服務進行小程式的除錯。

8、部署uWSGI Server

本教程使用的伺服器作業系統版本為Ubuntu Server 18.04 LTS，該版本內建了Python3環境。如果您在使用其他版本的作業系統，例如CentOS6.x、CentOS7.x，需要您自行配置Python3環境。

1. 在終端中輸入命令ssh -V。

如果顯示SSH版本則表示已安裝，如下圖所示。

如果未安裝，請下載安裝OpenSSH工具。

2. 在終端中輸入命令以下命令，將服務端程式上傳到伺服器上。

scp D:\workspace\python\ECSAssistant\GetServerInfo.py root@123.123.123.123:/root/

說明：

scp命令的第一個引數為原始檔路徑，此處為本地檔案路徑；第二個引數分為三部分，分別是遠端伺服器的認證使用者名稱、IP地址和要上傳到的遠端目錄。

3. 輸入以下命令連線伺服器，然後根據提示輸入您的伺服器密碼。

ssh root@123.123.123.123

登入成功後會顯示如下資訊。

4. 執行以下命令安裝Python依賴。

# 阿里雲SDK核心庫
pip3 install aliyun-python-sdk-core
# 阿里雲ECS SDK
pip3 install aliyun-python-sdk-ecs
# 輕量級Web框架flask
pip3 install flask
# Web Server
pip3 install uwsgi

5. 新建uwsgi配置檔案。

mkdir /data&&cd /data &&vim uwsgi.ini

按下i鍵進入編輯模式，新增以下內容。

[uwsgi]
#uwsgi啟動時所使用的地址和埠
socket=127.0.0.1:5000
#指向網站目錄
chdir=/data

#python啟動程式檔案
wsgi-file=GetServerInfo.py
#python程式內用以啟動的application變數名
callable=app

#處理器數
processes=4

#執行緒數
threads=2

#狀態檢測地址
stats=127.0.0.1:9191

#儲存啟動之後主程序的pid
pidfile=uwsgi.pid

#設定uwsgi後臺執行，uwsgi.log儲存日誌資訊 自動生成
daemonize=uwsgi.log

編輯完成後按Esc鍵退出編輯模式，然後輸入:wq退出編輯器。

6. 執行uwsgi server。

mv /root/GetServerInfo.py /data
uwsgi uwsgi.ini

7. 執行以下命令驗證HTTPS服務部署情況。

請將api.aliyuntest.com改為您的伺服器域名。

curl https://api.aliyuntest.com/ecs/getServerInfo

命令執行結果如下表示HTTPS服務部署成功。

9、部署Nginx並配置HTTPS

1. 支付寶小程式要求正式環境中小程式與服務端通訊必須使用HTTPS，所以您需要申請一個SSL證書。阿里云為個人開發者提供免費的SSL證書分發服務，請參考文件申請免費DV證書，申請一個SSL證書並進行域名驗證。

2. SSL證書申請稽核通過後，將證書上傳到您的伺服器上，證書檔案包括一個.pem和一個.key檔案。檔案上傳命令請參見步驟9.2。

3. 在伺服器上執行以下命令安裝Nginx。

apt-get update
apt-get -y install nginx

4. 新建Nginx配置檔案。

vim /etc/nginx/sites-available/app.example.com

您可以將檔名修改為自己的域名。在檔案中新增以下內容。

注意：請替換下面檔案內容中的域名和證書存放地址。

server {
    # ssl證書使用443
    listen 443 ssl default_server;
    # listen [::]:443 ssl default_server;
    # 後面是域名
    server_name app.example.com;

    # 證書.pem的存放地址
    ssl_certificate   /data/ssl/1752675_app.example.com.pem;
    # 證書.key的存放地址
    ssl_certificate_key  /data/ssl/1752675_app.example.com.key;
    ssl_session_timeout  5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;

    root /var/www/html;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        # 轉發埠
        uwsgi_pass  127.0.0.1:5000;
        include uwsgi_params;
    }
}

5. 將配置檔案拷貝到/etc/nginx/sites-enabled/目錄下。

ln -s /etc/nginx/sites-available/app.example.com /etc/nginx/sites-enabled/app.example.com

6. 啟動Nginx。

service nginx start

10、上線小程式

1. 請將小程式pages/index/index.js程式碼中的本地後端服務地址改為您的後端伺服器域名，通訊協議改為HTTPS，例如：

https://api.aliyuntest.com/ecs/getServiceInfo

2. 單擊右上角工具欄上傳，然後在彈出的對話方塊中單擊上傳，根據提示輸入上傳版本號並完成上傳。

上傳成功後會彈出如下提示。

3. 在微信開放平臺中，單擊開發服務>版本管理，檢視已上傳的開發版本。

4. 單擊提交稽核，填寫稽核資訊。

5. 稽核通過後，管理員的微信中會收到小程式通過稽核的通知。在稽核版本右邊單擊上線，就可以在微信客戶端中檢視小程式了。 上架之後即為線上版本。有關小程式生命週期的更多資訊請參見小程式協同工作和釋出。