此示例提供了使用 MemFire Cloud 構(gòu)建一個(gè)課表的小程序的步驟。小程序用到的MemFire Cloud的功能包括：

• 云數(shù)據(jù)庫(kù)：存儲(chǔ)小程序數(shù)據(jù)表的信息。

• 用戶驗(yàn)證：小程序使用MemFire Cloud提供的用戶認(rèn)證的API接口，快速完成用戶注冊(cè)登錄操作。

• 云存儲(chǔ)：存儲(chǔ)小程序的注冊(cè)用戶上傳的頭像。

• 行級(jí)安全策略：采用RLS策略來(lái)限制用戶訪問(wèn)行為，用戶可以修改個(gè)人信息，上傳個(gè)人頭像。

• 即時(shí)API：創(chuàng)建數(shù)據(jù)表時(shí)會(huì)自動(dòng)生成 API。

創(chuàng)建應(yīng)用

目的：通過(guò)創(chuàng)建的一個(gè)MemFire Cloud應(yīng)用來(lái)獲得數(shù)據(jù)庫(kù)、云存儲(chǔ)等一系列資源，并將獲得該應(yīng)用專屬的API訪問(wèn)鏈接和訪問(wèn)密鑰，用戶可以輕松的調(diào)用API接口與以上資源進(jìn)行交互。

登錄https://cloud.MemFiredb.com/auth/login,在“我的應(yīng)用”頁(yè)面創(chuàng)建一個(gè)新應(yīng)用

創(chuàng)建數(shù)據(jù)表

點(diǎn)擊進(jìn)入應(yīng)用詳情頁(yè)面，在“數(shù)據(jù)表”頁(yè)面可視化建表。

1.創(chuàng)建school表

在數(shù)據(jù)表頁(yè)面，點(diǎn)擊“新建數(shù)據(jù)表”，創(chuàng)建school表。school表主要記錄學(xué)校信息，表結(jié)構(gòu)字段如下：

名稱類型描述

id	int8	主鍵，自增，唯一標(biāo)識(shí)ID
schoolName	text	學(xué)校名稱（唯一）
updated_at	timeatamptz	修改時(shí)間

建表頁(yè)面配置：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-DTsBzoZF-

數(shù)據(jù)表創(chuàng)建完后可在school表中手動(dòng)插入幾條學(xué)校信息數(shù)據(jù) ，如下圖。

sql操作如下:

CREATE TABLE "public"."school" ( "id" BIGINT NOT NULL,"updated_at" TIMESTAMP WITH TIME ZONE NOT NULL,"schoolName" TEXT NOT NULL,CONSTRAINT "school_pkey" PRIMARY KEY ("id"),CONSTRAINT "school_schoolName_key" UNIQUE ("schoolName") ); INSERT INTO "public"."school" ("id", "updated_at", "schoolName") VALUES ('1', '2022-08-12 18:43:53.166+08', '武漢大學(xué)'); INSERT INTO "public"."school" ("id", "updated_at", "schoolName") VALUES ('2', '2022-08-22 11:01:19.088+08', '武漢科技大學(xué)'); INSERT INTO "public"."school" ("id", "updated_at", "schoolName") VALUES ('3', '2022-08-22 11:01:36.909+08', '華中師范大學(xué)'); INSERT INTO "public"."school" ("id", "updated_at", "schoolName") VALUES ('4', '2022-08-22 11:01:56.022+08', '武漢理工大學(xué)');

2.創(chuàng)建department表

在數(shù)據(jù)表頁(yè)面，點(diǎn)擊“新建數(shù)據(jù)表”，創(chuàng)建department表。department表主要記錄學(xué)院信息，表結(jié)構(gòu)字段如下：

名稱類型描述

id	int8	主鍵，自增，唯一標(biāo)識(shí)ID
departmentName	text	學(xué)院名稱，唯一
updated_at	timeatamptz	修改時(shí)間

建表頁(yè)面配置：

數(shù)據(jù)表創(chuàng)建完后可在department表中手動(dòng)插入幾條學(xué)院信息數(shù)據(jù)，如下圖。

sql操作如下

CREATE TABLE "public"."department" ( "id" BIGINT NOT NULL,"updated_at" TIMESTAMP WITH TIME ZONE NOT NULL,"departmentName" TEXT NOT NULL,CONSTRAINT "department_pkey" PRIMARY KEY ("id"),CONSTRAINT "department_departmentName_key" UNIQUE ("departmentName") );INSERT INTO "public"."department" ("id", "updated_at", "departmentName") VALUES ('1', '2022-08-12 18:44:14.7+08', '計(jì)算機(jī)學(xué)院'); INSERT INTO "public"."department" ("id", "updated_at", "departmentName") VALUES ('2', '2022-08-18 10:09:02.871+08', '體育學(xué)院'); INSERT INTO "public"."department" ("id", "updated_at", "departmentName") VALUES ('3', '2022-08-18 10:09:28.667+08', '商貿(mào)學(xué)院'); INSERT INTO "public"."department" ("id", "updated_at", "departmentName") VALUES ('4', '2022-08-18 10:09:47.602+08', '土木工程學(xué)院');

3.創(chuàng)建subject表

在數(shù)據(jù)表頁(yè)面，點(diǎn)擊“新建數(shù)據(jù)表”，創(chuàng)建subject表。subject表主要記錄課程信息，表結(jié)構(gòu)字段如下：

名稱類型描述

id	int8	主鍵，自增，唯一標(biāo)識(shí)ID
teacherName	text	老師
adress	text	上課地點(diǎn)
subjectName	text	科目
updated_at	timeatamptz	修改時(shí)間

建表頁(yè)面配置：

數(shù)據(jù)表創(chuàng)建完后可在subject表中手動(dòng)插入幾條課程信息數(shù)據(jù)，如下圖。

sql操作如下

CREATE TABLE "public"."subject" ( "id" BIGINT NOT NULL,"teacherName" TEXT NOT NULL,"updated_at" TIMESTAMP WITH TIME ZONE NOT NULL,"adress" TEXT NOT NULL,"subjectName" TEXT NOT NULL,CONSTRAINT "subject_pkey" PRIMARY KEY ("id") ); INSERT INTO "public"."subject" ("id", "teacherName", "updated_at", "adress", "subjectName") VALUES ('1', '張珊', '2022-08-12 18:28:30.725+08', '計(jì)科樓2-1003', '數(shù)據(jù)庫(kù)原理'); INSERT INTO "public"."subject" ("id", "teacherName", "updated_at", "adress", "subjectName") VALUES ('2', '李四', '2022-08-17 16:13:54.527+08', '重樓2-3112', '計(jì)算機(jī)基礎(chǔ)'); INSERT INTO "public"."subject" ("id", "teacherName", "updated_at", "adress", "subjectName") VALUES ('3', '王五', '2022-08-17 17:28:49.603+08', '4教-101', '分布式數(shù)據(jù)庫(kù)'); INSERT INTO "public"."subject" ("id", "teacherName", "updated_at", "adress", "subjectName") VALUES ('4', '王博', '2022-08-18 17:28:59.265+08', '綜合樓4-401', '高等數(shù)學(xué)'); INSERT INTO "public"."subject" ("id", "teacherName", "updated_at", "adress", "subjectName") VALUES ('5', '肖戰(zhàn)', '2022-08-18 17:29:41.462+08', '教4-401', '線性代數(shù)');

4.創(chuàng)建student表

在數(shù)據(jù)表頁(yè)面，點(diǎn)擊“新建數(shù)據(jù)表”，創(chuàng)建student表，student表主要記錄學(xué)生信息，表結(jié)構(gòu)字段如下：

名稱類型描述

id	uuid	主鍵，自增，唯一標(biāo)識(shí)ID，與auth.users表中的uuid外鍵關(guān)聯(lián)
update_at	timestampt	創(chuàng)建時(shí)間
studentId	int8	學(xué)號(hào)，唯一

建表頁(yè)面配置：

說(shuō)明：其中student表字段id和auth.users表中的uuid外鍵關(guān)聯(lián)。

5.創(chuàng)建subject_student表

在數(shù)據(jù)表頁(yè)面，點(diǎn)擊“新建數(shù)據(jù)表”，創(chuàng)建subject_student表。subject_student表主要記錄學(xué)生的課表信息，表結(jié)構(gòu)字段如下：

名稱類型描述

id	int8	主鍵，自增，唯一標(biāo)識(shí)ID
studentId	int8	學(xué)號(hào)
subjectId	int8	與課程表的id關(guān)聯(lián)
schoolId	int8	與學(xué)校表的id關(guān)聯(lián)
departmentId	int8	與學(xué)院表的id關(guān)聯(lián)
updated_at	timestampt	修改時(shí)間

建表頁(yè)面配置：

說(shuō)明：其中subjectId與subject表中的id外鍵關(guān)聯(lián),schoolId與school表中的id外鍵關(guān)聯(lián),departmentId與department表中的id外鍵關(guān)聯(lián)。

數(shù)據(jù)表創(chuàng)建后可在subject_student表中手動(dòng)插入幾條信息數(shù)據(jù)，如下圖。

其中subjectId、schoolId、departmentId需要對(duì)應(yīng)數(shù)據(jù)表里的id。

sql操作

CREATE TABLE "public"."subject_student" ( "id" BIGINT NOT NULL,"updated_at" TIMESTAMP WITH TIME ZONE NOT NULL,"studentId" BIGINT NOT NULL,"subjectId" BIGINT NOT NULL,"schoolId" BIGINT NULL,"departmentId" BIGINT NULL,CONSTRAINT "subject_student_pkey" PRIMARY KEY ("id") ); ALTER TABLE "public"."subject_student" ADD CONSTRAINT "subject_student_departmentId_fkey" FOREIGN KEY ("departmentId") REFERENCES "public"."department" ("id") ON DELETE NO ACTION ON UPDATE NO ACTION; ALTER TABLE "public"."subject_student" ADD CONSTRAINT "subject_student_schoolId_fkey" FOREIGN KEY ("schoolId") REFERENCES "public"."school" ("id") ON DELETE NO ACTION ON UPDATE NO ACTION; ALTER TABLE "public"."subject_student" ADD CONSTRAINT "subject_student_subjectId_fkey" FOREIGN KEY ("subjectId") REFERENCES "public"."subject" ("id") ON DELETE NO ACTION ON UPDATE NO ACTION;INSERT INTO "public"."subject_student" ("id", "updated_at", "studentId", "subjectId", "schoolId", "departmentId") VALUES ('1', '2022-08-17 09:51:14.733+08', '20222202', '1', '1', '1'); INSERT INTO "public"."subject_student" ("id", "updated_at", "studentId", "subjectId", "schoolId", "departmentId") VALUES ('2', '2022-08-17 16:14:51.236+08', '20222202', '2', '1', '1'); INSERT INTO "public"."subject_student" ("id", "updated_at", "studentId", "subjectId", "schoolId", "departmentId") VALUES ('3', '2022-08-17 17:29:33.938+08', '20222202', '3', '1', '1'); INSERT INTO "public"."subject_student" ("id", "updated_at", "studentId", "subjectId", "schoolId", "departmentId") VALUES ('4', '2022-08-18 17:30:09.934+08', '20222202', '4', '1', '1'); INSERT INTO "public"."subject_student" ("id", "updated_at", "studentId", "subjectId", "schoolId", "departmentId") VALUES ('5', '2022-08-18 17:31:45.261+08', '20222202', '5', '1', '1');

6.創(chuàng)建subject_time表

在數(shù)據(jù)表頁(yè)面，點(diǎn)擊“新建數(shù)據(jù)表”，創(chuàng)建subject_time表。subject_time表主要記錄學(xué)生的排課信息，表結(jié)構(gòu)字段如下：

描述：通過(guò)關(guān)聯(lián)的課程id去查詢課程并合并數(shù)據(jù)

名稱類型描述

id	int8	主鍵，自增，唯一標(biāo)識(shí)ID
subjectId	int8	與課程表的id關(guān)聯(lián)
weekNum	text	周數(shù)(例如：“[25,26,27,28]”)
time	text	第幾節(jié)課（例如：1到6中的任意一個(gè)數(shù)字）
weekDay	text	周幾上課(例如：“[1,2]“或”[1,3,5]”)
updated_at	timestampt	修改時(shí)間

建表頁(yè)面配置：

數(shù)據(jù)表創(chuàng)建完成后可在subject_time表中手動(dòng)插入幾條信息數(shù)據(jù)，如下圖。

說(shuō)明：其中subjectId與subject表中的id外鍵關(guān)聯(lián)。

sql語(yǔ)法操作

CREATE TABLE "public"."subject_time" ( "id" BIGINT NOT NULL,"updated_at" TIMESTAMP WITH TIME ZONE NOT NULL,"subjectId" BIGINT NOT NULL,"weekNum" TEXT NOT NULL,"time" TEXT NOT NULL,"weekDay" TEXT NOT NULL,CONSTRAINT "subject_time_pkey" PRIMARY KEY ("id"),CONSTRAINT "subject_time_subjectId_fkey" FOREIGN KEY ("subjectId") REFERENCES "public"."subject" ("id") ON DELETE NO ACTION ON UPDATE NO ACTION );INSERT INTO "public"."subject_time" ("id", "updated_at", "subjectId", "weekNum", "time", "weekDay") VALUES ('1', '2022-08-12 18:29:01.828+08', '1', '[34,35,36,37,38]', '1', '[1,4,6]'); INSERT INTO "public"."subject_time" ("id", "updated_at", "subjectId", "weekNum", "time", "weekDay") VALUES ('2', '2022-08-17 16:25:48.757+08', '2', '[34,35,36,37,38]', '2', '[2,3,5]'); INSERT INTO "public"."subject_time" ("id", "updated_at", "subjectId", "weekNum", "time", "weekDay") VALUES ('3', '2022-08-17 17:29:54.301+08', '3', '[34,35,36,37,38]', '3', '[3,4,5,6,7]'); INSERT INTO "public"."subject_time" ("id", "updated_at", "subjectId", "weekNum", "time", "weekDay") VALUES ('4', '2022-08-18 17:30:59.789+08', '4', '[34,35,36,37,38,39,40]', '4', '[1,3,4,5]'); INSERT INTO "public"."subject_time" ("id", "updated_at", "subjectId", "weekNum", "time", "weekDay") VALUES ('5', '2022-08-18 17:32:20.801+08', '5', '[34,35,36,37,38,39,40]', '5', '[2,4,5]');

創(chuàng)建avatars存儲(chǔ)桶

創(chuàng)建云存儲(chǔ)的存儲(chǔ)桶，用來(lái)存儲(chǔ)用戶的頭像圖片，涉及操作包括：

創(chuàng)建一個(gè)存儲(chǔ)桶avatars

在該應(yīng)用的云存儲(chǔ)導(dǎo)航欄，點(diǎn)擊“新建Bucket”按鈕，創(chuàng)建存儲(chǔ)桶avatars。

允許每個(gè)用戶可以查看存儲(chǔ)桶avatars

選中存儲(chǔ)桶avatars，切換到權(quán)限設(shè)置欄，點(diǎn)擊“新規(guī)則”按鈕，彈出策略編輯彈框，選擇“自定義”，如下圖所示：

選擇SELECT操作，輸入策略名稱，點(diǎn)擊“生成策略”按鈕，如下圖所示。

允許用戶上傳存儲(chǔ)桶avatars；

選中存儲(chǔ)桶avatars，切換到權(quán)限設(shè)置欄，點(diǎn)擊“新規(guī)則”按鈕，彈出策略編輯彈框，選擇“自定義”，如下圖所示：

選擇INSERT操作，輸入策略名稱，點(diǎn)擊“生成策略”按鈕，如下圖所示。

查看結(jié)果：

注冊(cè)小程序

以上是我們?cè)贛emFire Cloud上配置的全部步驟，接下來(lái)是在微信開發(fā)者工具上操作了。

如果您還未注冊(cè)過(guò)小程序，請(qǐng)參考官方步驟注冊(cè)小程序(只需要通過(guò)您的郵箱注冊(cè)一個(gè)小程序獲得一個(gè)appid,然后下載一個(gè)微信開發(fā)工具即可)

下載代碼

https://github.com/LucaRao/subjectWechat.git

Node.js (>=14.x <=16.x) 。

用微信開發(fā)者工具點(diǎn)擊導(dǎo)入項(xiàng)目

選擇目錄是下載好的小程序項(xiàng)目的目錄，AppID為您在微信公眾平臺(tái)注冊(cè)小程序獲得的專屬appid

構(gòu)建npm

在右側(cè)詳情里面的本地設(shè)置把“使用npm模塊”和“不校驗(yàn)合法域名”勾上

打開終端，在項(xiàng)目目錄miniprogram下執(zhí)行如下命令 。

npm init npm install

接下來(lái)，下載小程序需要的Supabase 小程序客戶端和ui組件包。

npm install supabase-wechat-stable npm install @vant/weapp

點(diǎn)擊開發(fā)者工具中的菜單欄：工具 /構(gòu)建 npm

這一步npm就構(gòu)建完成了，我們需要的依賴也已經(jīng)下載好了,目錄miniprogram下會(huì)多出兩個(gè)文件，如下圖。

獲取 API密鑰

我們需要?jiǎng)?chuàng)建一個(gè)可以訪問(wèn)應(yīng)用程序數(shù)據(jù)的客戶端，我們使用了Supabase 微信客戶端，使用他生態(tài)里提供的功能（登錄、注冊(cè)、增刪改查等）去進(jìn)行交互。創(chuàng)建一個(gè)可以訪問(wèn)我們應(yīng)用程序數(shù)據(jù)的客戶端需要接口的地址（URL）和一個(gè)數(shù)據(jù)權(quán)限的令牌（ANON_KEY）,我們需要去應(yīng)用的概覽里面去獲取這兩個(gè)參數(shù)然后配置到lib/supabase.ts里面去。

lib/supabase.ts

import { createClient } from 'supabase-wechat-stable' const url = "" const key = ""export const supabase = createClient(url, key)

回到MemFire Cloud首頁(yè)，在應(yīng)用/概括頁(yè)面，獲取服務(wù)地址以及token信息，只需要從總覽中獲取URL接口地址和anon的密鑰。

Anon（公開）密鑰是客戶端API密鑰。它允許“匿名訪問(wèn)”您的數(shù)據(jù)庫(kù)，直到用戶登錄。登錄后，密鑰將切換到用戶自己的登錄令牌。這將為數(shù)據(jù)啟用行級(jí)安全性。

注意：service_role密鑰可以繞過(guò)任何安全策略完全訪問(wèn)您的數(shù)據(jù)。這些密鑰必須保密，并且要在服務(wù)器環(huán)境中使用，絕不能在客戶端或?yàn)g覽器上使用。 在后續(xù)示例代碼中，需要提供supabaseUrl和supabaseKey。

編譯小程序

功能1：在沒有登錄綁定學(xué)號(hào)時(shí)，主頁(yè)不會(huì)出現(xiàn)當(dāng)日的課程情況，請(qǐng)先點(diǎn)擊“綁定學(xué)號(hào)”去注冊(cè)登錄后才會(huì)有該學(xué)生今日的課表情況。

功能2：點(diǎn)擊班級(jí)課表，輸入學(xué)校、學(xué)院及學(xué)號(hào)可以查看該學(xué)生本周的課程情況

功能3：更換頭像

上傳頭像需要注意： 使用wx.chooseMedia來(lái)上傳文件

推薦使用方法：

wx.chooseMedia({count: 1,sizeType: ["original", "compressed"],sourceType: ["album", "camera"],async success(res) {const file = res.tempFiles[0]const fileExt = res.tempFiles[0].tempFilePath.split('.').pop()const fileName = `${Math.random()}.${fileExt}`const filePath = `${fileName}`let { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)if (uploadError) {throw uploadError}},});

功能4：清除緩存（會(huì)清除當(dāng)前學(xué)生的所有賬號(hào)及課表信息）

以上就是使用微信小程序和 MemFire Cloud 構(gòu)建的一個(gè)完整課表小程序的具體流程。一起來(lái)試試吧～

總結(jié)

以上是生活随笔為你收集整理的应用实战｜微信小程序开发示例之Super课表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。