因为我们的项目使用的是原生的小程序开发，类似融云 环信 网易云信都是uniapp版本的，腾讯IM有个原生的带UI的，所以最后选择腾讯IM
- 考虑到主包空间有限，IM的UI框架比较大，建一个packageIM的分包，在app.json里subPackages增加
{
"root": "packageIM",
"name": "packageIM",
"pages": [
"pages/im_customer/index"
]
}
- 在分包packageIM下新建package.json，然后安装， 构建 npm：微信开发者工具-工具-选择构建 npm
npm init
npm i @tencentcloud/chat-uikit-wechat
在project.config.json文件配置分包的npm
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
},
{
"packageJsonPath": "./packageIM/package.json",
"miniprogramNpmDistDir": "./packageIM/"
},
{
"packageJsonPath": "./packageCommunity/package.json",
"miniprogramNpmDistDir": "./packageCommunity/"
}
],
-
将 TUIKit 文件夹复制到分包目录下，成功后的目录结构：
image.png 分别在wxml、index.json、index.js里写
<view>
<TUIKit config="{{config}}" conversationID='{{conversationID}}' id="TUIKit"></TUIKit>
</view>
{
"usingComponents": {
"TUIKit": "../../TUIKit/page/index"
},
"navigationStyle": "custom"
}
// packageIM/pages/im_customer/index.js
Page({
/**
* 页面的初始数据
*/
data: {
conversationID: '',
user_id: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.setData({
user_id: options.user_id,
conversationID: 'C2C' + options.user_id
})
const TUIKit = this.selectComponent('#TUIKit');
TUIKit.init();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
- IM登录方法，这边需要后台配合绑定一下userid，具体的逻辑看你们自己的业务
import TIMUploadPlugin from 'tim-upload-plugin';
import TIMProfanityFilterPlugin from 'tim-profanity-filter-plugin';
IMLogin() {
const userInfo = getApp().globalData.userInfo;
console.log('IM:登录', userInfo)
const userSig = userInfo.userSig;
const userId = userInfo.userId;
const SDKAppID = getApp().globalData.config.appInfo.IMAppID;
if (userId && userSig) {
// IM 处理
wx.$TUIKit = TencentCloudChat.create({
SDKAppID: SDKAppID,
});
wx.$chat_SDKAppID = SDKAppID;
wx.TencentCloudChat = TencentCloudChat;
wx.$chat_userID = userId;
wx.$chat_userSig = userSig;
wx.$TUIKit.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });
wx.$TUIKit.registerPlugin({ 'tim-profanity-filter-plugin': TIMProfanityFilterPlugin });
wx.$TUIKit.login({
userID: userId,
userSig
});
// 监听系统级事件
wx.$TUIKit.on(wx.TencentCloudChat.EVENT.SDK_READY, this.onSDKReady,this);
}
},
onSDKReady(event) {
// 监听到此事件后可调用 SDK 发送消息等 API，使用 SDK 的各项功能。
console.log('IM:监听到event事件',event)
},
-
最后的效果如下
IMG_9170.PNG
