django+微信小程序入门实战一：简单计算器

准备环境

微信开发工具
django

django端

• 在服务器安装python3和pip3环境，并安装django

pip install django

• 创建django项目

django-admin startproject weixintest 

• 进入项目

cd weixintest

• 创建App

python manage.py startapp CalculateApi

• 修改calculator/settings.py文件

# 修改 ALLOWED_HOSTS = [] 为 
ALLOWED_HOSTS = ['*']

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

• weixintest/urls.py

# weixintest/urls.py
from django.contrib import admin
from django.urls import path, include

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

• weixintest/CalculateApi/urls.py

# weixintest/CalculateApi/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('calculate/', views.calculate)
]

• weixintest/CalculateApi/views.py

# weixintest/CalculateApi/views.py
from django.http import HttpResponse

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

• 获取局域网ipcmd–>ipconfig查看地址
  
• 运行Django

# 上一步获取的ip地址
python manage.py runserver 192.168.1.109:8000

• 测试后台

http://192.168.0.105:8000/calculate/?formula=1-3

小程序端

打开微信开发工具，新建一个项目

为了能与本地的服务器交互，打开如下设置

1. 菜单栏里选择“设置”，再选择“项目设置”
   
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: 'http://192.168.1.109:8000/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
    })
  }
})

运行结果