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
uniapp 微信小程序 引入 环信聊天的更多相关文章
- 微信小程序 使用环信聊天工具
		当时做微信小程序环信的时候,没有遇到太多的问题,因为找到了一个例子,有兴趣的朋友可以把这个包下载下来看一下,写的超级的号,使用起来也特别简单,appkey需要自己配置,从环信官网https://con ... 
- uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤
		uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ... 
- 微信小程序引入md5.js
		今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of t ... 
- 微信小程序引入ECharts组件
		首先打开ECharts网页 https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8 ... 
- uniapp 微信小程序 配置分享朋友和朋友圈
		uniapp 微信小程序 配置分享朋友和朋友圈 首先在小程序中配置微信分享,和微信朋友圈, onShareAppMessage, onShareTimeline 这两个API 和 onLoad 同级目 ... 
- uni-app微信小程序开发之引入腾讯视频小程序播放插件
		登录微信小程序管理后台添加腾讯视频播放插件: 正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示: 在uni-app中引入插件代码 ... 
- 【重点突破】—— UniApp微信小程序开发教程学习Three
		一.实战 HBuilderX:在微信小程序中运行页面,需要设置->安全 开启微信小程序服务端口,HBuilder工具->设置->配置程序路径 网络请求.模板语法.打开页面.页面传参 ... 
- 【重点突破】—— UniApp 微信小程序开发官网学习Two
		一.使用Vue.js注意事项 Vue.js在uni-app中使用的差异: 新增:uni-app除了支持Vue实例的生命周期,还支持应用启动.页面显示等生命周期 受限:发布到H5时支持所有vue的语法, ... 
- 微信小程序发送短信验证码完整实例
		微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class=&quo ... 
随机推荐
- PTA 乙级解题笔记 1001 害死人不偿命的(3n+1)猜想
			卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把 (3n+1) 砍掉一半.这样一直反复砍下去,最后一定在某一步得到 n=1.卡拉兹在 1950 ... 
- Python对字符数据进行清洗
			import re mystr = "hahaAAA哈哈綂123./!#鱫愛" str1 = ''.join(re.findall('[\u4e00-\u9fa5]',mystr) ... 
- 从0搭建vue3组件库: 如何完整搭建一个前端脚手架?
			相信大家在前端开发中都使用过很多前端脚手架,如vue-cli,create-vite,create-vue等:本篇文章将会为大家详细介绍这些前端脚手架是如何实现的,并且从零实现一个create-kit ... 
- v-debounce-throttle是一个vue防抖节流指令
			v-debounce-throttle是一个vue防抖节流指令 简介 v-debounce-throttle是一个vue防抖节流指令,控制单一事件的触发频率.其核心是拦截组件元素的v-on绑定事件,采 ... 
- python渗透测试入门——取代netcat
			1.代码及代码讲解. 实验环境:windows10下的linux子系统+kali虚拟机 import argparse import socket import shlex import subpro ... 
- 想开发DAYU200,我教你
			摘要:本文主要介绍OpenHarmony富设备DAYU200开发板的入门指导. 本文分享自华为云社区<DAYU200开发指导>,作者: 星辰27. 1 概述 DAYU200开发板属于Ope ... 
- 重新整理 .net core 实践篇 ———— dotnet-dump [外篇]
			前言 本文的上一篇为: https://www.cnblogs.com/aoximin/p/16861797.html 该文为dotnet-dump 和 procdump 的实战介绍一下. 正文 现在 ... 
- 记一次线上频繁fullGc的排查解决过程
			发生背景 最近上线的一个项目几乎全是查询业务,并且都是大表的慢查询,sql优化是做了一轮又一轮,前几天用户反馈页面加载过慢还时不时的会timeout,但是我们把对应的sql都优化一遍过后,前台响应还是 ... 
- 【笔记】区间DP
			记录一些基础的区间 \(\text{DP}\) 题. 0x00 AT_dp_n N - Slimes 最板的区间 \(\text{DP}\) . 记 \(f[i][j]\) 表示合并 \(i\sim ... 
- Re:从零开始教你使用 Sublime Text
			目录 Re:从零开始教你使用 Sublime Text 0.前言 0-0.关于我为什么要写这篇文章 0-1.关于这篇文章会讲什么 0-2.适用人群 0-4.其他 0-5.无用的统计 1.安装和基础功能 ... 
