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

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 下。

具体可查看官网 https://ask.dcloud.net.cn/article/35948

二、开发

（1）引入视频聊天插件

1. 使用 anyRTC 提供的 uniapp 插件

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

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

（2） 配置原生子窗体 subNVue

• 文件位置

• 在 pages.json 中的配置

（3）简易实现

<script>
	// 引入 RTC 插件
	const RtcModule = uni.requireNativePlugin('AR-RtcModule');