Wechat Web開發全掌握

WeChat Web是一種即時通訊工具，是公眾號、小程序的開發工具之一。Wechat Web提供了一種方便的方式與客戶和用戶交互，便於快速進行客戶服務、推廣和用戶交流。本文將圍繞Wechat Web展開介紹，深入闡述其在開發中的應用和實現。

一、微信網頁授權

Wechat Web提供了一種免登陸的方式，即通過微信網頁授權來實現用戶授權登陸，便於用戶快速進入網站。具體實現步驟如下：

<a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=[appid]&redirect_uri=[redirect_uri]&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect">微信登錄</a>

其中，appid是微信公眾平台的ID，redirect_uri是授權後重定向的鏈接地址。請求Api獲取code，以此來獲取用戶的openid和access_token，實現用戶授權登陸。

二、微信JS-SDK

微信JS-SDK是WeChat Web開發中的重要組件之一，提供了一些JS API，通過這些API可以在WeChat中獲取一些重要的信息，如地理位置、掃碼等。既便於開發者在WeChat中進行交互，也讓用戶更好的體驗。

既然是JS-SDK，那麼首先要引用SDK，在HTML中添加一段JavaScript代碼：

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

引入JS-SDK後便可以使用其中的API，例如獲取當前地理位置的API：

// 如果已經授權，可以直接獲取位置信息
wx.getLocation({
    success: function (res) {
        var latitude = res.latitude; // 緯度，浮點數，範圍為90 ~ -90
        var longitude = res.longitude; // 經度，浮點數，範圍為180 ~ -180。
        var speed = res.speed; // 速度，以米/每秒計
        var accuracy = res.accuracy; // 位置精度
    }
});

// 如果未授權，需獲取用戶授權
wx.openLocation({
    latitude: 23.099994,
    longitude: 113.324520,
    name: 'TIT 創意園',
    address: '廣州市海珠區新港中路 397 號',
    scale: 14
});

三、WeChat網頁支付

WeChat網頁支付是WeChat Web的重要組成部分，方便用戶在微信內完成支付流程。開發中需要接入Wechat支付API以完成交易流程，具體實現步驟如下：

1、網站接入微信支付，獲取商戶號和API密鑰

2、用戶下單後，獲取下單信息及簽名等加密數據

3、網站後端通過API提交支付請求並完成支付簽名

4、獲取支付結果並完成對應操作

在WeChat Web中，通過WeChat支付API獲取相關信息及簽名，完成支付流程。示例代碼如下：

// 微信JS API 支付
function onBridgeReady() {
    WeixinJSBridge.invoke('getBrandWCPayRequest', {
        "appId": "{value1}",     // 公眾號名稱，由商戶傳入    
        "timeStamp": "{value2}", // 時間戳，自1970年以來的秒數     
        "nonceStr": "{value3}",  // 隨機串     
        "package": "{value4}",   // 訂單詳情擴展字元串，由商家傳入     
        "signType": "MD5",       // 微信簽名方式：     
        "paySign": "{value5}"    // 微信簽名 
    }, function(res) {
        if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 結果成功處理
        } else {
            // 結果失敗處理
        }
    });
}

if (typeof WeixinJSBridge == "undefined") {
    if(document.addEventListener ){
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    }else if (document.attachEvent){
        document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
    }
}else{
    onBridgeReady();
}

四、開發環境搭建

為開發WeChat Web，需要對開發環境進行搭建。開發環境主要由以下幾部分組成：

1、開發者賬號及公眾號註冊

2、微信開發者工具

3、API文檔及開發示例

開發者賬號及公眾號註冊是申請開發WeChat Web的第一步。在成功註冊後，需要下載微信開發者工具並完成配置。同時，閱讀API文檔及開發示例，熟悉一些基礎概念和開發方法。

代碼示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>微信JS-SDK之獲取地理位置</title>
        <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
        <script>
            wx.config({
                debug: false,
                appId: '',
                timestamp: '',
                nonceStr: '',
                signature: '',
                jsApiList: [
                    'getLocation',
                    'openLocation'
                ]
            });

            wx.ready(function () {
                wx.getLocation({
                    success: function (res) {
                        var latitude = res.latitude; // 緯度，浮點數，範圍為90 ~ -90
                        var longitude = res.longitude; // 經度，浮點數，範圍為180 ~ -180。
                        var speed = res.speed; // 速度，以米/每秒計
                        var accuracy = res.accuracy; // 位置精度
                        document.getElementById('latitude').innerHTML = latitude;
                        document.getElementById('longitude').innerHTML = longitude;
                        document.getElementById('speed').innerHTML = speed;
                        document.getElementById('accuracy').innerHTML = accuracy;
                    }
                });
            });
        </script>
    </head>
    <body>
        <p>緯度：<span id="latitude"></span></p>
        <p>經度：<span id="longitude"></span></p>
        <p>速度：<span id="speed"></span></p>
        <p>精度：<span id="accuracy"></span></p>
    </body>
</html>

以上即為WeChat Web開發全掌握，包括了微信網頁授權、微信JS-SDK、WeChat網頁支付和開發環境搭建等內容。希望這篇文章能夠對WeChat Web開發初學者有所幫助。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/282595.html

Wechat Web開發全掌握

一、微信網頁授權

二、微信JS-SDK

三、WeChat網頁支付

四、開發環境搭建

相關推薦

發表回復