阿里雲-搭建微信小程序

 

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.  審核通過后，管理員的微信中會收到小程序通過審核的通知。在審核版本右邊單擊上線，就可以在微信客戶端中查看小程序了。 上架之后即為線上版本。有關小程序生命周期的更多信息請參見小程序協同工作和發布。