前言
公司業(yè)務(wù)需要，PC端，移動(dòng)端都用到了第三方 網(wǎng)易云信 IM 來(lái)實(shí)現(xiàn)在線客服咨詢。
在這當(dāng)中難免遇到一些需求是網(wǎng)易云信沒(méi)有提供领猾，需要自行編碼進(jìn)行擴(kuò)展的。寫(xiě)此篇文章的目的正是因業(yè)務(wù)需要骇扇，需要在網(wǎng)易云信的基礎(chǔ)上進(jìn)行消息類型的擴(kuò)展摔竿。
此篇文章里的代碼是基于 網(wǎng)易云信 NIM_Web_Demo_H5 進(jìn)行修改的
如下圖所示的消息類型
標(biāo)題是H5移動(dòng)版少孝，可想而知继低，肯定還有其他如 iOS版，Android版等稍走，不可能此類型的消息（我稱它為圖文消息）只支持Web袁翁，而在iOS或Android端無(wú)法顯示問(wèn)題。以下附上其他版本擴(kuò)展的鏈接婿脸，H5移動(dòng)版和 Web版 很相似粱胜，因?yàn)槎际鞘褂猛粋€(gè)sdk）
正文
- 將github上的工程
git clone或者下載到本地
node環(huán)境工程部署，將工程克隆到本地狐树，使用靜態(tài)服務(wù)啟動(dòng)本工程焙压。
npm installnpm run server- 在瀏覽器中訪問(wèn)
http://127.0.0.1:2001
- 運(yùn)行沒(méi)有問(wèn)題后，修改文件配置 config.js 中的
appKey，將demo修改為自己所用涯曲。
//...
let appConfig = {
// 用戶的appkey
// 用于在web demo中注冊(cè)賬號(hào)異步請(qǐng)求demo 服務(wù)器中使用
test: {
appkey: '填入自己的appkey',
postUrl: 'https://apptest.netease.im'
},
online: {
appkey: '填入自己的appkey',
postUrl: 'https://app.netease.im'
}
};
//...
- 添加觸發(fā)自定義消息發(fā)送功能野哭，主要用于我們開(kāi)發(fā)調(diào)試。
這個(gè)功能主要用于我們給網(wǎng)站用戶發(fā)送促銷或活動(dòng)等使用幻件，圖文鏈接消息的發(fā)送功能不開(kāi)放給用戶拨黔。下圖給出示例圖，當(dāng)用戶點(diǎn)擊咨詢時(shí)傲武，我們自動(dòng)給他回復(fù)一條圖文鏈接消息蓉驹。
編輯 ChatEditor.vue揪利，在sendTextMsg函數(shù)中添加如下代碼，正式上線后狠持，此處應(yīng)該注釋掉疟位。
if (/^\s*$/.test(this.msgToSent)) {
this.$vux.alert.show({
title: '請(qǐng)不要刷屏'
});
return;
// 添加以下代碼是用來(lái)開(kāi)發(fā)調(diào)試發(fā)送自定義的消息類型，當(dāng)發(fā)送 custom 給對(duì)方時(shí)進(jìn)入該邏輯
} else if (this.msgToSent == 'custom') {
let content = {
type: 5, // 自定義消息類型為5喘垂，此處的消息類型必須和其他平臺(tái)的圖文消息類型一致
data: {
title: '暖冬季歡樂(lè)送', // 消息標(biāo)題
describe: '家具滿1000元減100元再返100元現(xiàn)金券甜刻！點(diǎn)擊查看詳情！', // 消息描述
link_url: 'http://www.reibang.com/p/dadd344b6413', // 點(diǎn)擊跳轉(zhuǎn)的URL
image_url: 'https://netease.im/res/image/download/section1.png?v=002' // 消息中的圖片地址
}
};
this.$store.dispatch('sendMsg', {
type: 'custom',
scene: this.scene,
to: this.to,
pushContent: this.pushContent,
content: content
});
return;
} else if (this.msgToSent.length > 800) {
//...
}
如上操作完成后正勒，重新 npm run start得院，然后嘗試發(fā)送 custom 給對(duì)方時(shí)顯示如下。
顯示[自定義消息]祥绞，這個(gè)不是我們所期待的，所以接下在添加代碼使其顯示正常
- 自定義消息的顯示
自定義消息類型的顯示在 ChatItem.vue 的beforeMount函數(shù)中處理鸭限，添加如下代碼
// 此處省略前面代碼
} else if (content.type === 3) {
// ......
// type 5 為圖文鏈接消息
} else if (content.type === 5) {
let obj = content.data;
item.showText = `<a class="imgtxt" href=${obj.link_url} target="_blank">`;
item.showText += `<div class="imgtxt-title">${obj.title}</div>`;
if (obj.image_url && obj.image_url.trim() != '') {
item.showText += `<img class="imgtxt-img" src=${obj.image_url} />`;
}
if (obj.describe && obj.describe.trim() != '') {
item.showText += `<div class="imgtxt-describe">${obj.describe}</div>`;
}
item.showText += `</a>`;
} else {
item.showText = util.parseCustomMsg(item);
if (item.showText !== '[自定義消息]') {
item.showText += ',請(qǐng)到手機(jī)或電腦客戶端查看';
}
} else if (item.type === 'image') {
//...
}
上面添加后蜕径，還需在 unit.css 中 .u-msg 里添加對(duì)應(yīng)的樣式屬性，代碼如下
.button {
margin: 0.1rem 0;
padding: 0.1rem 0.2rem;
border: 1px solid #fff;
border-radius: 0.2rem;
background-color: $color_nav_active_background;
color: #666;
}
// 從這開(kāi)始
.imgtxt {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background-color: #fff;
.imgtxt-title {
color: #333;
line-height: 24px;
font-size: 14px;
font-weight: bold;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-moz-line-clamp: 1;
-webkit-line-clamp: 1;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
padding: 5px 15px;
}
.imgtxt-img {
border-top: 1px #e6e6e6 solid;
border-bottom: 1px #e6e6e6 solid;
margin: 0 15px;
max-width: 100% !important;
max-height: 160px !important;
vertical-align: bottom;
}
.imgtxt-describe {
color: #666;
font-size: 12px;
text-align: left;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-moz-line-clamp: 3;
-webkit-line-clamp: 3;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
padding: 5px 15px;
}
}
以上操作完成后败京，重新運(yùn)行 npm run start兜喻，然后測(cè)試。
尾篇
到此赡麦，云信H5移動(dòng)端的擴(kuò)展自定義消息已經(jīng)完成朴皆。當(dāng)然，這只是Web H5的顯示正常了泛粹，其他如Android车荔，iOS，pc等客戶端收到此類的消息戚扳，顯示有問(wèn)題忧便，也是需要擴(kuò)展調(diào)整的。此篇文章其他端的文章我會(huì)陸續(xù)更新，如果有需要的同學(xué)可以關(guān)注下珠增。
以下附上其他版本擴(kuò)展的鏈接
