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