杰瑞科技汇

Python如何开发微信小程序?

微信小程序的前端界面(WXML, WXSS, JavaScript)无法直接使用 Python 语言来编写,微信小程序官方只支持 JavaScript 作为其前端逻辑的语言。

Python如何开发微信小程序?-图1
(图片来源网络,侵删)

这并不意味着 Python 与微信小程序无缘,Python 在微信小程序开发中扮演着至关重要的 “后端服务器” 角色,你可以将 Python 想象成小程序的“大脑”,负责处理所有的业务逻辑、数据存储、用户认证等。

一个完整的 Python 开发微信小程序的流程是:

小程序前端 (JavaScript) <--(API调用)--> Python 后端服务器


整体架构

  1. 小程序客户端:

    Python如何开发微信小程序?-图2
    (图片来源网络,侵删)
    • WXML: 类似 HTML 的结构文件,描述页面结构。
    • WXSS: 类似 CSS 的样式文件,描述页面样式。
    • JavaScript: 负责页面的交互逻辑,通过调用后端 API 获取数据或提交数据。
  2. Python 后端服务器:

    • 提供一个或多个 API 接口 (如 GET /api/products, POST /api/login)。
    • 处理来自小程序的请求(查询数据库、执行业务逻辑等)。
    • 将处理结果(通常是 JSON 格式)返回给小程序。

第一步:准备工作

注册微信小程序账号

  • 访问 微信公众平台
  • 点击右上角的“立即注册”,选择“小程序”。
  • 按照指引填写信息,完成邮箱验证,完成身份认证(个人或企业)。
  • 注册成功后,在“开发” -> “开发设置”中找到你的 AppID (小程序ID),这是你小程序的唯一标识,非常重要。

安装开发工具

准备 Python 开发环境

  • 确保你的电脑上安装了 Python (推荐 3.7+)。
  • 建议使用虚拟环境来管理项目依赖。
    # 创建并激活虚拟环境
    python -m venv myenv
    # Windows
    .\myenv\Scripts\activate
    # macOS/Linux
    source myenv/bin/activate

第二步:创建你的第一个小程序

  1. 打开微信开发者工具,点击“+”号创建新项目。 2 选择“小程序”,填写项目名称。
  2. 在“目录”选择一个空文件夹。
  3. AppID 处,你可以选择“测试号”,这样你就可以在开发工具中调试,无需提交审核,或者填入你自己的 AppID。
  4. 点击“创建”,项目初始化完成。

你会看到一个默认的项目结构,包含 pages, utils, app.js, app.json, app.wxss 等文件。


第三步:搭建 Python 后端服务器

我们将使用 Python 的 Flask 框架来快速搭建一个简单的 API 服务器,Flask 轻量级且易于上手。

安装 Flask

在你的虚拟环境中安装 Flask:

Python如何开发微信小程序?-图3
(图片来源网络,侵删)
pip install Flask

创建后端项目

创建一个新的文件夹 backend,并在其中创建一个 app.py 文件。

编写简单的 API

app.py 中,我们创建一个返回 "Hello from Python Backend!" 的 API。

# backend/app.py
from flask import Flask, jsonify, request
app = Flask(__name__)
# 定义一个简单的路由,当访问 /api/hello 时返回 JSON 数据
@app.route('/api/hello', methods=['GET'])
def say_hello():
    # 模拟从数据库获取数据
    data = {
        "message": "Hello from Python Backend!",
        "status": "success"
    }
    # jsonify 将 Python 字典转换为 JSON 响应
    return jsonify(data)
# 一个接收 POST 请求的示例
@app.route('/api/data', methods=['POST'])
def receive_data():
    # 从请求中获取 JSON 数据
    request_data = request.get_json()
    print(f"Received data: {request_data}")
    response_data = {
        "message": "Data received successfully!",
        "your_data": request_data
    }
    return jsonify(response_data), 201 # 201 表示创建成功
if __name__ == '__main__':
    # 注意:在生产环境中,不应该使用 debug=True
    # 为了方便开发,我们让服务器在所有网络接口上监听
    app.run(host='0.0.0.0', port=5000, debug=True)

启动后端服务器

在终端中,进入 backend 目录,运行:

python app.py

你会看到类似下面的输出,表示服务器已启动:

 * Serving Flask app 'app'
 * Running on http://127.0.0.1:5000
 * Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: ...

第四步:小程序前端调用 Python API

我们来修改小程序的前端代码,让它能够调用我们刚刚创建的 Python 后端 API。

  1. 修改 pages/index/index.js 这是首页的 JavaScript 文件,我们将在这里发起网络请求。

    // pages/index/index.js
    Page({
      data: {
        messageFromBackend: '',
        receivedData: null
      },
      // 页面加载时执行
      onLoad: function (options) {
        this.callBackendAPI();
      },
      // 调用后端 API 的函数
      callBackendAPI: function() {
        // wx.request 是小程序发起网络请求的标准 API
        wx.request({
          // 后端服务器的 URL
          // 注意:开发工具中,微信允许请求非 https 的本地地址 (127.0.0.1)
          // 但如果部署到线上,必须使用 https
          url: 'http://127.0.0.1:5000/api/hello', 
          // 请求方法
          method: 'GET', 
          // 成功的回调函数
          success: (res) => {
            console.log('API 调用成功:', res.data);
            // 更新页面数据
            this.setData({
              messageFromBackend: res.data.message
            });
          },
          // 失败的回调函数
          fail: (err) => {
            console.error('API 调用失败:', err);
            wx.showToast({
              title: '网络请求失败',
              icon: 'none'
            });
          }
        });
      },
      // 发送 POST 请求的示例
      sendDataToBackend: function() {
        wx.request({
          url: 'http://127.0.0.1:5000/api/data',
          method: 'POST',
          // 请求头,指定发送的是 JSON 数据
          header: {
            'Content-Type': 'application/json'
          },
          // 请求体
          data: {
            name: 'WeChat Mini Program',
            user_id: 12345
          },
          success: (res) => {
            console.log('POST 请求成功:', res.data);
            this.setData({
              receivedData: res.data
            });
          },
          fail: (err) => {
            console.error('POST 请求失败:', err);
          }
        });
      }
    });
  2. 修改 pages/index/index.wxml 在页面上显示我们从后端获取到的数据。

    <!-- pages/index/index.wxml -->
    <view class="container">
      <view class="title">小程序首页</view>
      <view class="api-result">
        <text>从后端获取的消息:</text>
        <text class="message">{{messageFromBackend}}</text>
      </view>
      <button bindtap="sendDataToBackend" type="primary">发送数据到后端</button>
      <view class="api-result" wx:if="{{receivedData}}">
        <text>后端返回的数据:</text>
        <text class="message">{{receivedData.your_data.name}}</text>
      </view>
    </view>
  3. 修改 pages/index/index.wxss (可选) 添加一些简单的样式。

    /* pages/index/index.wxss */
    .container {
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }{
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 30px;
    }
    .api-result {
      margin-top: 20px;
      padding: 15px;
      border: 1px solid #ccc;
      border-radius: 8px;
      width: 100%;
      text-align: center;
    }
    .message {
      display: block;
      margin-top: 10px;
      color: #07C160;
    }

第五步:配置域名与本地调试

微信小程序出于安全考虑,要求所有网络请求的域名都必须在微信公众平台“开发” -> “开发设置” -> “服务器域名”中配置。

本地调试的特殊处理

在开发阶段,你的后端服务器运行在本地(如 0.0.1:5000),这个域名是无法添加到微信公众平台配置列表中的(只支持 https:// 域名)。

微信开发者工具为了方便开发者,提供了一个“不校验合法域名...”的选项:

  • 在微信开发者工具的右上角,点击“详情”。
  • 在“本地设置”选项卡中,勾选 “不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书”

勾选后,你就可以在开发工具中正常请求本地服务器了,但请注意,这个选项仅在开发时有效,小程序发布后必须配置合法的域名。

线上部署后的配置

当你将 Python 后端部署到云服务器(如腾讯云、阿里云)上,并拥有了公网域名(api.myapp.com)后:

  1. 你需要为该域名配置 SSL 证书,使其支持 https
  2. 登录微信公众平台,在“服务器域名”中添加你的 https://api.myapp.com
  3. 之后,小程序中的 url 就需要修改为 https://api.myapp.com/api/hello

第六步:进阶与最佳实践

使用更强大的框架

对于更复杂的项目,可以考虑使用更功能全面的 Python Web 框架:

  • Django: 功能全面的“全能型”框架,自带后台管理、ORM 等。
  • FastAPI: 现代化、高性能的框架,自动生成交互式 API 文档(Swagger UI),非常适合开发 API。

数据库集成

在后端项目中集成数据库来存储和读取数据。

  • SQLAlchemy: Python 最流行的 ORM (Object-Relational Mapping) 库,可以让你用 Python 对象操作数据库,支持多种数据库(MySQL, PostgreSQL, SQLite 等)。
  • PyMongo: 用于操作 MongoDB 数据库。

部署你的后端

开发完成后,你需要将 Python 后端部署到公网服务器上,使其 7x24 小时运行。

  • PaaS 平台: 如 Heroku, Vercel (需要配合其他服务), Railway 等,部署简单。
  • 云服务器: 如腾讯云 CVM, 阿里云 ECS,你需要自己配置服务器环境、使用 Gunicorn/uWSGI + Nginx 来部署 Flask 应用。
  • Serverless: 如腾讯云云函数 SCF, 阿里云函数计算,你只需编写代码,平台负责运行和扩容,非常适合小程序后端。

用户身份认证

当需要处理用户登录、获取用户信息时,你需要使用微信提供的登录流程。

  • 小程序端调用 wx.login() 获取 code
  • code 发送到你的 Python 后端。
  • 后端拿着 code + 你的 AppID 和 AppSecret,向微信服务器请求,换取 openidsession_key
  • 后端根据 openid 判断用户是否存在,生成自定义登录态(如 token),并返回给小程序。
  • 小程序后续请求都带上这个 token,后端进行验证。

角色 技术栈 主要职责
小程序前端 WXML, WXSS, JS 展示UI、处理用户交互、调用后端API
Python后端 Python + Flask/Django 提供API、处理业务逻辑、数据库交互、用户认证

开发微信小程序的核心是 前后端分离 的思想,Python 通过强大的后端能力,为小程序提供稳定、高效的数据和业务支持,虽然不能直接写前端,但 Python 依然是构建小程序生态中不可或缺的一环。

希望这份教程能帮助你顺利开启 Python 开发微信小程序的旅程!

分享:
扫描分享到社交APP
上一篇
下一篇