Taro框架下用react开发抖音小程序时跳转抖音IM客服填坑指北

有个抖音小程序项目需要用到客服(这是废话，用不到就不用头疼这一块了)

直接开始正题：

抖音文档说 要想跳转到IM客服，需要在button上设置

<Button
	open-type="im"
	data-im-id="客服主管号"
	...
>客服</Button>

在react下一般都是小驼峰，并且data-im-id在taro框架下会在打包的时候给清除掉，所以需要用到一个库给组件添加自定义属性：

// 这个库是为了能给taro的系统组件、事件等添加一些自定义的属性的，
// 这里不再过多介绍，有兴趣的同学可以去看一下这个库的文档。
npm i @tarojs/plugin-inject@3.6.19 

然后在项目下/config/index.js文件中添加如下配置：
注意看注释，解释都在注释里了

plugins: [
    [
      "@tarojs/plugin-inject",
      {
        components: {
        // 给button组件添加自定义事件
          Button: {
          // 正常情况下需要添加小驼峰的dataImId 属性，taro会转换成 data-im-id
          // 但是 ，关键的来了，如果你只加了这一个自定义属性，那么恭喜你，
          // 明明已经转换成了，但还是会报错： data-im-id is required 巴拉巴拉巴拉
            dataImId: "",
            // 解决上面的问题的办法来了，就是再添加一个带横杠的 data-im-id
            // 不知道原理是啥，反正能用。 有懂的同学请不吝赐教。
            "data-im-id": "",
            // 这个是没走通之前添加了看报错的，后面没有去掉，
            // 也没有详细测试去掉会不会有影响，建议保留
            onerror: "eh",
          },
        },
      },
    ],
  ],

以上是配置，接下来就是正式使用了，这个到是很简单：

<Button
    className="btn"
    openType="im"
    dataImId="客服主管抖音号"
>客服</Button>

注意，注意，这里要的是客服主管抖音号，就是你在抖音后台配置完抖音IM客服之后下方出现的表格的第一列，绑定的抖音号，抖音客服网页内配置的子账号貌似是不能跳的(这里测试的时候没有太留意，大概印象是这样，不想再回头测试这一点了，专门测试过的同学可以留个言给我说一下是不是这样。)

over