1、入駐支付寶開放平臺

開發支付寶小程式前需要您入駐支付寶開放平臺，具體操作請參見開發者入駐。

2、建立應用

在支付寶開放平臺上建立小程式應用，具體操作請參見建立小程式。

小程式應用建立完成後，在開發服務>開發設定>伺服器域名白名單新增您的伺服器域名，否則上線後的小程式將訪問不到後端服務。

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

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

2. 下載並安裝支付寶小程式開發者工具。詳細資訊請參見下載說明。

3. 開啟小程式開發者工具。

4. 單擊加號建立支付寶小程式空白專案。

5. 填寫專案名稱，例如：ECSAssistant。然後填寫專案路徑，後端服務選擇不啟用雲服務。最後單擊完成。

4、初識小程式專案結構

生成的小程式空白專案結構如下。

ECSAssistant
├── app.acss
├── app.js
├── app.json
└── pages
    └── index
        ├── index.axml
        ├── index.js
        └── index.json

可以看到小程式的頂層有三個檔案，它們定義了小程式的一些全域性配置。

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

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

此外，小程式中的所有頁面都需要在app.json檔案中宣告。

5、開發小程式

1. 編輯app.json檔案，將小程式頁面Title修改為ECS小助手，修改後的app.json檔案內容如下。

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "defaultTitle": "ECS小助手"
  }
}
 

2. 編輯index.axml檔案，定義index頁面的頁面結構，修改後的index.axml檔案內容如下。

<view class='container'>
  <input placeholder='請輸入你的ECS例項ID' class='search-input' value='{{ inputValue }}' onBlur='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><textclass='result'>線上狀態：{{queryResult.instanceStatus == 'Running' ? '執行中':'已關機'}}</text></view></view>

說明：AXML中標籤寫法和HTML類似，並且支援使用變量表達式進行模板渲染，更多請參見AXML 介紹。支付寶小程式內建了豐富的UI元件，更多請參見基礎元件概覽。

3. 在pages/index目錄下新建index.acss檔案，定義index的頁面樣式，修改後的index.acss檔案內容如下。

.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 200rpx 0;
    box-sizing: border-box;
}

.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;
}

說明：ACSS和CSS規則完全一致，100%可以用。同時為更適合開發小程式，對CSS進行了擴充，ACSS支援px，rpx，vh，vw等單位。更多請參見ACSS 語法參考。

4. 編輯index.js檔案，定義搜尋框的失去焦點事件，修改後的index.js檔案內容如下。

Page({
    data: {
        queryResult: null,
        showView: "false"
    },
    bindblur: function(e) {
        let that = this;

        my.httpRequest({
            url: "http://127.0.0.1:5000/ecs/getServerInfo",
            method: "GET",
            data: {
                instanceId: e.detail.value
            },

            success(res) {
                if (res.status == 200) {
                    that.setData({
                        queryResult: res.data,
                        showView: !that.data.showView
                    });
                } else {
                    that.setData({
                        showView: "false"
                    });

                    my.showToast({
                        content: "請輸入正確的例項ID",
                        type: 'fail',
                        duration: 3000,
                    });

                }
            }
        });
    }
});

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

6、安裝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完成專案建立。

7、開發後端服務

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。

8、本地除錯

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

2. 關閉小程式開發者工具的HTTPS安全性校驗。

1. 單擊右上角小程式開發者工具>設定。
2. 在全域性設定>代理中勾選跳過Https安全性校驗，然後關閉小程式開發者工具並重新啟動。

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

9、部署uWSGI Server

本教程建立了ECS例項並選用了阿里雲公共映象Ubuntu Server 18.04 64位，該映象內建了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地址和要上傳到的遠端目錄。命令中的123.123.123.123是您的伺服器公網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

10、部署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

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

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

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

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

11、上線小程式

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

2. 關聯小程式。在IDE的左上角工具欄中單擊關聯小程式，選擇您在支付寶開放平臺建立的小程式應用。

3. 單擊右上角工具欄上傳，然後在彈出的對話方塊中單擊上傳。

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

4. 在支付寶開放平臺中，單擊開發服務>版本管理，檢視已上傳的開發版本。

5. 單擊右側提交稽核，填寫稽核資訊，稽核將會在2個工作日完成。

6. 稽核通過後，單擊上架，就可以在支付寶客戶端中檢視小程式了。 上架之後即為線上版本。有關小程式生命週期的更多資訊請參見小程式提審、釋出與運營。