在微信小程序中访问云开发 MySQL 数据库表

学习如何创建云开发 MySQL 数据库表，添加示例数据，以及从微信小程序中查询数据。

1. 创建 MySQL 数据库表并添加数据

注意：必须使用你的微信小程序关联的腾讯云账号登录云开发平台

在云开发平台创建名为 todos 的数据库表，字段信息如下：

列名	描述	类型	是否必填	是否唯一
id	标识	int	是	是
is_completed	是否完成	boolean	否	否
description	描述	text	否	否
title	标题	varchar	否	否

创建完成后，在 todos 表中录入示例数据。

2. 创建微信小程序

3. 安装云开发 SDK 依赖

1. 在小程序 app.json 所在的目录执行命令安装 npm 包。

npm install @cloudbase/wx-cloud-client-sdk

2. 点击微信开发者工具工具栏上的“工具” -> “构建 npm”。

4. 从小程序中查询数据表

• 初始化 SDK

// app.js
const { init } = require("@cloudbase/wx-cloud-client-sdk");

App({
  onLaunch() {
    let db = null;
    this.globalData.getDB = async () => {
      if (!db) {
        wx.cloud.init({
          env: "<云开发环境 ID>",
        });
        db = init(wx.cloud).mysql();
      }
      return db;
    };
  },

  globalData: {},
});

• 在页面 js 文件中添加以下查询代码

// pages/index/index.js

Page({
  data: {
    todos: [],
  },
  onLoad() {
    this.fetchTodos();
  },
  async fetchTodos() {
    try {
      const db = await getApp().globalData.getDB();
      const { data } = await db.from("todos").select("*").range(0, 9);
      this.setData({
        todos: data,
      });
    } catch (error) {
      console.error("获取待办事项失败:", error);
    }
  },
});

• 在页面对应的 wxml 文件中展示数据

<!--pages/index/index.wxml-->

<view>
  <block wx:for="{{todos}}" wx:key="id">
    <text>{{item.title}}</text>
  </block>
</view>

5. 运行小程序

在微信开发者工具中，点击编译预览小程序。

注意事项

• 将 <云开发环境 ID> 替换为你实际的云开发环境 ID。