使用UniApp通过button拉起抖音小程序IM客服能力

 1.  第一步：添加客服主管帐号，进入抖音开发者平台选择你的小程序点进去后在 -「能力」-「互动能力」-「消息管理」-「抖音IM客服」-「开启功能」，开启客服功能后，需要绑定客服主管的抖音号。
 2. 在Hbuildx中创建项目编写代码：代码如下：

<template>
	<view>
		<view class="container" :style="{ 'background-image': 'url(' + backgroundUrl + ')' }"></view>
		<view class="button-container">
			<button open-type="im" :data-im-id="imId" @im="imCallback" @error="onimError" class="animate-button">
				点击咨询
			</button>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				imId: "输入你在后台绑定的客服主管的抖音号",
				backgroundUrl: '背景图路径',
			}
		},
		onLoad() {

		},
		methods: {
			imCallback: function(e) {
				console.log("跳转IM客服成功", e.detail);
			},
			onimError: function(e) {
				console.log("拉起IM客服失败", e.detail);
			}
		}
	}
</script>

<style>
	.container {
		/* 背景图覆盖整个元素 */
		background-size: cover;
		/* 背景图居中 */
		background-position: center;
		/* 固定定位 */
		position: fixed;
		/* 顶部对齐 */
		top: 0;
		/* 左边对齐 */
		left: 0;
		/* 宽度100% */
		width: 100%;
		/* 高度100% */
		height: 100%;
		/* 确保背景在其他内容之下 */
		z-index: -1;

	}

	.button-container {
		/* 绝对定位 */
		position: absolute;
		/* 距离底部10% */
		bottom: 25%;
		/* 居中水平 */
		left: 50%;
		/* 水平居中修正 */
		transform: translateX(-50%);

	}

	.animate-button {
		/* 内边距 */
		width: 150px;
		/* 文字大小 */
		font-size: 18px;
		/* 文字颜色 */
		color: #fff;
		/* 渐变背景色 */
		background-image: linear-gradient(to right, purple, blue);
		/* 移除边框 */
		border: none;
		/* 移除轮廓 */
		outline: none;
		/* 添加动画 */
		animation: pulse 2s infinite;
		/* 改变鼠标指针样式 */
		cursor: pointer;
		/* 圆角半径 */
		border-radius: 50px;
	}

	@keyframes pulse {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.3);
		}
	}
</style>

3. 常见问题解答：

        3.1、拉不起来会话怎么办？查看在hbuildx中配置的appid和在抖音开发者工具中配置的appid是否匹配，不匹配拉不起来我就遇到这个问题了，不知道为什么我在hbuildx里面配置了appid，运行到抖音开发者工具里面就不一样了！

        3.2、关于版本问题，使用的基础调试库一定要符合他们文档中说的，具体请查看文档。

        3.3、关于只配置了一个客服主管账号，我有多个客服，会自动转接分配吗？答案是会的，客服主管登录后可以添加10个客服号，用户拉起客服会话的时候会自动转发，他们的文档中写了客服消息分配机制：

按照以下优先级进行分配，暂不支持客服主管做设置。

1. 上次咨询过的客服
2. 当前饱和度较低的客服
3. 随机

看一下效果：使用真机的话可以直接发消息啥的，我用的工具能拉起来会话就行了！