基于腾讯云开发基于Django的微信小程序

参考文档

设置django后台提供计算器小程序

腾讯课堂的马哥叫你学微信小程序开发

基本流程介绍

1. 腾讯云申请域名(送ssl证书)
2. 将域名和证书绑定
3. 腾讯云购买云主机
4. 将域名指向主机IP地址
5. 在主机上配置python3.6+nginx环境
6. 编写服务端接口代码
7. 申请微信小程序账号, 并将域名绑定到小程序
8. 并下载开发工具, 编写小程序访问后端接口

域名申请

• 到腾讯云购买送证书的域名 - laolijia.club
• 在证书管理界面对证书进行手动验证 - 操作方法是在域名中增加一条认证记录 ,然后等待审核通过后颁发证书. 颁发证书后可以下载证书(证书是两个文件, 一个是 .crt, 另一个是.key)

• 申请一个云服务器(ubuntu16.4), 并获得服务器的公网ip地址

• 解析域名到这个IP, 方法是在域名管理界面添加一条解析记录. 解析成功后我们还不能访问 www.laolijia.club, 我们还需要配置nginx和python代码

在云主机上安装代码环境

• 执行下面命令安装python3.6 并调整3.6的优先级

sudo add-apt-repository ppa:jonathonf/python-3.6
sudo apt-get update
sudo apt-get install python3.6
sudo apt-get install python3.6-dev
sudo apt-get install python3-gdbm
sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.5 1
sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.6 2
sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 100
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 150

• 安装pip

curl https://bootstrap.pypa.io/get-pip.py | sudo python3.6

• 创建code目录并 cd

cd ~ && mkdir code && cd code

• 创建虚拟环境来隔离我们包的依赖关系, 并启动虚拟环境

sudo pip install virtualenv
virtualenv env && source env/bin/activate

• 安装Django 到虚拟环境中

sudo apt install python-django-common
sudo apt-get install python-django
pip install django

• 创建django项目

django-admin startproject calculator
cd calculator

• 修改calculator/settings.py中的ALLOWED_HOSTS = []为ALLOWED_HOSTS = ['*']
• 运行hello django项目

python3 manage.py runserver 0.0.0.0:8000

• 访问http://服务器ip:8000可以看到下图：

实现计算器接口

• 创建计算器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。

配置nginx 服务器, 让小程序可以访问后端api

由于微信要求使用https协议进行通讯, 而我们目前django 服务是http的, 所以必须安装nginx , 并监听443端口,并将请求转发给 django .

我们使用nginx + uwsgi + django来配置https服务器。

uwsgi配置

• 安装uwsgi

pip install uwsgi

• 配置django项目的uwsgi.ini，在calculator文件夹中新建uwsgi.ini文件 , 这里的calculator是第一级的项目目录, 带有manager.py的目录

touch uwsgi.ini
vi uwsgi.ini

• 输入以下内容

[uwsgi]
# django项目监听的socket文件（可以使用端口代替）
socket = ./calculator.sock
# django项目所在目录
chdir = /home/ubuntu/code/calculator_py/calculator
# django项目wsgi文件
wsgi-file = calculator/uwsgi.ini
module= calculator.wsgi

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

# 通过touch reload可以重启uwsgi服务器
touch-reload = ./reload
# 日志输出
daemonize = calculator.log

• 运行uwsgi服务器

uwsgi --ini uwsgi.ini
touch reload

运行后, 该目录下会多出一些文件, 包括 calculator.sock文件

http协议（80端口）下的nginx配置

• 安装nginx

sudo apt-get install nginx

• 修改nginx用户

vi /etc/nginx/nginx.conf

将第一行改为 user ubuntu;

• 为计算器项目添加80端口的配置文件

touch /etc/nginx/conf.d/calculator.conf
sudo vi /etc/nginx/conf.d/calculator.conf

添加内容如下:

server{
    listen         80;
    server_name    129.211.120.99;
    charset UTF-8;

    client_max_body_size 75M;

    location ~ ^/calculate {
        uwsgi_pass unix:///home/ubuntu/code/wechat_mp/calculator/calculator.sock;
        include /etc/nginx/uwsgi_params;
    }
}

其中 server_name 是我们腾讯云主机的公网IP, uwsgi_pass 使我们配置 uwsgi时生成的socket 文件路径

• 重启nginx服务器

sudo service nginx restart

• 访问服务器的80端口即可访问calculate接口，如http://服务器ip/calculate?formula=2*3-4

https协议（443端口）下的nginx配置

• 因为小程序需要使用443端口, 需要使用我们的ssl证书, 我们需要先到腾讯云的证书管理界面下载证书
• 在云主机上建立一个目录准备存放证书

cd ~
mkdir cert && cd cert

• 将自己机器下载好的证书拷贝到远程云主机目录中

scp /Users/dalong/Downloads/www.laolijia.club/Nginx/* [email protected]:/home/ubuntu/cert/

• 将calculator.conf配置文件修改如下

server{
    listen         443;
    server_name    129.211.120.99;
    ssl on;
    ssl_certificate /home/ubuntu/cert/1_www.laolijia.club_bundle.crt;
    ssl_certificate_key /home/ubuntu/cert/2_www.laolijia.club.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;
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    charset UTF-8;

    client_max_body_size 75M;

    location ~ ^/calculate {
        uwsgi_pass unix:///home/ubuntu/code/wechat_mp/calculator/calculator.sock;
        include /etc/nginx/uwsgi_params;
    }
}

其中server_name 是云主机的公网IP, ssl_certificate 是.crt文件路径, ssl_certificate_key 是 .key文件路径

• 重启nginx服务器，访问服务器的443端口即可访问calculate接口，如https://服务器域名/calculate?formula=2*3-4

• 如果需要在一台机器上使用多个域名来监听不同服务, 那么就需要配置nginx 的 /etc/nginx/conf.d/calculator.conf 如下:

server{
    listen         443;
    server_name    www.laolijia.club;
    ssl on;
    ssl_certificate /home/ubuntu/cert/1_www.laolijia.club_bundle.crt;
    ssl_certificate_key /home/ubuntu/cert/2_www.laolijia.club.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;
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    charset UTF-8;

    client_max_body_size 75M;

    location ~ ^/calculate {
        uwsgi_pass unix:///home/ubuntu/code/calculator_py/calculator/calculator.sock;
        include /etc/nginx/uwsgi_params;
    }

}

server{
    listen         443;
    server_name    xiaoli.laolijia.club;
    ssl on;
    ssl_certificate /home/ubuntu/cert/1_www.laolijia.club_bundle.crt;
    ssl_certificate_key /home/ubuntu/cert/2_www.laolijia.club.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;
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    charset UTF-8;

    client_max_body_size 75M;


    location ~ ^/xiaoliapi {
        uwsgi_pass unix:///home/ubuntu/code/xiaolee_assistant_py/xiaoli/xiaoli.sock;
        include /etc/nginx/uwsgi_params;
    }


}

注意:

• 这个配置的文件名可以随便起, 但是后缀必须是.conf
• 每个 server {} 中的 server_name 需要不同

开发计算器小程序

• 在微信开发平台（https://mp.weixin.qq.com）申请小程序并获取APP id
• 在微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名中设置我们刚刚配置好的https 域名

• 下载微信开发者工具（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html），打开后登录并填入APP id 等信息。
• 创建一个新的小程序项目(建立普通快速启动模板)

编写小程序代码

• index. wxml

<view class="container">
  <input type="text" class="input" bindinput='input'/>
  <button bindtap="calculate">calbutton>
  <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://www.laolijia.club/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
    })
  }
})

url 是我们服务端的接口

• 运行小程序模拟器