Take you to have an in-depth understanding of WeChat applet integrated Huanxin SDK

This article uses a small example to simply demonstrate how to use the Huanxin SDK to send and receive messages in the WeChat applet.

After downloading the official website demo, copy the files in the entire utils directory to the directory of our own project.

##Replace

AppKey with your own application in WebIMConfig.js The key

interface is simply composed of an input box and a button. Click the button to send a message.

##Import

WebIM.js

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

Login

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

Send text message

 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);
    },

Receive message

To receive a message, you must first add a callback function in

app.js

app.js

Get the chat interface

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

Declare in the

app.js

onlanuch method

   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

to receive the message Method

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

Even if the simple function of sending and receiving messages has been implemented, the rules for sending voice and pictures are similar, but the parameters are different. You can refer to the Message Environment Development Document

The above is the detailed content of Take you to have an in-depth understanding of WeChat applet integrated Huanxin SDK. For more information, please follow other related articles on the PHP Chinese website!