請在github fork代碼,如果發(fā)現有bug或有有趣的想法可以提交issue,我會定期采納。
?? 需要現成的vue Im的請進:http://www.itdecent.cn/p/3914f1a8e1ef
vue版IM的github 鏈接:https://github.com/walk-liuyan/vue-im
不解可以留言,期待你有意義的問題??
【看完該教程,能滿足使用demo嵌入自己的項目中】
1天前,boss想要把web云信嵌入目前正在開發(fā)的網站業(yè)務中,我當時一臉懵逼,內心是有點恐懼的。然后文檔看一半,就跑著網上去找有沒有經驗帖!沒有!!
雖然現在用完也覺得很簡單,但是剛接觸的時候有點不知所措。
1、入手前,閱讀
http://dev.netease.im/docs/product/音視頻通話/新手接入指南
2、到github上面下載demo
https://github.com/netease-im/NIM_Web_Demo
打開terminal,進入文件夾,然后輸入 node app
這時候到瀏覽器輸入:http://localhost:8888/webdemo/im/index.html進行預覽
官方demo,就可以隨便玩啦。這時候的demo鏈接的是網易云的服務器和網易云demo應用的keyapp。
3、進入demo進行參數修改,讓其為自己所用
(1)進入config.js進行keyapp的更換。

image.png
將你公司網易云賬號中應用的密鑰填入紅框內的appkey
(2)這時候你要將登錄的信息發(fā)送給自己公司的服務器,服務器會返回相關數據。
進入login.js,將requestLogin改成如下:
requestLogin: function(account, pwd) {
$.ajax({
type: 'POST',
url: "https://XXXXXlogin",//自己公司的login的網址
data: JSON.stringify({
username:account ,
password:pwd,
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
}).then((res)=>{
console.log('res', res)
setCookie('uid',res.data.neteaseAccid);
//括號里的內容換成后端程序員哥哥給你返回的id和token
setCookie('sdktoken',res.data.neteaseToken);
window.location.href = './main.html';
});
},
如圖是后端程序員哥哥該返回給你的數據:

image.png
(3)這個時候,你就能正常登錄啦?。〝祿炖锏挠脩舳伎梢缘卿浝玻?br>
這個時候我碰到一個問題,就是頭像圖片請求400
數據庫里程序員哥哥通常都是存原始url給你。但是在demo文件中的util.js中會給你添加一些參數,

image.png
在我的案例里面,我將代碼變成了:
return url + "?thumbnail=80x80&quality=85";
4 、完成云信基本使用。
大家可以看公司需求修改樣式之類的東西。
預覽界面:

image.png