uniapp：小程序对接腾讯云语音视频通话，简单demo

我发现啊，现在小程序的地位是越来越高了，各种各样的业务，五花八门的功能；最近又接了一个新的功能，在小程序上实现语音视频通话，咋办？搞呗！

先放文档：

实时音视频 集成 TUICalling (uni-app /小程序) - 含 UI 集成方案 - 文档中心 - 腾讯云

有一说一，这个文档写的其实还是相当详细的

1. 把小程序后台的接口设置打开以下功能

 2. 去github上拉代码

https://github.com/TencentCloud/TIMSDK/tree/master/uni-app/TUICalling/TUICalling-miniprogram

我们要的是这个uniapp项目，可别整错了

 3. 将TUICalling-miniprogram中的wxcomponents文件夹放进我们自己的项目中

 4. 配置我们自己项目的pages.json，值得注意的是，你在哪个页面进行语音视频通话的需求，就在哪个页面进行引入，注意目录路径，单词拼写，千万别整错了！

5. 如何使用?

我先简单说一下这个demo的场景，模拟了两个人，需要两部手机， 一人为普通用户，一人为客服人员；这两个人可以进行视频或者是语音通话！

首先进入应用选择，自己是什么角色

index.vue

选择完成之后，我们把我们自己的用户数据设置在vuex里面

import Vue from 'vue';
import Vuex from 'vuex';


Vue.use(Vuex)

const userObj = {
	user: {
		userID: 'wxy',
		userSig: `aaa示例数据`
	},
	cmr: {
		userID: 'cmr',
		userSig: `bbb示例数据`
	}
}
const store = new Vuex.Store({
	state: {
		userInfo: {}
	},
	mutations: {
		setUserInfo(state, identity) {
			state.userInfo = userObj[identity]
		}
	}
})

export default store

这个时候，可能得问，这个userID，userSig是从何而来的，我指条路，因为这种牵扯到 用户账号的私密性，你也知道，这种数据是不会放在前台的，得从自己的服务器请求得到，但是因为是示例，所以就直接写死在前台了，测试数据从那里来的话，看下面：

登录 - 腾讯云

 自己去生成两个测试的账号就可以了！

最后,拨打通话的页面 calling.vue

config中的sdkAppId，是在这里获得的，创建应用之后，列表里面就会有这个sdkAppId

运行测试，我们两部手机，一部选择客服，一部选择普通用户，而后都进入到calling页面，点击语音通话或者视频通话就可以了！记得真机测试！！！

 如果微信开发者工具报如下错误

 请勾选开发者工具中的增强编译选项即可，调试库调高，即可解决，

请问学会了吗？