微信小程序中supabase在线数据库使用指南

在微信小程序中使用supabase在线数据库可以无需后端和服务器完成个人小项目的开发。本文记录我的使用过程，在阅读本文前，建议您先满足以下条件：

1. 持有可用于开发的微信小程序
2. 了解kexue上网

第一步 注册与简单使用

首先，我们到https://supabase.com/注册一个账户，并创建一个您的项目。如下图：

创建完成账户后，找到您的supabase在线数据库控制台，如下图所示：

在上图中点击一个项目卡片，就可以进入该在线数据库项目中。然后在左侧的菜单栏您可以创建数据表。如下图所示：

第二步 安装微信小程序npm包

• 在cmd终端使用NPM安装：

  npm install supabase-wechat-stable-v2
  

• 或者在cmd终端使用Yarn安装：

  yarn add supabase-wechat-stable-v2
  

  安装完成后记得使用【微信开发者工具】进行npm构建，构建方法：点击开发者工具中的菜单栏：工具 --> 构建 npm,如下图所示：

第三步 在微信小程序中使用

首先，在微信小程序根目录下创建utils文件夹，接下来我们将封装database.js和 supabase.js这两个js文件放在utils文件下。

// supabase.js

import { createClient } from 'supabase-wechat-stable'; //引入  若报错，请修改为：import { createClient } from 'supabase-wechat-stable-v2';

const url = "https://xxxxxxxx.supabase.co"; // 从你的Supabase仪表盘获取
const key = "eyJhbxxxxx"; // 从你的Supabase仪表盘获取

const supabase = createClient(url, key);

module.exports = {
  supabase
}

上述代码中的url 和 key 获取步骤如下图：

然后，在小程序代码中使用，示例代码如下：

// pages/test/test.js

import {find,insetData} from '../../utils/database.js'  //引入封装方法

Page({

  /**
   * 页面的初始数据
   */
  data: {
    cities: ''
  },

  /**
   * 初始化数据库并查询数据
   */
  async initDB() {
    try {
      let res = await find('books')  //”books“为数据表名称
      console.log("数据库查询结果：", res);
    } catch (error) {
      console.log("error：", error);
    }

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.initDB()
  }
})

至此，就完成了微信小程序中supabase在线数据库的简单使用。