本文是使用uni-app和nvue实现微信特效功能的第三篇。今天我们基于uniapp+nvue实现的uniapp仿微信音视频通话插件示例项目实现了以下功能：1：语音通话2：视频通话3：分页状态反馈软件效果：技术实现开发环境：HbuilderX+nodejs技术框架：uniapp+vue2.x+node-sass测试环境：App端（Android+IOS）插件：智米-TRTC调用代码：开源效果概览通过连接IM，结合IM的信令功能，我们可以轻松方便的实现仿微信音视频通话，我们只需要关注接入后的接口逻辑即可。相比于固定布局、固定样式、json配置布局的设计，自由布局控件采用了更符合前端开发的自由布局模式，即提供简单的原生组件+模块，让开发者可以拥有自由灵活的布局空间。从'../../tx-jssdk/trtc-calling-jssdk'txcalling.$on('onUserVideoAvailable',this.onUserVideoAvailable)导入trtcCallingtxcalling.$on('onUserAudioAvailable',this.onUserVideoAvailable)//用户离开voiptxcalling.$on('onUserLeave',this.onUserLeave)//拒绝通话txcalling.$on('onReject',this.onReject)txcalling.$on('onCallingCancel',this.onReject)//通话结束txcalling.$on('onCallEnd',this.onCallEnd)txcalling.openCamera(true,this.$refs.localVideoView)Voice/VideoCall用于语音通话,不引入原生组件也可以实现,视频通话需要引入原生组件//视频通话需要引入原生组件//语音拨号0=voice调用txcalling。call('callid',0)//videocall1=videocalltxcalling.call('callid',1)//groupdialtxcalling.groupCall(callids,callType)并使用极其简单的2作为接收者的回答这个api可以被实现//接受通话txcalling.accept()//结束通话txcalling.reject()进入通话播放界面进入通话后，开发者会收到腾讯的回调事件，如下txcalling.$on('onUserVideoAvailable',this.onUserVideoAvailable)txcalling.$on('onUserAudioAvailable',this.onUserVideoAvailable)//这里获取到userId之后，通过startRemoteView方式播放对的画面functiononUserVideoAvailable(){this.isWaiting=falsethis.startCountDate=()letEnterUserres.data.userIdif(this.voipType==='audio'){txcalling.setHandsFree(this.handsFree)return}if(res.type==='onUserVideoAvailable'&&!res.data.available){trtcCalling.stopRemoteView(EnterUserId,this.$refs[`remoteVideoView${EnterUserId}`][0])return}if(this.remotes.indexOf(EnterUserId)<0){this.remotes.push(EnterUserId)this.$nextTick(e=>{trtcCalling.startRemoteView(EnterUserId,this.$refs[`remoteVideoView${EnterUserId}`][0])})}else{trtcCalling.startRemoteView(EnterUserId,this.$refs[`remoteVideoView${EnterUserId}`][0])}}至此，仿微信音视频通话分享的uniapp开发就到这里了。这部分代码，使用的是原生插件，可以参考uniapp插件市场的插件。插件市场也有开源代码项目。net.cn/plu...可以直接在插件市场通过相应的按钮导入开源代码，但是记得先安装HbuilderX。智米科技专业开发各种Uniapp原生插件。目前已向客户交付各类插件100多个。插件正在陆续整理上架，分享所有关于Uni-app的教程和资料。
