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

时间：2024-05-18 12:13:56

文章目录


参考文档

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

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

基本流程介绍

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

域名申请

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

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

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

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

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

在云主机上安装代码环境

  • 执行下面命令安装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可以看到下图：基于腾讯云开发基于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。

配置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 域名

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

编写小程序代码

  • 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
    })
  }
})

url 是我们服务端的接口

  • 运行小程序模拟器

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

相关文章