当前位置: 首页 > news >正文

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

“超能力”数据库~拿来即用,应用开发人员再也不用为撰写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密钥。它允许“匿名访问”您的数据库,直到用户登录。登录后,密钥将切换到用户自己的登录令牌。这将为数据启用行级安全性。」

编译小程序

在这里插入图片描述

相关文章:

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

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

css:使用filter和backdrop-filter实现高斯模糊效果

背景 今天接到一个需求是,使用高斯模糊的效果对一个页面进行模糊处理,正好借这个机会来整理一下 css3 中高斯模糊的两个 API API介绍 filter 说明: 该 API 是一个过滤器,不仅能实现高斯模糊,还有很多比如颜色偏移、…...

科技大势怎么看 2023怎么干?

2023年,科技的走向依旧是世界各国的关注重点,各国在纷纷设立自己的科技战略目标外,还在潜心研究不同技术领域的科技趋势,试图通过科技占据国际竞争的制高点。 随着我国深入实施创新驱动发展战略,推动产业结构优化升级&…...

盘点曾经很火但消失了的8个软件

目录 1、飞信 3、暴风影音 4、千千静听 5、虾米音乐 6、快车下载 7、人人网 8、QQ农场 今天小编给大家分享曾经很火但消失了的8个软件,你都用过吗? 1、飞信 飞信是中国移动通信集团公司推出的一款短信、语音、视频通信应用程序。它于2007年推出&a…...

安卓 Frament + ViewPager使用示例

1. 组成架构 整个架构被包在一个外部Fragment之中,也可以放在一个Activity之中,随意。外部的fragment包含了两个组件,即途中的ViewPager和TabLayoutViewPager要套上一个FragmentStatePagerAdapter ,适配器负责new出一个个fragment…...

【银行测试】必看的四类题型:这可是最经典的一套题目了

目录:导读 一、根据题目要求写出具体LINUX操作命令 二、JMETER题目 三、根据题目要求写出具体SQL语句 四、测试案例设计题 金三银四面试面对大厂面试官提问,如何回答:花3天背完这100道软件测试面试题!银行测试的offer还不是手…...

跨源资源共享(CORS)-亲测理解,以及对http的状态,参数的理解和使用,对预检请求的触发和解决

跨源资源共享(CORS)-亲测理解,以及对http的状态,参数的理解和使用 跨源资源共享(CORS,或通俗地译为跨域资源共享)是一种基于HTTP 头的机制,该机制通过允许服务器标示除了它自己以外的…...

学生使用的台灯该怎么选择?2023适合学生房间的灯推荐

随着社会的进步发展,我们的生活水平越来越高,很多家庭的孩子都开始使用台灯这种家居产品,对于学习任务繁重的他们来说,台灯确实可以起到保护眼睛、提高学习专注度的作用。那么不知道朋友们是否了解过,台灯该怎么选择呢…...

23种设计模式-桥接模式(安卓应用场景介绍)

概念 桥接模式是一种结构型设计模式,它通过将抽象与其实现分离来解耦。它使用接口(抽象类)作为桥梁,将一个抽象类与其实现类的代码分别独立开来,从而使它们可以各自独立地变化。桥接模式的核心思想是“组合优于继承”…...

2021牛客OI赛前集训营-提高组(第四场) T3快速访问

2021牛客OI赛前集训营-提高组&#xff08;第四场&#xff09; 题目大意 有一棵n1n1n1个节点的树&#xff0c;根节点为0。给你一个kkk&#xff0c;定义集合Si{j∈Z∣max⁡(1,i−k)≤j<i}∪{0}S_i\{j\in Z|\max(1,i-k)\leq j<i\}\cup\{0\}Si​{j∈Z∣max(1,i−k)≤j<i…...

【大数据是什么】

大数据是什么大数据是做什么的&#xff1f;大数据主要有哪些职位 &#xff1f;大数据运维工程师数据仓库开发工程师ETL工程师大数据开发工程师BI工程师算法工程师大数据平台开发工程师大数据架构师讲述一下自己的大数据学习之路大数据是做什么的&#xff1f; 2014年&#xff0c…...

大数据 | centos7图形界面无法执行yum命令

大家好&#xff0c;今天是三八女神节了&#xff01; 你知道吗&#xff1f;世界上第一位电脑程序设计师是名女性&#xff0c;Ada Lovelace (1815-1852)。 她是一位英国数学家兼作家&#xff0c;第一位主张计算机不只可以用来算数的人&#xff0c;也发表了第一段分析机用的演算…...

三维人脸实践:基于Face3D的渲染、生成与重构 <一>

face3d: Python tools for processing 3D face git code: https://github.com/yfeng95/face3d paper list: PaperWithCode 该方法广泛用于基于三维人脸关键点的人脸生成、属性检测&#xff08;如位姿、深度、PNCC等&#xff09;&#xff0c;能够快速实现人脸建模与渲染。推荐…...

Javascript 设计模式

设计模式的五大设计原则(SOLID)单一职责&#xff1a;一个程序只需要做好一件事。如果功能过于复杂就拆分开&#xff0c;保证每个部分的独立开放封闭原则:对扩展开放&#xff0c;对修改封闭。增加需求时&#xff0c;扩展新代码&#xff0c;而不是修改源代码。这是软件设计的终极…...

JAVA-文档工具screw-gui

前言 为什么萌生了写文档工具得想法&#xff0c;因为在项目开发得过程中&#xff0c;经常需要补充一些文档&#xff0c;比如数据库文档、详细设计文档等等&#xff0c;文档与项目相绑定&#xff0c;在项目需求新增或变更时&#xff0c;文档也需要反反复复得修改。 1. 数据库…...

开源鸿蒙南向嵌入学习笔记——NAPI框架学习(一)

开源鸿蒙南向嵌入学习笔记——NAPI框架学习&#xff08;一&#xff09; 前言——系列介绍 本系列文章主要是记录笔者在鸿蒙南向的学习与工作中的知识点笔记记录&#xff0c;其中不止会针对鸿蒙中的学习问题进行思考与记录&#xff0c;也会对涉及到的一些嵌入式等其他领域知识&…...

Spring - Spring框架概述面试题总结

文章目录01. 什么是Spring&#xff1f;02. Spring框架的设计目标&#xff0c;设计理念&#xff0c;和核心是什么&#xff1f;03. Spring的优点是什么&#xff1f;04. Spring框架中都用到了哪些设计模式&#xff1f;05. Spring有哪些应用场景?06. Spring由哪些模块组成&#xf…...

学习python好就业么

Python的普及与数据挖掘、人工智能和数值计算等领域的蓬勃发展相关&#xff0c;但同时也与普遍编程需求的增加有关。 Python作为人工智能的头号语言&#xff0c;一方面会吸引大量计划从事人工智能的人来学习&#xff0c;另一方面自然也带动了网络上对这门“新语言”的关注和讨…...

瑞幸咖啡的最终目标并不是做国内市场大哥

出品 | 何玺 排版 | 叶媛 日前&#xff0c;瑞幸咖啡发布2022年第四季度及全年财报。数据显示&#xff0c;在刚刚过去的2022年&#xff0c;瑞幸咖啡首次实现了营收超百亿&#xff0c;门店规模也超越老对手星巴克&#xff0c;成为了国内第一连锁咖啡品牌。 那么&#xff0c;瑞幸…...

GPT 模型介绍 | GPT3 / GPT3.5 + Flask | Github源码链接

1. 模型介绍 Chatgpt 使用与 InstructGPT相同的方法&#xff0c;使用来自人类反馈的强化学习 (RLHF) 来训练该模型&#xff0c;但数据收集设置略有不同。我们使用监督微调训练了一个初始模型&#xff1a;人类 AI 训练员提供对话&#xff0c;他们在对话中扮演双方——用户和 AI…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...