最近项目需要实现一个聊天的功能,群聊或者单聊,用到环信,根据官网实现一下相关的配置吧

第一:下载环信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

uniapp 微信小程序 引入 环信聊天的更多相关文章

  1. 微信小程序 使用环信聊天工具

    当时做微信小程序环信的时候,没有遇到太多的问题,因为找到了一个例子,有兴趣的朋友可以把这个包下载下来看一下,写的超级的号,使用起来也特别简单,appkey需要自己配置,从环信官网https://con ...

  2. uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

    uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...

  3. 微信小程序引入md5.js

    今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of t ...

  4. 微信小程序引入ECharts组件

    首先打开ECharts网页 https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8 ...

  5. uniapp 微信小程序 配置分享朋友和朋友圈

    uniapp 微信小程序 配置分享朋友和朋友圈 首先在小程序中配置微信分享,和微信朋友圈, onShareAppMessage, onShareTimeline 这两个API 和 onLoad 同级目 ...

  6. uni-app微信小程序开发之引入腾讯视频小程序播放插件

    登录微信小程序管理后台添加腾讯视频播放插件: 正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示: 在uni-app中引入插件代码 ...

  7. 【重点突破】—— UniApp微信小程序开发教程学习Three

    一.实战 HBuilderX:在微信小程序中运行页面,需要设置->安全 开启微信小程序服务端口,HBuilder工具->设置->配置程序路径 网络请求.模板语法.打开页面.页面传参 ...

  8. 【重点突破】—— UniApp 微信小程序开发官网学习Two

    一.使用Vue.js注意事项 Vue.js在uni-app中使用的差异: 新增:uni-app除了支持Vue实例的生命周期,还支持应用启动.页面显示等生命周期 受限:发布到H5时支持所有vue的语法, ...

  9. 微信小程序发送短信验证码完整实例

    微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class=&quo ...

随机推荐

  1. Optional源码解析与实践

    1 导读 NullPointerException在开发过程中经常遇到,稍有不慎小BUG就出现了,如果避免这个问题呢,Optional就是专门解决这个问题的类,那么Optional如何使用呢?让我们一 ...

  2. 自然语言处理NLP程序包(NLTK/spaCy)使用总结

    NLTK和SpaCy是NLP的Python应用,提供了一些现成的处理工具和数据接口.下面介绍它们的一些常用功能和特性,便于对NLP研究的组成形式有一个基本的了解. NLTK Natural Langu ...

  3. .net程序员的android studio 初体验 (环境设置2022年10月)

      很久以前用DevExtreme写的一个Hybird APP要添加蓝牙打印功能,但是用来打包APP的phonegap被adobe关闭了,所以,只能自己用cordova去打包安卓APP,不得已,研究了 ...

  4. ES6中的数组reduce()方法详解

    reduce() 方法对数组中的每个元素执行一个由我们提供的reducer函数(升序执行),将其结果汇总为单个返回值. 1. 语法reduce说明 arr.reduce(callback(accumu ...

  5. 220702 T1 玩具 (图的同构,全排列判定)

    [题目描述] Tom和Jerry各有一个玩具,每个玩具都是由M根绳子连接到N个球上制成的. 在Tom的玩具中,球的编号为1,-,N,第i条绳子将球Ai和Bi连接起来. 类似地,在Jerry的玩具中,球 ...

  6. HDU3001 Travelling (状压DP)

    题目没有起点限制,且每个节点至少访问1次,最多访问2次,所以用三进制数表示节点的状态(选取情况). 因为三进制数的每一位是0或1或2,所以预处理z状态S的第j位的数是有必要的. 边界条件:dp[tri ...

  7. 洛谷P4304 TJOI2013 攻击装置 (二分图匹配)

    题目大意:一个矩阵,一些点被拿掉,在棋盘上马走日,马之间不能落在同一点,求最多放几匹马. 采用对矩阵黑白染色,画个图可以发现:马可以走到的位置和他所处的位置颜色不同,将马和他可以走到的位置连边,最多可 ...

  8. HDU3949/AcWing210 XOR (高斯消元求线性基)

    求第k小的异或和,用高斯消元求更简单一些. 1 //用高斯消元求线性基 2 #include<bits/stdc++.h> 3 using namespace std; 4 #define ...

  9. 微信小程序中视频的显示与隐藏

    在微信小程序中实现视频的播放与暂停 需求: 视频列表中只能有一个视频在播放 点击视频实现播放与暂停功能 加载完成显示图片,点击后变为视频播放 从上次播放的位置进行播放 思路: 定义一个标记变量,控制视 ...

  10. TomCat之安装

    TomCat 之安装(伪分布式版本) 本次安装是使用的伪分布式的安装(即一台机器安装两个tomcat) 1.通过scp导入tomcat安装包 2.解压缩成俩个文件 3.修改第一个tomcat的配置文件 ...