记录--uniapp 使用原生子窗体进行视频聊天

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

现在 uniapp 开发的实时音视频聊天类的 APP 大部分都要在 nvue 页面上进行开发。虽然 nvue 与 vue 的区别不是很大，但还是有所差异的。

仔细查看了 uniapp 官网，发现了可以使用原生子窗体进行开发，可以把整个视频聊天封装到一个原生子窗体中，方便移植。

一、原生子窗体 subNVue

subNVue 页面可以和 vue 页面进行通信，来告知 vue 页面用户执行的操作。或者通过 vue 页面对 subNVue 进行数据和状态的更新。 subNVue 除了与 vue 页面进行通信，还 可以与 nvue 页面进行通信。

通信实现方式

// 在 subNVue/vue 页面注册事件监听方法  
// $on(eventName, callback)  
uni.$on('page-popup', (data) => {  
    vm.title = data.title;  
    vm.content = data.content;  
})  

// 在 subNVue/vue 页面触发事件  
// $emit(eventName, data)  
uni.$emit('page-popup', {  
    title: '我是一个title',  
    content: '我是data content'  
});

存放位置、相关配置

因为想封装成一整个模块，所以建议放在最外层与 pages 文件同级的 paltform\app-plus\subNVue 下。

具体可查看官网 ask.dcloud.net.cn/article/359…

二、开发

(1)引入视频聊天插件

1. 使用 anyRTC 提供的 uniapp 插件

• anyRTC音视频SDK插件
• anyRTC实时消息SDK插件

2. 注册 anyRTC 账号，创建应用获取appid
3. 制作自定义基座

(2) 配置原生子窗体 subNVue

• 文件位置

• 在 pages.json 中的配置

(3)简易实现

本文转载于：

https://juejin.cn/post/6964583553761804301

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。