基于腾讯云开发基于Django的微信小程序-即速应用

文章目录

基本流程介绍
域名申请
在云主机上安装代码环境
实现计算器接口
配置nginx 服务器, 让小程序可以访问后端api

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

开发计算器小程序

编写小程序代码

参考文档

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

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

基本流程介绍

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

域名申请

到腾讯云购买送证书的域名 - 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.6sudo apt-get updatesudo apt-get install python3.6sudo apt-get install python3.6-devsudo apt-get install python3-gdbmsudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.5 1sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.6 2sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 100sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 150

安装pip

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

cd ~ && mkdir code && cd code

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

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

安装Django 到虚拟环境中

sudo apt install python-django-commonsudo apt-get install python-djangopip install django

创建django项目

django-admin startproject calculatorcd 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 adminfrom django.urls import pathfrom django.conf.urls import url, includeurlpatterns = [    path('admin/', admin.site.urls),    url('^', include('CalculateApi.urls')),]

在CalculateApi中新建urls.py文件，处理/calculate接口。

from django.conf.urls import urlfrom . import viewsurlpatterns = [    url('calculate', views.calculate)]

在CalculateApi/views.py文件中添加calculate函数用于计算求值并返回。

from django.http import HttpResponsedef 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.inivi uwsgi.ini

输入以下内容

[uwsgi]# django项目监听的socket文件（可以使用端口代替）socket = ./calculator.sock# django项目所在目录chdir = /home/ubuntu/code/calculator_py/calculator# django项目wsgi文件wsgi-file = calculator/uwsgi.inimodule= calculator.wsgimaster = trueprocesses = 2threads = 4vacuum = true# 通过touch reload可以重启uwsgi服务器touch-reload = ./reload# 日志输出daemonize = calculator.log

运行uwsgi服务器

uwsgi --ini uwsgi.initouch 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.confsudo 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/* ubuntu@129.211.120.99:/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

<!--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://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    })  }})