uniapp 微信小程序 引入 環信聊天

最近項目需要實現一個聊天的功能，群聊或者單聊，用到環信，根據官網實現一下相關的配置吧

 

 

第一：下載環信demo  地址：https://github.com/easemob/webim-uniapp-demo

第二：將demo中的 newSDK 和 utils 文件夾放到自己的項目中 （utils文件中只需要下面兩個js文件就可以）

 

 

 第三：修改 WebIMConfig.js文件夾中的 appkey值

 

 

 appkey值的查找方法： 登錄環信 ：https://www.easemob.com/download/demo 自己創建一下，創建好了后可以拿到appkey值

 

 

 

到這一步我們的配置基本就算完成了

第四：在APP.vue中掛載

onLaunch: function() {
      this.HXlisten()
},
methods:{
            HXlisten(){
                console.log('<<<<<<環信監聽')
                uni.WebIM.conn.listen({
                    onOpened: function () {
                            console.log('>>>>>>環信登錄成功啦')
                        },                  //連接成功回調 
                    onClosed: function () {},                  //連接關閉回調
                    onTextMessage: function ( message ) {},    //收到文本消息
                    onEmojiMessage: function ( message ) {},   //收到表情消息
                    onPictureMessage: function ( message ) {}, //收到圖片消息
                    onCmdMessage: function ( message ) {},     //收到命令消息
                    onAudioMessage: function ( message ) {},   //收到音頻消息
                    onLocationMessage: function ( message ) {},//收到位置消息
                    onFileMessage: function ( message ) {},    //收到文件消息
                    onCustomMessage: function ( message ) {},  //收到自定義消息
                    onVideoMessage: function (message) {
                        var node = document.getElementById('privateVideo');
                        var option = {
                            url: message.url,
                            headers: {
                              'Accept': 'audio/mp4'
                            },
                            onFileDownloadComplete: function (response) {
                                var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response);
                                node.src = objectURL;
                            },
                            onFileDownloadError: function () {
                                console.log('File down load error.')
                            }
                        };
                        WebIM.utils.download.call(conn, option);
                    },   //收到視頻消息
                    onPresence: function ( message ) {},       //處理“廣播”或“發布-訂閱”消息，如聯系人訂閱請求、處理群組、聊天室被踢解散等消息
                    onRoster: function ( message ) {},         //處理好友申請
                    onInviteMessage: function ( message ) {},  //處理群組邀請
                    onOnline: function () {},                  //本機網絡連接成功
                    onOffline: function () {},                 //本機網絡掉線
                    onError: function ( message ) {},          //失敗回調
                    onBlacklistUpdate: function (list) {       //黑名單變動
                        // 查詢黑名單，將好友拉黑，將好友從黑名單移除都會回調這個函數，list則是黑名單現有的所有好友信息
                        console.log(list);
                    },
                    onRecallMessage: function(message){},      //收到撤回消息回調
                    onReceivedMessage: function(message){},    //收到消息送達服務器回執
                    onDeliveredMessage: function(message){},   //收到消息送達客戶端回執
                    onReadMessage: function(message){},        //收到消息已讀回執
                    onCreateGroup: function(message){},        //創建群組成功回執（需調用createGroupNew）
                    onMutedMessage: function(message){},       //如果用戶在A群組被禁言，在A群發消息會走這個回調並且消息不會傳遞給群其它成員
                    onChannelMessage: function(message){}      //收到整個會話已讀的回執，在對方發送channel ack時會在這個回調里收到消息
                }); } },

到此為止，環信的項目就引入進來並且配置好了 ，具體配置可以參考官方文檔 ：https://docs-im.easemob.com/im/web/intro/basic