带你深入了解微信小程序集成环信SDK

百变鹏仔 13小时前 #前端问答

文章标签带你

本文以一个小例子简单的演示在微信小程序中使用环信SDK收发消息。

官网demo 下载后把整个utils目录下的文件复制到咱自己工程的目录下。

在WebIMConfig.js中将AppKey替换成自己应用的key

界面简单的用一个输入框和一个按钮组成，点击按钮发送消息。

导入WebIM.js

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

登陆

hxloign: function () {        var options = {            apiUrl: WebIM.config.apiURL,            user: 'u1',            pwd: 'p1',            grant_type: 'password',            appKey: WebIM.config.appkey //应用key        }        WebIM.conn.open(options)    },

发送文本消息

 sendMessage: function () {        var that = this        var id = WebIM.conn.getUniqueId();        var msg = new WebIM.message('txt', id);        msg.set({            msg: this.data.inputValue,//输入框的文本            to: 'u0',            roomType: false,            success: function (id, serverMsgId) {            }        });        msg.body.chatType = 'singleChat';        WebIM.conn.send(msg.body);    },

接收消息

接收消息要先在app.js中添加回调函数

app.js获取聊天界面

  getRoomPage: function () {        return this.getPage("pages/index/index")//聊天界面    },   getPage: function (pageName) {        var pages = getCurrentPages()        return pages.find(function (page) {            return page.__route__ == pageName    })

在app.jsonlanuch方法中进行声明

   var that = this;        WebIM.conn.listen({            onTextMessage: function (message) {                var page = that.getRoomPage()                if (message) {                    if (page) {                        page.receiveMsg(message, 'txt')//receiveMsg方法就是咱在自己界面定义的方法                     }else{                        //界面不存在                      }                }            }        })

index.js中定义的接收消息的方法

receiveMsg: function (msg, type) {        console.log(msg);    },

到此简单的收发消息功能就算实现了，发送语音图片规则都差不多，只不过参数不一样，可以参考消息环信开发文档

文章推荐

带你深入了解微信小程序集成环信SDK

登陆

发送文本消息

接收消息

寻洲：打造高质朋友圈内容的六要素！

王双雄：微商怎么做视频营销？

做好微商，其实需要这样去经营

揭秘：魏则西离去真正的原因

【派代&amp;生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！

【派代&生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！