1，分包处理
除了tabBar用的页面首页外，其他都放到分包里面，具体看分包的方法，components里的公共组件，分包用到的也放到分包里面。
2，引入腾讯即时通讯IM 会 增大主包大小（800k左右）官方客服说的。所以尽量留出这个大小。
引入腾讯即时通讯IM 要用 《无UI集成方案》这个会小一些，千万不要用《含UI集成方案》；自己来写后面的通话之类的逻辑。这些逻辑放到分包里面，就不用占用主包大小
安装 无UI集成方案 按照官方的文档就可以
我这边只是用到了 1v1 的聊天功能，如下
（1），在您的项目中使用 npm 安装相应的 IM SDK 依赖。
npm install @tencentcloud/chat
相对于 集成方案里的 npm i @tencentcloud/chat-uikit-uniapp unplugin-vue2-script-setup 小很多
官方提供的 后两个依赖，我聊天 所有不用，就没有安装
（2），引入模块，在main.js 文件中加入，最后两句非常重要，咱们在后面的页面要用到
import TencentCloudChat from '@tencentcloud/chat';
let options = {
SDKAppID: 0 // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
};
let chat = TencentCloudChat.create(options); // SDK 实例通常用 chat 表示
chat.setLogLevel(0);
Vue.prototype.chat = chat
Vue.prototype.TencentCloudChat = TencentCloudChat（3），登录==可以在进入对话之前就完成登录的操作,这样就可以一直保持登录的状态，防止初始化未完成就进入对话无法完成操作
<template>
<view>
<view id="j_page">
<view v-for="(item, index) in messageList" :key="index">
<!-- 第一条必显示时间 返回的是时间戳自己转化一下-->
<view v-if="index == 0">{{ item.time }}</view>
<view v-else-if="item.time - messageList[index - 1].time >= 600">{{ item.time }}</view>
<!--聊天的左右自行添加样式-->
<view><image class="msg-main-r-message-avatar-container-image" :src="item.avatar"></image>{{item.payload.text }}</view>
</view>
</view>
<view>
<input placeholder="请输入内容" v-model="msg" @confirm="sendMsg"></input>
<view @click="sendMsg">发送</view>
</view>
</view>
</template>
<script>
export default {
components: { },
data() {
return {
userID: '你的 userID',
C2Cid: '对方的 C2Cid',
userSig: '',
messageList: [],
msg: '',
}
},
onLoad(option) {
},
onShow() {
this.loginBox()
},
onReachBottom() {
},
onReady() {
},
mounted() {
let onMessageReceived = function (event) {
this.messageList.push(event.data[0])
this.scrollToBottom()
};
this.chat.on(this.TencentCloudChat.EVENT.MESSAGE_RECEIVED, onMessageReceived, this);
let onSdkReady = function (event) {
console.log('SDK初始化完成');
this.sendFriend(this.C2Cid)
this.getMessageListBox(this.C2Cid)
this.setMessageReadBox(this.C2Cid)
};
this.chat.on(this.TencentCloudChat.EVENT.SDK_READY, onSdkReady, this);
},
methods: {
// 登录===================
// userSig 后台获取，或者通过 debug文件夹中的 GenerateTestUserSig.js 获取
loginBox() {
var _this = this
let promise = this.chat.login({ userID: this.userID, userSig: this.userSig });
promise.then(function (imResponse) {
console.log('登录成功2====>', imResponse.data); // 登录成功
if (imResponse.data.repeatLogin === true) {
// 标识账号已登录，本次登录操作为重复登录。
console.log(imResponse.data.errorInfo);
_this.sendFriend(_this.C2Cid)
_this.getMessageListBox(_this.C2Cid)
_this.setMessageReadBox(_this.C2Cid)
}
}).catch(function (imError) {
console.warn('login error:', imError); // 登录失败的相关信息
});
},
// 获取会话资料===================
sendFriend(id) {
var _this = this
let promise = this.chat.getConversationProfile(id);
promise.then(function (imResponse) {
_this.conversation = imResponse.data.conversation
}).catch(function (imError) {
console.warn('getConversationProfile error:', imError); // 获取会话资料失败的相关信息
});
},
// 获取历史消息===================
getMessageListBox(C2CuserID) {
var _this = this
// 打开某个会话时，第一次拉取消息列表
let promise = this.chat.getMessageList({ conversationID: C2CuserID });
promise.then(function (imResponse) {
const messageList = imResponse.data.messageList; // 消息列表。
_this.messageList = messageList
_this.scrollToBottom()
});
},
// 到底部
scrollToBottom() {
wx.createSelectorQuery().select('#j_page').boundingClientRect(function (rect) {
// 使页面滚动到底部
wx.pageScrollTo({
scrollTop: rect.bottom
})
}).exec()
},
// 发送消息===================
sendMsg() {
var _this = this
// 发送文本消息，Web 端与小程序端相同
// 1. 创建消息实例，接口返回的实例可以上屏
let message = this.chat.createTextMessage({
to: this.conversation.userProfile.userID,
conversationType: this.TencentCloudChat.TYPES.CONV_C2C,
payload: {
text: this.msg
},
});
// 2. 发送消息
let promise = this.chat.sendMessage(message);
promise.then(function (imResponse) {
// 发送成功
_this.messageList.push(imResponse.data.message)
_this.scrollToBottom()
_this.msg = ''
}).catch(function (imError) {
// 发送失败
console.warn('sendMessage error:', imError);
});
},
// 将某会话下所有未读消息已读上报===================
setMessageReadBox(e) {
// 将某会话下所有未读消息已读上报
let promise = this.chat.setMessageRead({ conversationID: e });
promise.then(function (imResponse) {
// 已读上报成功，指定 ID 的会话的 unreadCount 属性值被置为0
}).catch(function (imError) {
// 已读上报失败
console.warn('setMessageRead error:', imError);
});
}
}
}
</script>
<style lang="scss" scoped></style>最后看一下依赖分析的大小
0 个评论
要回复文章请先登录或注册