小程序引入腾讯IM实现即时通讯

记录一下小程序引入腾讯第三方SDK包 实现即时通讯功能，就是常见的客服聊天功能，

腾讯IM官方文档

踩坑开发完整个项目，当初碰到问题时，网上可参考的信息几乎为零，马马虎虎整理一下 希望对大家有所帮助。

由于小程序项目使用的原生开发，没有使用wepy等小程序框架，所以开发起来踩的坑还是很多的，下面总结一下。

1. 官方有个demo按照步骤执行就行，申请下’SDKAppID’ 这个在后边用得到demo流程，demo运行起来发现没有原生demo，官方是通过vue预编辑转换的wxml代码，乖乖看文档吧。

2. 引入SDK包

// IM 小程序 SDK 
npm install tim-wx-sdk --save 
// 发送图片、文件等消息需要的 COS SDK 
npm install cos-wx-sdk-v5 --save 
//若同步依赖过程中出现问题，请切换 npm 源后再次重试。 
npm config set registry http://r.cnpmjs.org/

3. 项目中引用

小程序引入第三方包的时候，需要在工具栏构建一下npm环境，本地设置也要配置一下；
如果构建时候报错，执行上边导入SDK指令前 npm install 一下；
配置完成后根目录会出现一个miniprogram_npm文件；

下面代码就是在需要使用的js脚本中引入

import TIM from 'tim-wx-sdk';
import COS from "cos-wx-sdk-v5";
let options = {
    SDKAppID: 0 // 控制台的SDKAppID 一个项目一个 };
// 创建 SDK 实例，`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例 
let tim = TIM.create(options); 
// SDK 实例通常用 tim 表示 // 设置 SDK 日志输出级别，详细分级请参见 setLogLevel 接口的说明 	tim.setLogLevel(0); 
// 普通级别，日志量较多，接入时建议使用 // tim.setLogLevel(1); // release 级别，SDK 输出关键信息，生产环境时建议使用 // 注册 COS SDK 插件 tim.registerPlugin({'cos-wx-sdk': COS});

4. 项目中引用

使用IM需要先授权登录 userID、userSig这两个参数需要后台接口返回、根据这个判断当前登录人是谁。

let promise = tim.login({
    userID: “userID”, userSig: “userSig” });  
promise.then(function (imResponse) {
   
console.log(imResponse.data, "登录成功"); // 登录成功      
 if (imResponse.data.repeatLogin === true) {
                                          
     // 标识账号已登录，本次登录操作为重复登录。v2.5.1 起支持     
       console.log(imResponse.data.errorInfo);                          
    }
}).catch(function (imError) {
   
 	console.warn('login error:', imError); // 登录失败的相关信息                                     
 });

本地调试的时候授权登录完之后，代码修改更新后，IM登录失效、真机暂时没有发现、为了防止出现bug，在首页的onshow加了个判断，监听 sdk 是否处于 ready 状态。IM授权登录文档

登陆成功之后就可以调用API文档内的代码块了，实现一些基础功能文本、图片、语音功能基础功能

5.示例代码

wxml:

在这里插入代码片<scroll-view  bindscroll="refresh" scroll-into-view="{
   {toView}}" style="height: {
   {scroll_height}}px;" upper-threshold="100" scroll-y="true" enable-back-to-top="true" class="message-list">
  <!-- 每一行 -->
  <view class="row" wx:for="{
   {messages}}" wx:key="{
   {index}}" id="row_{
   {index}}">
    <!-- 日期 -->
    <view class="datetime" wx:if="{
   {item.msgTime != ''}}">{
   {
   item.msgTime}}</view>
    <!-- 头像与内容文本 -->
    <view class="body" style="flex-flow: {
   {item.flow == 'in' ? 'row' : 'row-reverse'}}">
      <view class="avatar-container">
        <image wx:if="{
   {item.flow=='in'}}" class="avatar" src="{
   {friendAvatarUrl}}" />
        <image wx:else class="avatar" src="{
   {userData.avatarUrl}}" />
      </view>
      <!-- 画对话框 -->
      <view class="triangle" style="{
   {item.flow == 'out' ? 'right: 140rpx; background: #7ECB4B' : 'left: 140rpx;'}}"></view>
      <view class="content" style="{
   {item.flow == 'out' ? 'background: #7ECB4B' : ''}}">
        <view wx:if="{
   {item.type === 'TIMTextElem'}}">{
   {
   item.payload.text}}</view>
        <image class="image-message" wx:elif="{
   {item.type === 'TIMImageElem'}}" src="{
   {item.payload.imageInfoArray[1].url}}" bindtap="previewImage" data-src="{
   {item.payload.imageInfoArray[1].url}}"></image>
        <view wx:elif="{
   {item.type === 'TIMSoundElem'}}" url="{
   {item.payload.url}}">
          <view class="box" bindtap="openAudio" data-eventid="{
   {'13_'+index}}"  data-time="{
   {item.payload.second}}" data-comkey="{
   {item.payload.url}}">
            <image  src="{
   {'13_'+index==audioIndex?audioGif:audioPng}}" style="height:22px;width:22px" class="_image"></image>
            <view style="padding-left: 4px;" class="_div data-v-afeb3abc">
              {
   {
   item.payload.second<1?1:item.payload.second}}s
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</scroll-view>
<view class="reply" style="bottom:{
   {reply_height}}px;">
  <view class="Audio">
    <image wx:if="{
   {opration==true}}" bindtap="Audio" src="../image/Audio.png"></image>
    <image wx:else bindtap="keyboard" src="../image/keyboard.png"></image>
  </view>
  <view class="opration-area">
    <input bindfocus="bindfocus" wx:if="{
   {opration==true}}" type="text" bindinput="getContent" value="{
   {content}}" />
    <view wx:else class="voice-button {
   {touchBtn?'hoverBtn':''}}" bind:touchstart="startAudio" bind:touchend="onTouchEnd" bind:longpress="onLongpress" bind:touchmove="onTouchMove">
      {
   {
   touchBtn?'松开 结束':'按住说话'}}
    </view>
  </view>
  <view class="{
   {sendBtn==true?'send':'sendActive'}}" bindtap="sendMsg">发送</view>
  <view class="add" bind:tap="moreClick">
    <image class="more" src="../image/more.png"></image>
  </view>
  <!-- <view class="send" bindtap="sendImg">相册</view>
  <view class="send" bindtap="startAudio">开始</view