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

五、總結

Web微信是一個非常實用的功能，不僅方便了用戶，同時也為開發者提供了極大的便利，以及更多的開發機會。使用Web微信，我們可以實現與微信官方移動端一致的功能，並且能夠通過微信接口實現更多的擴展功能，尤其是上述的高級功能，可以為企業、組織提供更加細緻、更加專業的服務。