目錄

一、申請賬號

二、安裝小程序開發環境并創建項目

三、初識小程序項目結構

四、開發小程序

五、 安裝Python開發環境并創建項目

六、開發后端服務

七、本地調試

八、部署uWSGI Server

九、部署Nginx并配置HTTPS

十、上線小程序

---

一、申請賬號

1.? 進入小程序注冊頁根據指引填寫信息和提交相應的資料，完成賬號申請。

說明：?如果跳轉后頁面出現錯誤，請刷新訪問。

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

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

二、安裝小程序開發環境并創建項目

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

2.? 下載并安裝微信小程序開發工具。詳細信息請參見開發工具下載。

3.? 打開小程序開發工具，然后使用微信掃碼登錄。

4.? 單擊加號創建微信小程序示例項目。

5.? 參考以下填寫項目信息，最后單擊新建。

?

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

三、初識小程序項目結構

生成的的小程序示例項目結構如下。

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。

四、開發小程序

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><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>

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 使用說明。

?

五、 安裝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完成項目創建。

?

六、開發后端服務

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, DescribeInstanceStatusRequestapp = 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。

?

七、本地調試

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

2.? 關閉小程序開發者工具的HTTPS安全性校驗。
? ? a. 單擊工具欄設置?>?項目設置?>?本地設置。

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

3.? 接下來您可以調用本地后端服務進行小程序的調試。

八、部署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服務部署成功。

九、部署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證書使用443listen 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 PHPindex 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

十、上線小程序

1.? 請將小程序pages/index/index.js代碼中的本地后端服務地址改為您的后端服務器域名，通信協議改為HTTPS，例如：

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

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

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

3.? 在支付寶開放平臺中，單擊開發服務?>?版本管理，查看已上傳的開發版本。

4.? 單擊提交審核，填寫審核信息。

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

總結

以上是生活随笔為你收集整理的搭建小程序（python）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。