应用实战|微信小程序开发示例--多人聊天互动空间

news/2024/7/20 4:33:51 标签: 微信小程序, 小程序

“超能力”数据库~拿来即用,应用开发人员再也不用为撰写API而发愁。MemFire Cloud 为开发者提供了简单易用的云数据库(表编辑器、自动生成API、SQL编辑器、备份恢复、托管运维),很大地降低开发者的使用门槛。

本示例是一个可以实现多人互动的角色扮演聊天室的小程序>微信小程序(web版传送门:Web开发示例–多人聊天互动空间),小程序后端服务使用了MemFire Cloud,其中使用到的MemFire Cloud功能包括:
其中使用到的MemFire Cloud功能包括:

  • 云数据库:存储聊天室小程序数据表的信息。
  • 即时API:创建数据表时会自动生成 API。
  • 云存储:存储用户发布帖子中的图片。
  • Realtime:轻松构建任何类型的实时应用程序

在这里插入图片描述

创建应用

目的:通过创建的一个MemFire Cloud应用来获得数据库、云存储等一系列资源,并将获得该应用专属的API访问链接和访问密钥,用户可以轻松的调用API接口与以上资源进行交互。

登录MemFire Cloud, 在“我的应用”页面创建一个新应用

在这里插入图片描述

创建数据表

创建messages表

建表操作如下:

在这里插入图片描述

在“表编辑器”页面,点击“新建表”,创建messages表。messages表主要记录用户发送的每一条信息,表结构字段如下:

名称类型描述
idbigint主键,自动为列分配一个连续的唯一编号,唯一标识ID
usernamevarchar用户名
bgColorvarchar头像背景颜色
created_attimetamptz创建时间
texttext消息

sql建表语句

CREATE TABLE messages (
  id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  username VARCHAR NOT NULL,
  bgColor VARCHAR NOT NULL,
  text TEXT NOT NULL,
  timestamp timestamp default now() NOT NULL
);

创建策略

接下来,需要给messages表创建两条策略,分别是允许所有用户可以查询和插入messages表数据,在“SQL执行器”页面,点击“新查询”按钮,新建一个SQL Query,执行以下操作:

alter table public.messages enable row level security;

-- 启用对所有用户的查询数据访问
create policy "Enable access to all users" on public.messages for
select using (true);

-- 启用对所有用户的插入数据访问
create policy "Enable insert for all users" on public.messages for
insert with check (true);

启用Realtime

常用的启用Realtime功能有两种方式:

①在表编辑器页面,创建数据表时,勾选“启用Realtime”,即可启用;

② 在“数据库->Replication”页面,启用Realtime,可以选择Realtime监听数据表的‘插入’、‘更新’、‘删除’、‘截断’操作,可以根据业务自身需求勾选,这里我们需要启用全部操作。点击‘1张表’按钮后,进入数据表列表,点击message表的开关按钮,启用Realtime功能。

在这里插入图片描述

创建bucket

1.新建images存储桶

点击‘存储’图标菜单,点击‘创建新bucket’,创建images存储桶

在这里插入图片描述

2.创建策略

接下来,给images存储桶创建一个策略,允许所有的用户在聊天中发送图片。

-- Secure the bucket
CREATE POLICY "允许任何用户发送图片1ffg0oo_0" ON storage.objects FOR INSERT TO public WITH CHECK (bucket_id = 'images' );

注册小程序

以上是我们在MemFire Cloud上配置的全部步骤,接下来是在微信开发者工具上操作了。

「如果您还未注册过小程序,请参考官方步骤注册小程序(只需要通过您的邮箱注册一个小程序获得一个appid,然后下载一个微信开发工具即可)」

用微信开发者工具点击导入项目

选择目录是下载好的小程序项目的目录,AppID为您在微信公众平台注册小程序获得的专属appid。

在这里插入图片描述

构建npm

在右侧详情里面的本地设置把“使用npm模块”和“不校验合法域名”勾上。

在这里插入图片描述

打开终端,在项目根目录下执行如下命令 (小程序需要的MemFire Cloud的小程序>微信小程序SDK已经存在package.json里,可以直接安装全局依赖)。

npm init
npm install

在这里插入图片描述

点击开发者工具中的菜单栏:工具 /构建 npm

这一步npm就构建完成了,我们需要的依赖也已经下载好了,根目录下会多出两个文件,如下图。

在这里插入图片描述

获取 API密钥

接下来需要创建一个可以访问应用程序数据的客户端,小程序使用了MemFire Cloud 小程序>微信小程序SDK包,使用他生态里提供的功能(登录、注册、增删改查等)去进行交互。创建一个可以访问小程序>微信小程序数据的客户端需要接口的地址(URL)和一个数据权限的令牌(ANON_KEY),我们需要去应用的首页去获取这两个参数然后配置到lib/supabase.js里面去。

lib/supabase.js

import { createClient } from 'supabase-wechat-stable-v2'
const url = ""
const key = ""

export const supabase = createClient(url, key)

回到MemFire Cloud首页,在应用/首页页面,获取服务地址以及token信息,只需要从首页中获取URL接口地址和anon的密钥。

在这里插入图片描述
「Anon(公开)密钥是客户端API密钥。它允许“匿名访问”您的数据库,直到用户登录。登录后,密钥将切换到用户自己的登录令牌。这将为数据启用行级安全性。」

编译小程序

在这里插入图片描述


http://www.niftyadmin.cn/n/132204.html

相关文章

ruoyi-vue-plus1(控制台相关的输出日志)(p6spy插件)(jackson全局配置)(StopWatch)

Jackson配置在启动项目时,我们发现日志打印出这样几行字,初始化了jacdson配置,我们去查看一下来源找。我们找到了一个全局序列化配置类,其中重写了BigNumberSerializer.INSTANCE进去查看发现了这里对于部分范围的数字进行了转为为…

UML学习备忘录

UML学习备忘录 UML 全称是 Unified Modeling Language(统一建模语言),它以图形的方式来描述软件的概念。它的特点是简单、统一、图形化、能表达软件设计中的动态与静态信息。UML的本质就是为了交流。 UML的概念包括了UML语义(Se…

虹科教您 | 在Windows环境下安装PCAN View及通讯测试指南

应用简介 PCAN-View软件是一款简化的CAN监视软件,可用于显示、发送、和记录CAN数据通讯。报文可手动和定期发送,用户可设置比特率。在处理期间显示总线系统错误和CAN硬件的存储器过满。示踪功能可用于记录和保存CAN数据通讯。本文档的作用在于&#xff…

【3.8】操作系统内存管理、Redis数据结构、哈希表

内存满了,会发生什么? 当应用程序读写了这块虚拟内存,CPU 就会去访问这个虚拟内存, 这时会发现这个虚拟内存没有映射到物理内存, CPU 就会产生缺页中断,进程会从用户态切换到内核态,并将缺页中…

基础01-ajax fetch axios 的区别

ajax fetch axios 的区别 题目 ajax fetch axios 的区别 分析 三者根本没有可比性,不要被题目搞混了。要说出他们的本质 传统 ajax AJAX (几个单词首字母,按规范应该大写) - Asynchronous JavaScript and XML(异…

Day12-字体图标库和SCSS

文章目录一 图标库图标库的使用方式方式1 引入在线图标库方式2 下载图标库到本地二 选择器权重单个选择器权重组合选择器(复合选择器)加法运算三 SASS概念:使用:借助vscode的插件来帮助配置sass环境及开发嵌套变量:保存…

Java 重写(Override)与重载(Overload)

Java 是一门面向对象的编程语言,其中有两个重要的概念:重写(Override)和重载(Overload)。这两个概念都与方法相关,它们的目的是为了让程序更加灵活、可读性更强,同时也提高了代码的可维护性和可扩展性。本文将会详细讲解 Java 中的…

100种思维模型之信息传递思维模型-028

人与人之间存有 认知偏差和理解偏差 ,信息在传递过程中会 衰减、失真以及再加工 ! 信息传递思维模型 ,一个有助于 提高信息传递质量 的思维模型。下面从三个方面进行介绍, 何谓信息传递思维模型、信息传递思模型生活中的运…