目前uniapp开发的大部分实时音视频聊天app都要在nvue页面上开发。nvue和vue虽然没有太大区别，但是还是有一些区别的。
仔细查了uniapp官网，发现可以使用原生子表单进行开发，将整个视频聊天打包成原生子表单，方便移植。
首先，本地子表单subNvuesubNVue页面可以与vue 页面进行通信通信，以通知Vue页面的用户所执行的操作。或者通过Vue页面更新subNVue的数据和状态。除了vue页面之外，SubNvue还可以与nvue 页面进行通信通信。
通信实现方式
//在subNVue/vue页面//$ on(事件名，回调)uni上注册事件监听方法。$ on ('page-popup '，(data)={ VM . title=data . title；VM . content=data . content；})//触发subNVue/vue页面上的事件//$ emit (eventname，data) uni。$ emit ('page-popup '，{Title : '我是标题'，content: '我是数据内容' })；存放位置、相关配置
因为要打包成一个整体模块，所以建议放在最外层的paltform\app-plus\subNVue下，和pages文件在一个级别。
详见https://ask.dcloud.net.cn/article/35948,官网
二。发展（1）引入视频聊天插件
使用anyRTC提供的uniapp插件anyRTC音视频SDK插件anyRTC注册anyRTC账号，并创建一个应用获取appid进行自定义基础（2） 配置原生子窗体 subNVue.
文件位置
pages.json 
中的配置
（3）简易实现
脚本//引入雷达跟踪中心(雷达跟踪中心的缩写)插件const RTC模块=uni。requinativeplugin(“AR-RTC模块”)；//引入原生子窗体const subNVueLocation=uni。getsubnvuebyid(' LocationCanvasView ')；const subNVueRemote=uni。getsubnvuebyid(' RemoteCanvasView ')；导出默认{ data(){ return { appid : ' 2437529 DD 3 AE 7e 238 a 7617 c 61 f 22 daee '，channel: ' '，uid: ' '，canvasview : { type option : ' location '，//本地/远端},};},//接受页面参数加载(选项){//频道这个。通道=选项。渠道；//用户这个。uid=选项。uid},已安装(){this.init()}，methods: {//初始化异步初始化(){//初始化回调等待RTC模块。set callback(event={ switch(event。发动机事件){案例“警告”:控制台。日志(“警告时”，事件)；打破；案例“出错”:控制台。日志(“出错时”，事件)；打破；案例onJoinChannelSuccess': //用户加入成功console.log('用户event.uid '加入成功');这个。localadovidefn()break；案例onLeaveChannel': //离开频道回调打破；案例onUserJoined': //远端用户加入当前频道回调。this.promptFn('info '，'远端用户加入当前频道回调');打破；案例在sero offline上' ://远端用户离开当前频道回调10 .破；案例onFirstLocalAudioFrame': //已发送本地音频首帧的回调。(页面上添加音频)破；案例" onFirstLocalVideoFrame"://已显示本地视频首帧的回调。(页面添加本地视频)//this.promptFn('error '，'已显示本地视频首帧的回调');打破；案例" onfirstremotevided " ://已完成远端视频首帧解码回调。(页面添加远端视频)//this.promptFn('info '，'已完成远端视频首帧解码回调');这个。remotaudiovideofn(事件。uid，这个。渠道)；打破；}});//初始化appidawait RTC模块。创建({ ' appId ' : this。appId }，(RES)={ })；//设置直播场景下的用户角色主播等待RTC模块。setclientrole({ ' role ' : 1 }，(ret)={ })；//加入房间等待RTC模块。加入频道({ ' token ' : ' '，' channelId': this.channel，' uid': this.uid}，(res)={})//隐藏原生子窗体子网位置。hide()；subnvueremote。hide()；},//采集视频异步本地音频视频Fn() {//采集本地视频这个。canvasview=await对象。分配(这个。canvasview，{channelId: this.channel，uid: this.uid，RtcModule})//打开本地视频容器子窗体等待子网定位。show()；等待大学.$emit('LocationCanvasViewFn '，this。canvasview)；},//远端视频渲染异步远程音频视频Fn(uid，channelId) {//通过编号获取nvue子窗体this.open2=true//打开远端视频容器子窗体等待subnvueremote。show()；等待大学.$emit('RemoteCanvasViewFn '，{uid，channelId，type option : ' remote ' })；} } }/编写（4）真机运行脚本
简单使用原生子窗体已经实现了，下次再带大家把音视频封装到一个原生子窗体中吧，大家要多多关注哟！
