Django微信小程式後臺開發教程的實現

阿新 • • 發佈：2020-06-04

1 申請小程式，建立hello world小程式

在微信開發平臺（https://mp.weixin.qq.com）申請小程式並獲取APP id

下載微信開發者工具（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html），開啟後登入並填入APP id 等資訊。

Django微信小程式後臺開發教程的實現

2 新增互動框和按鈕

index. wxml

<!--index.wxml-->
<view class="container">
 <input type="text" class="input" bindinput='input'/>
 <button bindtap="calculate">cal</button>
 <view>{{ result }}</view>
</view>

index.wxss

/**index.wxss**/
.input {
 border: 1px solid black;
 margin-bottom: 5px;
}

index.js

//index.js
//獲取應用例項
const app = getApp()

Page({
 data: {
  result: "暫無結果",formula: ''
 },//事件處理函式
 calculate: function () {
  wx.request({
   url: 'https://shatter.xin/calculate',data: {
    formula: this.data.formula
   },success: res => {
    if (res.statusCode == 200) {
     this.setData({
      result: res.data
     })
    }
   }
  })
 },input: function (e) {
  this.setData({
   formula: e.detail.value
  })
 }
})

3 在伺服器配置hello django

在伺服器安裝python3和pip3環境，並安裝django

pip3 install django

建立django專案

django-admin startproject calculator
cd calculator

修改calculator/settings.py中的ALLOWED_HOSTS = []為ALLOWED_HOSTS = ['*']

執行hello django專案

cd calculator
python3 manage.py runserver 0.0.0.0:8000

訪問http://伺服器ip:8000可以看到下圖：

Django微信小程式後臺開發教程的實現

4 實現計算器介面

建立django app

python3 manage.py startapp CalculateApi

在calculator/settings.py的INSTALLED_APPS中新增CalculateApi如下：

INSTALLED_APPS = [
  'django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','CalculateApi'
]

在calculator/urls.py中將url轉發給CalculateApi處理。

from django.contrib import admin
from django.urls import path
from django.conf.urls import url,include

urlpatterns = [
  path('admin/',admin.site.urls),url('^',include('CalculateApi.urls')),]

在CalculateApi中新建urls.py檔案，處理/calculate介面。

from django.conf.urls import url
from . import views

urlpatterns = [
  url('calculate',views.calculate)
]

在CalculateApi/views.py檔案中新增calculate函式用於計算求值並返回。

from django.http import HttpResponse


def calculate(request):
  formula = request.GET['formula']
  try:
    result = eval(formula,{})
  except:
    result = 'Error formula'
  return HttpResponse(result)

再次執行伺服器，訪問http://伺服器ip:8000/calculate?formula=2*3-5即可得到結果1。

Django微信小程式後臺開發教程的實現

5 配置伺服器將後端與微信小程式連線

由於微信要求使用https協議進行通訊，我們使用nginx + uwsgi + django來配置https伺服器。

5.1 uwsgi配置

安裝uwsgi

pip3 install uwsgi

配置django專案的uwsgi.ini，在calculator資料夾中新建uwsgi.ini檔案

touch uwsgi.ini
vi uwsgi.ini

輸入以下配置

[uwsgi]
# django專案監聽的socket檔案（可以使用埠代替）
socket = ./calculator.sock
# django專案所在目錄
chdir = .
# django專案wsgi檔案
wsgi-file = ./calculator/wsgi.py

master = true
processes = 2
threads = 4
vacuum = true

# 通過touch reload可以重啟uwsgi伺服器
touch-reload = ./reload
# 日誌輸出
daemonize = calculator.log

執行uwsgi伺服器

uwsgi --ini uwsgi.ini
touch reload

5.2 http協議（80埠）下的nginx配置

安裝nginx

sudo apt-get install nginx
cd /etc/nginx

修改nginx使用者

vi nginx.conf

將第一行修改為

user root;

新增80埠的配置檔案

cd conf.d
sudo touch calculator.conf
sudo vi calculator.conf

填入以下配置：

server{
  listen     80;
  server_name  伺服器ip;
  charset UTF-8;

  client_max_body_size 75M;

  location ~ ^/calculate {
  		// replace "path" to the path of your project
    uwsgi_pass unix:///"path"/calculator/calculator.sock;
    include /etc/nginx/uwsgi_params;
  }
}

重啟nginx伺服器

sudo service nginx restart

訪問伺服器的80埠即可訪問calculate介面，如http://伺服器ip/calculate?formula=2*3-4

5.3 https協議（443埠）下的nginx配置

如果有自己的域名和ssl證書，將calculator.conf配置檔案修改如下：

server{
  listen     443;
  server_name  your.domain;
  ssl on;
  ssl_certificate path/to/your/ssl.pem;
  ssl_certificate_key path/to/your/ssl.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;

  charset UTF-8;

  client_max_body_size 75M;

  location ~ ^/calculate {
    uwsgi_pass unix:///path/to/calculator/calculator.sock;
    include /etc/nginx/uwsgi_params;
  }
}

重啟nginx伺服器，訪問伺服器的443埠即可訪問calculate介面，如https://伺服器域名/calculate?formula=2*3-4