最近用uniapp做了一个小程序,里面需要用到腾讯的实时音视频,腾讯有提供一个微信小程序的sdk包方便开发者引入实时音视频,但是原生微信小程序没法在uniapp中直接用,需要转,转的过程存在很多坑,腾讯的TRTC更新也非常频繁,在这里记录一下转的步骤,以便后期查阅.
文档查看以及文件下载
腾讯TRTC官方文档地址
TRTC实时音视频SDK地址
首先插件市场下载miniprogram-to-uniapp插件 点击右边的使用HBuilderX 导入插件
https://ext.dcloud.net.cn/plugin?id=2656
准备工作
将TRTC微信小程序SDK下载到本地解压后,找到文件夹TRTCSimpleDemo,根据官方的引导,在debug中填好SDKAPPID和EXPIRETIME,在微信开发者工具中打开发布,确保功能是没有问题的,然后在hbuilderX里面导入这个目录
使用插件将小程序转成uniapp项目
按照miniprogram-to-uniapp插件的介绍,在目录上右键选择miniprogram-to-uniapp,稍等几分钟后,会在hbuilderX生成一个新的目录文件TRTCSimpleDemo_uni
删除components
删除目录components,static/components
引入components
新建目录wxcomponents,在TRTCSimpleDemo的components目录下将整个trtc-room目录复制进来
对文件内容进行调整
打开pages.json 找到代码段
...
{
"path": "pages/room/room",
"style": {
...
}
},
...
改成
{
"path": "pages/room/room",
"style": {
...
"usingComponents": {
"trtc-room": "/wxcomponents/trtc-room/trtc-room"
}
}
},
打开文件/pages/room/room.vue,找到代码段
...
import trtcRoom from "../../components/trtc-room/trtc-room";
...
components: {
trtcRoom
},
...
将上面这几句代码删除
修改图片引用路径 pages目录下的几个vue里引用的图片路径错误,真实图片都在static/images下,代码里写的是../../images/ 根据需要一一修改(把images 改成 static/images 或者全部改成绝对路径 /static/images/..)
全局搜索uni.getSetting() 全部改成 wx.getSetting()
到这里差不多就可以跑起来了,注意详情本地设置里 ES6转ES5 需要打勾 在uniapp 点击菜单发行->小程序-微信 ,然后在微信开发者工具里上传,就可以真机测试了. 需要注意的是如果不上传,直接真机调试,live-pusher 会显示在最上面,但是打包出来就是好的,具体原因不明,有可能是真机调试的同层渲染有问题.