【小程序】微信小程序集成环信im

虽说微信本来就是个社交工具，但在开发小程序时还是免不了涉及到及时通信的功能。说到及时通信，我脑瓜子第一反应想到了环信im，腾讯im，融云im等等的第三方。今天我们来谈谈环信im。

1.下载小程序demon
先看看环信im的demon能够实现怎么样的大致动能，对环信im来一个初步认识。

2.到环信管理后台注册并创建应用
申请唯一的appkey，替换到上一步下载的demon中，我们就能通过管理后台更加深入，方便是测试环信im的功能。

3.把demon搬到我们自己的小程序当中
从demon中提取sdk、xmldom、striphe.js、WebIM.js和WebIMConfig.js放到自己的小程序的对应位置。
tips: 在app.js应用striphe.js、WebIM.js时，你可能会遇到报错，但是别慌。

原因：xxx标识符已经声明.
那么我们只需要改名或者不要重复声明就可以了。

1.使用环信im的“前期准备”

//引入
require('./utils/strophe.js')
var WebIM = require('./utils/WebIM.js').default

在app.js里添加监听事件

 onOpened: function () {},                  //连接成功回调 onClosed: function () {},                  //连接关闭回调onTextMessage: function ( message ) {var page = that.getRoomPage()console.log(page)if (message) {if (page) {page.receiveMsg(message, 'txt')} else {var chatMsg = that.globalData.chatMsg || []var value = WebIM.parseEmoji(message.data.replace(/\n/mg, ''))var time = WebIM.time()var msgData = {info: {from: message.from,to: message.to},username: message.from,yourname: message.from,msg: {type: 'txt',data: value},style: '',time: time,mid: 'txt' + message.id}chatMsg = wx.getStorageSync(msgData.yourname + message.to) || []var num = wx.getStorageSync(msgData.yourname + message.to + '-num') || 0;wx.setStorage({key: msgData.yourname + message.to + '-num',data: ++ num,success: function () {//console.log('success')}})chatMsg.push(msgData)wx.setStorage({key: msgData.yourname + message.to,data: chatMsg,success: function () {//console.log('success')}})}}},    //收到文本消息onEmojiMessage: function ( message ) {},   //收到表情消息onPictureMessage: function ( message ) {}, //收到图片消息onCmdMessage: function ( message ) {},     //收到命令消息onAudioMessage: function ( message ) {},   //收到音频消息onLocationMessage: function ( message ) {},//收到位置消息onFileMessage: function ( message ) {},    //收到文件消息onCustomMessage: function ( message ) {},  //收到自定义消息onVideoMessage: function (message) { },   //收到视频消息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时会在这个回调里收到消息

2.环信账号登录/注册

var WebIM = require('./utils/WebIM.js').default// 登录环信imWebIM.conn.open({apiUrl: WebIM.config.apiURL,user: 'Peach_Eiton', //环信用户idpwd: '123456', //环信用户密码appKey: WebIM.config.appkey,success: function () {// 登陆成功的话调用console.log('Siccess登录环信im成功~！')},failure: function () {// 登陆失败的话调用console.log('Failure登录环信im失败~！')},});// 如若没有账号的话，可以先注册
var options = {apiUrl: WebIM.config.apiURL,username: that.data.username, // 环信用户名password: that.data.password, // 环信用户密码nickname: '',appKey: WebIM.config.appkey,success: function(res) {if(res.statusCode == '200') {wx.showToast({title: '注册成功,正在登录',icon: 'success',duration: 1500,success: function() {var data = {apiUrl: WebIM.config.apiURL,user: that.data.username,pwd: that.data.password,grant_type: 'password',appKey: WebIM.config.appkey}setTimeout(function(){WebIM.conn.open(data) //登录},1000)}});   }    },error: function(res) {if(res.statusCode !== '200') {wx.showModal({title: '用户名已被占用',showCancel: false,confirmText: 'OK'})}}}WebIM.utils.registerUser(options)

3.发送消息

sendEvent(e) {console.log('发送信息：', this.data.inputValue)let that = thislet id = WebIM.conn.getUniqueId(); // 生成本地消息idlet msg = new WebIM.message('txt', id); // 创建文本消息console.log('msg--', msg)msg.set({msg: that.data.inputValue, // 消息内容to: that.data.toWebIM, // 接收消息对象（用户id）chatType: 'singleChat', // 设置为单聊ext: {}, //扩展消息success: function (id, serverMsgId) {console.log('send private text Success', );that.setData({inputValue: '',})let msgData = {info:{from: wx.getStorageSync('webIMuserId'),to: that.data.toWebIM}}},fail: function (e) {// 失败原因:// e.type === '603' 被拉黑// e.type === '605' 群组不存在// e.type === '602' 不在群组或聊天室中// e.type === '504' 撤回消息时超出撤回时间// e.type === '505' 未开通消息撤回// e.type === '506' 没有在群组或聊天室白名单// e.type === '501' 消息包含敏感词// e.type === '502' 被设置的自定义拦截捕获// e.type === '503' 未知错误console.log("Send private text error");}});WebIM.conn.send(msg.body);console.log('msg---', msg)var value = WebIM.parseEmoji(msg.value.replace(/\n/mg, ''))var time = WebIM.time()var msgData = {info: {from: msg.from,to: msg.to},username: '',yourname: msg.from,msg: {type: msg.type,data: value,url: msg.url},style: '',time: time,mid: msg.type + msg.id}console.log('Audio Audio msgData: ', msgData);if (msg.from == that.data.yourname) {msgData.style = ''msgData.username = msg.from} else {msgData.style = 'self'msgData.username = msg.to}//console.log(msgData, that.data.chatMsg, that.data)that.data.chatMsg.push(msgData)wx.setStorage({key: that.data.toWebIM + wx.getStorageSync('webIMuserId'),data: that.data.chatMsg,success: function () {if (msg.type == 'audio')return;//console.log('success', that.data)that.setData({chatMsg: that.data.chatMsg,})console.log('chatMsg!!~~',that.data.chatMsg)setTimeout(function () {that.setData({toView: that.data.chatMsg[that.data.chatMsg.length - 1].mid})}, 100)}})},

3.获取历史消息
通常我们会把两天记录存放在本地缓存中，一般以用户名和好友名作为key来缓存聊天记录。

【小程序】微信小程序集成环信im相关推荐

微信小程序----微信小程序浏览pdf文件
微信小程序----微信小程序浏览pdf文件说明:通过wx.downloadFile,wx.openDocumen来实现打开pdf文件.只需在js操作即可. HTTP.Config.Request(' ...
微信小程序—微信小程序端支付代码
只有微信小程序端的代码,如下 Page({data: {},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数var that = this ...
小程序 | 微信小程序实现商品分类列表
小程序 | 微信小程序实现商品分类列表一.效果展示二.代码实现  <view class="container"> <! ...
生鲜小程序微信小程序怎么制作临沂修齐网络专业制作微信小程序
生鲜小程序微信小程序怎么制作临沂修齐网络专业制作微信小程序生鲜小程序开发功能介绍: 1.产品展示:通过扫码或者搜索小程序,用户可以看到不同品种的新鲜蔬菜.水果以及肉类. 2.定时收货:买家可以预 ...
小程序 | 微信小程序中使用位置API打开地图
小程序 | 微信小程序中使用位置API打开地图一.效果展示二.代码实现使用微信内置地图查看位置,调用wx.openLocationAPI,具体内容可以查看微信官方文档. // js let In ...
小程序 | 微信小程序实现循环嵌套数据选择
小程序 | 微信小程序实现循环嵌套数据选择一.效果展示二.代码实现在.wxml文件中,有时从后台传来的数据可能会出现数组嵌套数组的情况,需要利用wx:for嵌套实现数据的展示.这时,外层循环正常 ...
小程序--微信小程序使用阿里巴巴矢量库图标
小程序–微信小程序使用阿里巴巴矢量库图标 2020年4月20日阿里巴巴矢量库 1.导图 1.1下载图标项目注:项目默认引用名是iconfont,我这里改成了font,所以我引用的第一个class是 ...
python开发微信小程序-微信小程序开发：python+sanic 实现小程序登录注册
开发微信小程序时,接入小程序的授权登录可以快速实现用户注册登录的步骤,是快速建立用户体系的重要一步.这篇文章将介绍 python + sanic + 微信小程序实现用户快速注册登录全栈方案. 微信小程 ...
没学后端也能开发小程序——微信小程序云开发的介绍知识
微信小程序云开发的介绍知识云开发模式产品经理-->前端开发-->上线云开发传统开发效率只关心业务逻辑,效率高需要关注非业务逻辑,效率低成本按需付费,有免费额度前期需要预 ...
用php制作微信小程序,微信小程序自己制作小组件
这篇文章主要介绍了微信小程序自己制作小组件实例详解的相关资料,自己制作小组件在项目中应用,需要的朋友可以参考下微信小程序制作小组件对于我们日常中一些公共的东西可以封装成组件,然后在各个页面使用 ...

【小程序】微信小程序集成环信im

【小程序】微信小程序集成环信im相关推荐

最新文章

热门文章