【即时通讯】一篇文章让你实现面对面聊天
官方文档地址:https://cloud.tencent.com/document/product/269/36887
本文主要概述使用小程序实现即时通讯功能
1.下载官方demo
下载地址:https://github.com/tencentyun/TIMSDK/tree/master/MiniProgram/IMSDK
2.将IM集成进你的项目
我们如果想在自己的项目中使用IM即时通讯的话,首先要把需要的文件引入项目中
- debug 配置信息
- pages 基本页面
- static 图片、图标、js文件
- TUI-CustomService 聊天页主文件夹
- TUI-VideoCall 视频文件夹
- utils 所需要的工具类
- app.js 登陆、注册IM全局监听事件等
建议以上文件全量引入,后期可根据自己需求酌情删除
1. debug 配置
// 当前所在文件 ------ GenerateTestUserSig.js
// 这个文件不需要修改,直接引入即可
import LibGenerateTestUserSig from './lib-generate-test-usersig-es.min.js'
// 这里的 APPID 和 KEY 配置成自己的
// 你可以理解为只有 APPID 和 KEY 匹配,才是相同的聊天软件
const _SDKAPPID = 14512233;
const _SECRETKEY = '0d3b7a009b4d64';
// userSig 如果不正式上线,可使用IM自身方法生成
// APPID KEY userSig都是 IM 登陆必备参数,缺一不可
2. app.js 配置
// 这里有两个可选项 tim-wx-friendship.js tim-wx-sdk.js
// 前者比后者多了好友关系,且体积较大,可根据需求自行选择引入
import TIM from './static/tim-wx-friendship';
// IM文件上传插件,如未使用可不引入
import TIMUploadPlugin from './static/tim-upload-plugin';
// IM自定义输出文件
import logger from './utils/logger';
import Aegis from './static/aegis';
// 引入 debug 下的 SDKAPPID 并使用该 ID 登陆
import { SDKAPPID } from './debug/GenerateTestUserSig'
App({
onLaunch() {
// 调用初始化方法
this.aegisInit()
wx.aegis.reportEvent({
name: 'time',
ext1: 'first-run-time',
ext2: 'imTuikitExternal',
ext3: this.globalData.SDKAppID,
});
wx.setStorageSync('islogin', false);
const { SDKAppID } = this.globalData;
wx.setStorageSync(`TIM_${SDKAppID}_isTUIKit`, true);
wx.$TUIKit = TIM.create({ SDKAppID: this.globalData.SDKAppID });
wx.$TUIKit.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });
wx.$TUIKitTIM = TIM;
wx.$TUIKitEvent = TIM.EVENT;
wx.$TUIKitVersion = TIM.VERSION;
wx.$TUIKitTypes = TIM.TYPES;
// 监听系统级事件
wx.$TUIKit.on(wx.$TUIKitEvent.SDK_NOT_READY, this.onSdkNotReady);
wx.$TUIKit.on(wx.$TUIKitEvent.KICKED_OUT, this.onKickedOut);
wx.$TUIKit.on(wx.$TUIKitEvent.ERROR, this.onTIMError);
wx.$TUIKit.on(wx.$TUIKitEvent.NET_STATE_CHANGE, this.onNetStateChange);
wx.$TUIKit.on(wx.$TUIKitEvent.SDK_RELOAD, this.onSDKReload);
wx.$TUIKit.on(wx.$TUIKitEvent.SDK_READY, this.onSDKReady);
onShow() {
// 保持屏幕常亮
wx.setKeepScreenOn({
keepScreenOn: true,
})
},
aegisInit() {
wx.aegis = new Aegis({
id: 'iHWefAYHDK', // 项目key
reportApiSpeed: true, // 接口测速
reportAssetSpeed: true, // 静态资源测速
pagePerformance: true, // 开启页面测速
});
},
// TODO:
resetLoginData() {
this.globalData.expiresIn = ''
this.globalData.sessionID = ''
this.globalData.userInfo = {
userID: '',
userSig: '',
token: '',
phone: '',
};
this.globalData.userProfile = null;
logger.log(`| app | resetLoginData | globalData: ${this.globalData}`);
},
globalData: {
// userInfo: userID userSig token phone
userInfo: null,
isTUIKit: true,
// 个人信息
userProfile: null,
headerHeight: 0,
statusBarHeight: 0,
SDKAppID: SDKAPPID,
},
onKickedOut() {
wx.showToast({
title: '您被踢下线',
icon: 'error',
})
wx.navigateTo({
url: './pages/TUI-Login/login',
})
},
})
app.json 配置
{
"pages": [
"pages/TUI-Login/login",
"pages/TUI-Index/index",
"pages/TUI-User-Center/mine/mine",
"pages/TUI-User-Center/about/about",
"pages/TUI-User-Center/personal/personal",
"pages/TUI-User-Center/cancel/cancel",
"pages/TUI-User-Center/webview/webview"
],
"plugins": {
"myPlugin": {
"version": "1.0.3",
"provider": "wxb302e0fc8ab232b4"
}
},
"tabBar": {
"list": [
{
"pagePath": "pages/TUI-Index/index",
"text": "首页",
"iconPath": "./static/images/homepage-normal.png",
"selectedIconPath": "./static/images/homepage-hover.png"
},
{
"pagePath": "pages/TUI-User-Center/mine/mine",
"text": "我的",
"iconPath": "./static/images/mine-normal.png",
"selectedIconPath": "./static/images/mine-hover.png"
}
]
},
"subPackages":[
{
"root":"TUI-CustomerService",
"name": "TUI-CustomerService",
"pages": [
"pages/TUI-Conversation/conversation/conversation",
"pages/TUI-Chat/chat",
"pages/TUI-Conversation/create-conversation/create",
"pages/TUI-Group/create-group/create",
"pages/TUI-Group/join-group/join",
"pages/TUI-Group/memberprofile-group/memberprofile"
],
"independent": false
},
{
"root": "TUI-VideoCall",
"name": "TUI-VideoCall",
"pages": [
"pages/TUI-VideoCall/callkit-index/index",
"pages/TUI-VideoCall/callkit-room/room"
]
}
],
"preloadRule": {
"pages/TUI-Index/index" :{
"network": "all",
"packages": [
"TUI-CustomerService"
]
}
},
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "TUIKit",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"style": "v2"
}
最后:配置完成后根据小程序路径跳转响应页面即可,持续更新中。。。