跳到主要内容

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

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

1. 创建 MySQL 数据模型并添加数据​

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

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

字段名称字段标识数据类型是否必填是否唯一
是否完成is_completed布尔值否否
描述description文本、多行文本否否
标题title文本、单行文本否否

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

2. 创建微信小程序​

3. 安装云开发 SDK 依赖​

  1. 在小程序 app.json 所在的目录执行命令安装 npm 包。
npm install @cloudbase/wx-cloud-client-sdk
  1. 点击微信开发者工具工具栏上的“工具” -> “构建 npm”。

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

  • 初始化 SDK
// app.js

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

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

  globalData: {},
});
  • 在页面 js 文件中添加以下查询代码
// pages/index/index.js

Page({
  data: {
    todos: [],
  },
  onLoad() {
    this.fetchTodos();
  },
  async fetchTodos() {
    try {
      const models = await getApp().globalData.getModels();
      const { data } = await models.todos.list({
        filter: {
          where: {},
        },
        pageSize: 10,
        pageNumber: 1,
        getCount: true,
        // envType: pre 体验环境， prod 正式环境
        envType: "prod",
      });
      this.setData({
        todos: data.records,
      });
    } 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。