最近用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 会显示在最上面,但是打包出来就是好的,具体原因不明,有可能是真机调试的同层渲染有问题.