Web微信：如何使用网页版进行聊天

一、前言

Web微信是一个基于微信官方功能的Web应用程序，用户无需安装任何第三方应用即可登录使用，仅需使用微信账号即可同步手机端的聊天记录，完成与手机端一致的聊天功能。使用Web微信，不仅方便了用户的聊天，同时也让开发者可以利用微信的接口开发更多的应用。

二、如何登录Web微信

在使用Web微信之前，用户需要先登录自己的微信账号，具体步骤如下：

1、使用浏览器访问https://wx.qq.com/

<iframe id="loginIframe" src="{{url}}" frameborder="0" style="width:100%;height: 100%;min-height: 580px;"></iframe>

2、打开手机微信，点击右上角的“＋”，选择“扫一扫”

3、使用手机扫描电脑端显示的二维码

4、在手机端确认登录

5、在电脑端等待加载完毕后即可完成登录

三、Web微信的基本功能

Web微信的基本功能与手机端基本相同，包括发送文字、语音、图片、视频、文件等。其中，通过微信接口，还可以实现发送表情、位置、链接等功能。

1、发送文字消息

function sendMessage() {
    var text = $('#textInput').val();
    if (!text) {
        return;
    }
    wx.sendMsg({
        "type": "text",
        "content": text,
        "toUserName": currentContact
    });
    $('#textInput').val('');
}

2、发送图片消息

function sendImage() {
    wx.chooseImage({
        success: function(res) {
            wx.uploadImage({
                localId: res.localIds[0],
                isShowProgressTips: 1,
                success: function(res) {
                    wx.sendMsg({
                        "type": "image",
                        "content": res.serverId,
                        "toUserName": currentContact
                    });
                }
            });
        }
    });
}

3、发送语音消息

function sendVoice() {
    wx.startRecord({
        success: function() {
            setTimeout(function() {
                wx.stopRecord({
                    success: function(res) {
                        wx.uploadVoice({
                            localId: res.localId,
                            isShowProgressTips: 1,
                            success: function(res) {
                                wx.sendMsg({
                                    "type": "voice",
                                    "content": res.serverId,
                                    "toUserName": currentContact
                                });
                            }
                        });
                    }
                });
            }, 3000);
        }
    });
}

4、发送文件消息

function sendFile() {
    wx.chooseImage({
        success: function(res) {
            wx.uploadImage({
                localId: res.localIds[0],
                isShowProgressTips: 1,
                success: function(res) {
                    wx.downloadFile({
                        serverId: res.serverId,
                        success: function(response) {
                            wx.sendMsg({
                                "type": "file",
                                "content": response.tempFilePath,
                                "toUserName": currentContact
                            });
                        }
                    });
                }
            });
        }
    });
}

四、Web微信的高级功能

除了基本功能之外，Web微信还提供了一些高级功能，如生成二维码、获取聊天记录、获取好友列表等。这些功能可以在开发者后台申请对应的API接口后实现。

1、生成二维码

function createQRCode() {
    wx.createQRCode({
        "scene": "web",
        "type": "qr",
        "width": "300",
        "callback": function(response) {
            var qrCodeUrl = response.data.qrcode_url;
            $('#qrcodeImg').attr('src', qrCodeUrl);
        }
    });
}

2、获取聊天记录

function getChatLog() {
    wx.getChatLog({
        "from": "2018-01-01",
        "to": "2021-01-01",
        "callback": function(response) {
            var chatLog = response.data.chatlog;
        }
    });
}

3、获取好友列表

function getContactList() {
    wx.getContactList({
        "callback": function(response) {
            var contactList = response.data.contacts;
        }
    });
}