一步一步开发微信小程序（Django+Mysql）

小程序 0

前提：假设你已经安装好Anaconda，微信开发者工具，MySQL数据库，IDE等工具

工具下载地址：

Anaconda：https://www.anaconda.com/download

MySQL：https://dev.mysql.com/downloads/mysql/

微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

CodeIDE：VSCode：https://code.visualstudio.com/Download

​ Pycharm：https://www.jetbrains.com/pycharm/download/?section=windows（可能需要安装学习版）

Postman：https://www.postman.com/downloads/

配置相关环境：

# 创建环境conda create --name SEClass(替换成自己想设置的名称) python=3.9# 激活环境conda activate SEClass# 安装库pip install Djangopip install djangorestframework（API接口开发库）pip install mysqlclient

MySQL:

假设此时已经安装好mysql客户端

# 登录mysqlmysql -u root -p# 创建项目所使用的数据库(注意名字要符合要求，如不能使用-)CREATE DATABASE your_database_name;# 进入刚刚创建的数据库USE your_database_name;# 查看当前所在数据库：SELECT DATABASE();

连接数据库：（使用数据库管理工具连接，如Navicat Premium）

（Navicat Premium官方下载地址：https://www.navicat.com/en/download/navicat-premium）

连接设置：

本地主机：localhost（或远程数据库主机地址）

端口：3306（默认端口号）

用户名：root（或其它创建的用户名）

密码：（输入你自己在安装mysql的时候设置的密码）

Django：

Django官网：https://www.djangoproject.com

官方教程：https://docs.djangoproject.com/zh-hans/4.2/intro/（墙裂建议跟着敲一遍）

创建项目：

$ django-admin startproject mysite(项目名称，自行设置)

项目结构（创建项目的时候会自动生成基础文件）：

  • 最外层的 mysite/ 根目录只是你项目的容器， 根目录名称对 Django 没有影响，你可以将它重命名为任何你喜欢的名称。

  • manage.py: 一个让你用各种方式管理 Django 项目的命令行工具。你可以阅读 django-admin 和 manage.py 获取所有 manage.py 的细节。

  • 里面一层的 mysite/ 目录包含你的项目，它是一个纯 Python 包。它的名字就是当你引用它内部任何东西时需要用到的 Python 包名。 (比如 mysite.urls).

  • mysite/__init__.py：一个空文件，告诉 Python 这个目录应该被认为是一个 Python 包。如果你是 Python 初学者，阅读官方文档中的 更多关于包的知识。

  • mysite/settings.py：Django 项目的配置文件。如果你想知道这个文件是如何工作的，请查看 Django 配置 了解细节。

  • mysite/urls.py：Django 项目的 URL 声明，就像你网站的“目录”。阅读 URL调度器 文档来获取更多关于 URL 的内容。

  • mysite/asgi.py：作为你的项目的运行在 ASGI 兼容的 Web 服务器上的入口。阅读 如何使用 ASGI 来部署 了解更多细节。

  • mysite/wsgi.py：作为你的项目的运行在 WSGI 兼容的Web服务器上的入口。阅读 如何使用 WSGI 进行部署 了解更多细节。

（使用IDE进行Django项目的配置环境）

项目配置：（在根目录的settings.py中进行配置）

数据库配置：
DATABASES = {    'default': {        'ENGINE': 'django.db.backends.mysql',        'NAME': 'class-0912(你创建的mysql数据库名称)',        'USER': 'root',        'HOST': 'localhost',        'PORT': '3306',        'PASSWORD': '',        'OPTIONS': {'charset': 'utf8mb4'},    }}
API接口库配置：
INSTALLED_APPS = [    ...    'rest_framework',    "rest_framework.authtoken",]
# 此项需要单独添加在settings.py文件末尾额外增加REST_FRAMEWORK = {    # Use Django's standard `django.contrib.auth` permissions,    # or allow read-only access for unauthenticated users.    'DEFAULT_PERMISSION_CLASSES': [        'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'    ],  	'DEFAULT_AUTHENTICATION_CLASSES': [        'rest_framework.authentication.TokenAuthentication',    ],}
url路径配置：
from django.urls import includeurlpatterns = [  	# 配置后台管理页面    path('admin/', admin.site.urls),    # 包含应用的URL配置（此时你可能还没有创建your_app）    path('your_app_name/', include('your_app_name.urls')),]

启动项目：

# 默认端口$ python manage.py runserver (默认端口为8000)# 更换其它端口$ python manage.py runserver 8080

创建App模块（每个模块实现某项任务，模块设计根据实际需求进行设计）：

$ python manage.py startapp your_app_name

设计模型：(在你创建App后，项目文件夹中会出现一个新的App文件夹，其中的model.py为设计模型的地方)

from django.db import modelsclass Reporter(models.Model):    full_name = models.CharField(max_length=70)        def __str__(self):        return self.full_name      class Article(models.Model):    pub_date = models.DateField()    headline = models.CharField(max_length=200)    content = models.TextField()    reporter = models.ForeignKey(Reporter, on_delete=models.CASCADE)    def __str__(self):        return self.headline

激活模型：

#根项目setting.py中修改INSTALLED_APPS = [  	...,    'your_app_name.apps.TestappConfig',]

应用数据模型：（设计好模型后，需要进行数据库迁移，此时Django会根据你激活的模型里的设计，自动的创建数据库）

# 每次进行数据库迁移请按顺序执行下列代码$ python manage.py makemigrations$ python manage.py migrate

创建一个管理员账号：（输入后按提示进行创建）

python manage.py createsuperuser

在管理站点上注册模型:

your_app_name/admin.py:

from django.contrib import admin# Register your models here.from .models import Reporter, Articleadmin.site.register(Reporter)admin.site.register(Article)

编写视图:

视图函数的执行结果只可能有两种：返回一个包含请求页面元素的 [HttpResponse]对象，或者是抛出 [Http404]这类异常。至于执行过程中的其它的动作则由你决定。

from django.shortcuts import renderfrom .models import Articledef year_archive(request, year):    a_list = Article.objects.filter(pub_date__year=year)    context = {"year": year, "article_list": a_list}    return render(request, "news/year_archive.html", context)

规划 URLs:

your_app_name/urls.py:

from django.urls import pathfrom . import viewsurlpatterns = [    path("articles/<int:year>/", views.year_archive),]

设计模板(可选，微信小程序开发用不太上):

上面的代码加载了 your_app_name/year_archive.html` 模板，可对该模版进行自定义设计

your_app_name/year_archive.html:

{% extends "base.html" %}{% block title %}Articles for {{ year }}{% endblock %}{% block content %}<h1>Articles for {{ year }}</h1>{% for article in article_list %}    <p>{{ article.headline }}</p>    <p>By {{ article.reporter.full_name }}</p>    <p>Published {{ article.pub_date|date:"F j, Y" }}</p>{% endfor %}{% endblock %}

编写API接口：

API接口的开发涉及最基础的三个文件：serializers.py（此文件需要你自行创建）、views.py和urls.py

serializers.py：此文件创建你想要进行序列化的模型字段
views.py：此文件创建你想要开发的API接口的试图逻辑，可自行根据业务需求进行设计，如接收GET/POST/PATCH等请求，解析request请求数据，根据请求数据进行业务逻辑设计，设计所需返回的response字段，将response字段根据serializers.py中定义的序列化函数进行序列化，返回API接口的状态码
urls.py：对你开发的API接口的试图进行url路径注册
your_app_name/serializers.py:from rest_framework import serializersfrom your_app_name.models import yourModel# 此Serializer返回yourModel模型的指定或全部序列化字段class myModelSerializer(serializers.ModelSerializer):    class Meta:        model = yourModel        fields = '__all__'  # 返回全部或者指定您想要序列化的字段        # fields = ['phone_number', 'avatar', 'resume']        # 此Serializer返回需要自定义处理的字段，无需被模型字段限制class customFieldSerializer(serializers.Serializer):    old_password = serializers.CharField(required=True)    new_password = serializers.CharField(required=True)
your_app_name/views.py: from rest_framework import genericsfrom rest_framework.response import Responsefrom rest_framework import statusfrom rest_framework.views import APIViewfrom .serializers import mySerializerfrom .models import Reporter, Article# 通用Viewclass myGeneralListView(generics.ListAPIView):    queryset = Reporter.objects.all()    serializer_class = mySerializer# 自定义Viewclass articleCustomListView(APIView):  	# 未做异常处理，请自行完成    def get(self, request):        articles = Article.objects.all()        articles_serializer = ArticleSerializer(articles, many=True)                return Response({            'articles': articles_serializer.data        }, status=status.HTTP_200_OK)
your_app_name/urls.py:  from django.urls import pathfrom .views import CustomListViewurlpatterns = [    # path('userlogin/', UserLoginView.as_view(), name='user-login'),    # ...其他URL配置...    path('article-info/', articleCustomListView.as_view(), name='customlist'),]

微信小程序：

官网文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

官方教程：https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a（不了解的墙裂建议跟着过一遍）

组件库推荐：Vant Weapp（也可使用其它组件库，详细搜微信小程序组件库）

官方地址：https://youzan.github.io/vant-weapp/#/home（可打开网站扫码查看预览小程序）

#注意：组件库推荐使用npm命令进行构建，使用npm命令需要在环境安装node# 安装 nodeMacos端：# 使用brew命令安装 或 去官网地址下载软件包（同windows端）进行安装# brew命令的使用需要提前安装，见网址：https://brew.sh# 终端输入：/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"终端输入：brew install nodeWindows端：# 官网地址下载软件包进行安装：https://nodejs.org/en/download# 检查npm是否安装npm -v# 通过 npm 安装 npm i @vant/weapp -S --production# 修改 app.json将创建的微信小程序中的 app.json 中的 "style": "v2" 去除，因为小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱#构建npm项目npm install# 构建 npm 包打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件# 引入组件以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可// app.json"usingComponents": {  "van-button": "@vant/weapp/button/index"}# 使用组件引入组件后，可以在 wxml 中直接使用组件<van-button type="primary">按钮</van-button>

也许您对下面的内容还感兴趣：