小程序集成环信im最近在做一款有语音直播功能的小程序,用到了环信im集成功能,由于我搜了下目前用环信做小程序的的确是少之又少,而且环信官方说从2月份不再更新代码(具体原因我也没问,可能本身微信就是一款聊天工具所以用处不大)
我们产品需要用到聊天室功能,之前做h5端登录完成之后加入聊天室即可:
webim.conn.open(options); webim.conn.joinchatroom(option1);
同样方法在小程序上不行,一直报错:
cannot read property 'sendiq' of undefined
百度了一下,说加入聊天室要放在登录成功后的回调里,于是查看它的源码connection.js发现:
connection.prototype.open = function (options) { var pass = _validcheck(options, this); if (!pass) { return; } var conn = this; if (conn.isopening() || conn.isopened()) { return; } if (options.accesstoken) { options.access_token = options.accesstoken; _login(options, conn); } else { //登录成功的回调函数 var suc = function (data, xhr, myname) { conn.context.status = _code.status_dologin_im; conn.context.resttokendata = data; if (data.statuscode != '404' && data.statuscode != '400') { wx.showtoast({ title: '登录成功', icon: 'none', duration: 4000 }); } //回调成功后执行这个方法 _login(data.data, conn); }; var options = { url: apiurl + '/' + orgname + '/' + appname + '/token', data: loginfo, success: suc || _utils.emptyfn, error: error || _utils.emptyfn }; _utils.ajax(options); }
登录成功有一个内部回调,回调里面调用了一个 _login(data.data, conn)的方法:
//具体里面执行什么去源代码查看,我就不贴代码了var _login = function (options, conn) { var callback = function (status, msg) { _logincallback(status, msg, conn); };};
执行完login方法有一个_logincallback回调:
var _logincallback = function (status, msg, conn) { var conflict, error; //console.log('_logincallback 1', strophe.status, status, msg) if (msg === 'conflict') { conflict = true; } console.log(status) if (status == strophe.status.connfail) { } else if (status == strophe.status.attached || status == strophe.status.connected) { //登录成功 } else if (status == strophe.status.disconnecting) { } else if (status == strophe.status.disconnected) { } else if (status == strophe.status.authfail) { } else if (status == strophe.status.error) { } conn.context.status_now = status;};
通过断点发现当执行到 else if (status == strophe.status.attached || status == strophe.status.connected)时,登录成功.所以需要把加入聊天室的回调需要放在这个判断里面,我的具体做法如下:
//项目中封装一个加入聊天室函数 joinroom: function () { var option1 = {}; var option2 = {}; //加入聊天室 webim.conn.joinchatroom(option1); webim.conn.joinchatroom(option2); }; //在环信登录函数中添加一个自己的回调: var options = { apiurl: webim.config.apiurl, user: userid + '', pwd: userid + '', grant_type: password, appkey: webim.config.appkey, //自己添加的回调函数 callback:function(){ //调用加入聊天室 that.joinroom(); } }; webim.conn.open(options);
修改环信connection.js代码:
//登录代码connection.prototype.open = function (options) { var suc = function (data, xhr, myname) { //callback传入加入聊天室回调 _login(data.data, conn, options.callback); }; var options = { url: apiurl + '/' + orgname + '/' + appname + '/token', data: loginfo, success: suc || _utils.emptyfn, //添加加入聊天室的回调函数 callback: options.callback, error: error || _utils.emptyfn }; }};//_login代码var _login = function (options, conn, callback) { var callback = function (status, msg) { //把加入聊天室函数传给_login回调函数 _logincallback(status, msg, conn, callback); };};//_logincallback代码var _logincallback = function (status, msg, conn,callback) { var conflict, error; //console.log('_logincallback 1', strophe.status, status, msg) if (msg === 'conflict') { conflict = true; } console.log(status) if (status == strophe.status.connfail) { } else if (status == strophe.status.attached || status == strophe.status.connected) { //登录成功执行加入聊天室 callback(); } else if (status == strophe.status.disconnecting) { } else if (status == strophe.status.disconnected) { } else if (status == strophe.status.authfail) { } else if (status == strophe.status.error) { } conn.context.status_now = status;};
具体思路就是这样,由于环信小程序代码有很多坑,所以遇到问题多看看源码,有些功能就需要自己去修改代码,这是环信工单回答我的问题:
相关学习推荐:小程序开发教程
以上就是小程序集成环信im怎么用?(附代码实例)的详细内容。