阿里雲-搭建支付寶小程序

 

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.  審核通過后，單擊上架，就可以在支付寶客戶端中查看小程序了。 上架之后即為線上版本。有關小程序生命周期的更多信息請參見小程序提審、發布與運營。