微信小程序集成腾讯IM实时聊天功能全攻略
最近在公司微信小程序时，需要集成腾讯IM来实现实时聊天功能。这篇文章将记录我在集成过程中遇到的坑和解决方案，希望能帮助到有同样需求的者。
第一步：阅读官方文档
首先，集成任何第三方服务的第一步都是阅读官方文档。腾讯IM的文档地址是：cloud.tencent.com/document/pr…。文档中有一个“一分钟跑通demo”的教程，虽然看起来简单，但实际上并没有太大帮助，只能让你了解一些前期准备工作。
准备工作
在开始之前，你需要确保以下几点：
- 腾讯云账：你需要有一个可用的腾讯云账。
- 登录IM控制台：登录腾讯云的即时通信IM控制台。
- 创建应用：在控制台中添加一个新应用，创建应用后，你可以获取到应用的SDKAppId和密钥。
小提示：建议在创建应用后，下载demo源文件，后续会派上大用场。
常规集成
继续翻阅文档，真正符合我需求的还是“常规集成”这一部分。根据文档要求，首先需要安装依赖。其实你也可以直接将tim-wx.js文件拷贝到项目中，省去安装依赖的步骤。
遇到的第一个坑：ES6转码问题
在安装依赖并引用后，我遇到了第一个问题：引用依赖后报错。经过一番搜索，发现这是因为小程序开启了ES6转ES5的功能，导致async函数无法使用。
解决方案：
- 关闭ES6转ES5：这个方案不太可行，因为关闭后小程序其他地方的ES6代码会崩溃。
- 开启增强编译：这是最直接有效的解决办法。如果你没有这个选项，建议更新者工具到最新版本。
然而，开启增强编译后，问题依然存在。经过进一步排查，发现是调试基础库版本太旧了。更新到最新版本后，问题终于解决。
初始化IM
接下来就是按部就班地初始化IM了。直接从文档中代码，调用并执行。看到控制台输出成功信息后，心里总算松了一口气。
遇到的第二个坑：UserSig计算
在登录时，userID可以随便填一个测试值，但userSig需要通过计算生成。文档中提供了客户端计算的方法和源码，但源码是基于Vue模板的，对于原生JS项目来说不太友好。
解决方案：下载的demo源文件中有一个GenerateTestUserSig.js文件，这是原生的JS文件，直接引用即可。通过这个文件，成功生成了userSig。
登录IM
登录时需要注意，userID必须是字符串类型。成功登录后，IM功能基本跑通。
收发消息
收发消息的功能相对简单，直接调用接口即可。官方文档写得很清楚，没有遇到太多问题。通过监听事件，可以实时获取到对方发送的消息。
集成音视频功能
接下来是集成音视频功能。首先需要确保小程序支持<live-pusher>和<live-player>标签。音视频功能只能在真机上调试，者工具不支持。
遇到的坑：跑通demo时，发现SDKAppID没有正确修改。在TRTCCalling.js文件中，初始化实例时传入的SDKAppID需要改成自己的项目ID，否则会报错。
集成IM与音视频功能
将IM和音视频功能集成在一起时，发现会初始化两个不同的TIM实例，导致音视频功能报错。解决方案是只使用一个TIM实例，将IM的相关操作挂到音视频组件的实例上。
总结
通过以上步骤，成功将腾讯IM和音视频功能集成到微信小程序中。虽然过程中遇到了不少坑，但最终都一一解决了。希望这篇文章能帮助到有类似需求的者。
更新：解决TRTCCalling组件重复登录问题
在集成过程中，发现TRTCCalling组件在退出后重新进入时会出现重复登录的问题。经过，发现是因为每次进入页面时都会重新初始化TIM实例，导致重复发送信令。
解决方案：在组件初始化时，保持TIM实例的登录状态，避免重复登录。通过修改TRTCCalling.js文件，成功解决了这个问题。
结语
集成腾讯IM和音视频功能虽然复杂，但只要耐心阅读文档，逐步排查问题，最终都能顺利解决。希望这篇文章能为大家提供一些参考和帮助。如果有更好的解决方案，欢迎讨论！
