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

这篇具有很好参考价值的文章主要介绍了应用实战|微信小程序开发示例--多人聊天互动空间。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

“超能力”数据库~拿来即用,应用开发人员再也不用为撰写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表主要记录用户发送的每一条信息,表结构字段如下:

名称 类型 描述
id bigint 主键,自动为列分配一个连续的唯一编号,唯一标识ID
username varchar 用户名
bgColor varchar 头像背景颜色
created_at timetamptz 创建时间
text text 消息

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密钥。它允许“匿名访问”您的数据库,直到用户登录。登录后,密钥将切换到用户自己的登录令牌。这将为数据启用行级安全性。」

编译小程序

应用实战|微信小程序开发示例--多人聊天互动空间文章来源地址https://www.toymoban.com/news/detail-489120.html

到了这里,关于应用实战|微信小程序开发示例--多人聊天互动空间的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序开发实战 ⑨(TabBar)

    @作者 : SYFStrive   @博客首页 : HomePage 📜: 微信小程序 📌: 个人社区(欢迎大佬们加入) 👉: 社区链接🔗 📌: 觉得文章不错可以点点关注 👉: 专栏连接🔗 💃: 感谢支持,学累了可以先看小段由小胖给大家带来的街舞😀 👉 微信小程序 (🔥) tabBar 是移动端应用常见

    2024年02月08日
    浏览(35)
  • 【声网】实现web端与uniapp微信小程序端音视频互动

    利用声网实现音视频互动 注册声网账号 进入Console 成功登录控制台后,按照以下步骤创建一个声网项目: 展开控制台左上角下拉框,点击 创建项目 按钮。 在弹出的对话框内,依次选择 项目类型 ,输入 项目名称 ,选择 场景标签 和 鉴权机制 。其中鉴权机制推荐选择 安全

    2024年04月27日
    浏览(58)
  • 微信小程序开发实战11_1 微信支付下单

    微信支付存在多个业务流程,包括微信支付流程、退款流程等。本章节主要介绍微信的支付下单流程,图12-1是微信支付流程的交互图: 重点环节说明 步骤1:小程序端用户向商户服务器发起支付请求,重点是提供用户信息、商品信息、支付金额等参数。 步骤3:商户服务器调

    2024年02月09日
    浏览(47)
  • 微信小程序开发实战11_4 微信支付退款流程

    当交易发生之后一年内,由于买家或者卖家的原因需要退款时,卖家可以通过退款接口将支付金额退还给买家,微信支付将收到退款请求并且验证成功之后,将支付款按原路退还至买家账号上。使用该接口时的一些注意事项如下: 交易时间超过一年的订单无法提交退款。 微

    2024年02月11日
    浏览(43)
  • 微信小程序开发实战 ②③(全局数据共享)

    @作者 : SYFStrive   @博客首页 : HomePage 📜: 微信小程序 📌: 个人社区(欢迎大佬们加入) 👉: 社区链接🔗 📌: 觉得文章不错可以点点关注 👉: 专栏连接🔗 💃: 感谢支持,学累了可以先看小段由小胖给大家带来的街舞 👉 微信小程序 (🔥) 分包指的是把一个完整的

    2024年02月09日
    浏览(43)
  • 微信小程序开发教学系列(12)- 实战项目案例

    本章将通过一个简单的实战项目案例来帮助读者巩固之前学习到的知识。我们将搭建一个名为“ToDoList”的微信小程序,实现一个简单的任务清单功能。 ToDoList是一个用于记录和管理任务的小程序。用户可以添加、编辑、完成和删除任务,以及查看任务清单。 功能需求 显示任

    2024年02月11日
    浏览(60)
  • 微信小程序开发入门与实战 ①(初始微信小程序)

    @作者 : SYFStrive   @博客首页 : HomePage 📜: 微信小程序 📌: 个人社区(欢迎大佬们加入) 👉: 社区链接🔗 📌: 觉得文章不错可以点点关注 👉: 微信小程序专栏🔗 💃: 感谢支持,学累了可以先看小段由小胖给大家带来的街舞😀 🔗: 阅读文章 👉 微信小程序 (🔥)

    2024年02月09日
    浏览(111)
  • 【小程序】零基础微信小程序开发+实战项目

    如何拥有一款属于你自己的小程序,惊喜就在下面! 目前,小程序行业已经成为互联网营销的热门黑马之一,依托于各大流量平台,小程序行业具有天然的用户基础和得天独厚的资源优势,凭借其方便快捷的操作以及简单通俗的模式,仅短短一年的时间,就迎来了爆发性的增

    2024年02月11日
    浏览(50)
  • 微信小程序实战:智能水印相机小程序开发附源码

    一款智能水印相机,拍照自动添加时间、地点、经纬度等水印文字,可用于工作考勤、学习打卡、工作取证等,支持自定义内容以及给现有照片添加水印。无需安装,无需注册,即开即用。 主要是通过canvas给图片上添加上时间水印地点信息。首先通过官方API(chooseLocation)获取

    2024年02月09日
    浏览(67)
  • 微信小程序开发实战9_2 小程序页面转发

    小程序页面转发是小程序分享的一个重要方式,在设计小程序应用时就需要考虑那些页面需要实现转发功能,以及页面的转发参数。本节介绍如何进行小程序页面的分享,并介绍如何获取小程序卡片的分享票据。 9.2.1小程序页面转发 微信小程序提供了页面的转发的功能,用户

    2024年02月16日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包