微信JS SDK 精講

微信公眾號是現在很多互聯網公司、商家、媒體之類的必備營銷工具，而微信JS SDK則是在網頁端開發中用於調用微信的JS開發工具，通過JS-SDK，我們可以在微信中實現很多功能：使用微信的分享、獲取位置、錄音等等，在各種場景中，JS-SDK都可以幫助我們建立一個更加完善的微信公眾號。

一、微信JS-SDK介紹

1、微信JS-SDK使用的優勢

微信JS-SDK除了為開發者提供了許多便捷的指令外，還提供了另外一些很必要的效果：通過微信JS-SDK我們可以認證開發者的身份，使網頁擁有微信賬號的權限，在這個過程中會調用到微信JS SDK中的各種API。

2、微信JS-SDK使用的流程

url = location.href.split('#')[0];
$.ajax({
    url: '/wx_config',
    data: {
        url: url
    },
    success: function (data) {
        wx.config({
            debug: false,
            appId: data.appId,
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo'
            ]
        });
        wx.ready(function () {
            var title = 'Learn from Little things練習題',
            desc = 'Learn from Little things練習題',
            link = "http://" + location.host + location.pathname;
            imgurl = "http://" + location.host + "/static/img/icon.png";
            wx.onMenuShareTimeline({ //分享到朋友圈
                title:title, 
                link:link, 
                imgUrl:imgurl, 
                success: function () {},
                cancel: function () {}
            });
            wx.onMenuShareAppMessage({ //分享給朋友
                title:title, 
                desc:desc, 
                link:link, 
                imgUrl:imgurl, 
                success: function () {},
                cancel: function () {}
            });
            wx.onMenuShareQQ({ //分享到QQ
                title:title, 
                desc:desc, 
                link:link, 
                imgUrl:imgurl, 
                success: function () {},
                cancel: function () {}
            });
            wx.onMenuShareWeibo({ //分享到微博
                title:title, 
                desc:desc, 
                link:link, 
                imgUrl:imgurl, 
                success: function () {},
                cancel: function () {}
            });
        });
    }
});

二、微信JS-SDK的開發與使用

1、微信JS-SDK基礎

微信JS-SDK一般是在微信公眾號的網站內部被調用，我們可以直接在客戶端部署它們（這通常可以在微信官方文檔中找到）。然後我們將授權配置插入到我們的網站代碼中，即可調用JS-SDK。

2、微信JS-SDK的使用

可以在JS代碼中嵌入HTML代碼，從而更好地進行頁面效果的展現。例如：我們可以通過JS-SDK將圖片上傳至服務器之後，通過HTML表單提交表單數據，然後將其與上傳圖片信息保存到數據庫中。

3、微信JS-SDK的具體使用

在我們調用微信JS-SDK後，首先需要初始化微信JS-SDK的配置，然後在該代碼中註冊一些功能。例如，我們可以調用`onMenuShareTimeline`方法來配置分享到朋友圈功能，然後註冊任意數量的分享工具，這些工具可以用`onMenuShareTimeline`來設置，或者它們可以使用`onMenuShareAppMessage`等其它功能並進行調用。最後，我們使用這些API：分享到朋友圈，分享給朋友，分享到QQ，分享到微博。

url = location.href.split('#')[0];
$.ajax({
    url: '/wx_config',
    data: {
        url: url
    },
    success: function (data) {
        wx.config({
            debug: false,
            appId: data.appId,
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo'
            ]
        });
        wx.ready(function () {
            var title = 'Learn from Little things練習題',
            desc = 'Learn from Little things練習題',
            link = "http://" + location.host + location.pathname;
            imgurl = "http://" + location.host + "/static/img/icon.png";
            wx.onMenuShareTimeline({ //分享到朋友圈
                title:title, 
                link:link, 
                imgUrl:imgurl, 
                success: function () {},
                cancel: function () {}
            });
            wx.onMenuShareAppMessage({ //分享給朋友
                title:title, 
                desc:desc, 
                link:link, 
                imgUrl:imgurl, 
                success: function () {},
                cancel: function () {}
            });
            wx.onMenuShareQQ({ //分享到QQ
                title:title, 
                desc:desc, 
                link:link, 
                imgUrl:imgurl, 
                success: function () {},
                cancel: function () {}
            });
            wx.onMenuShareWeibo({ //分享到微博
                title:title, 
                desc:desc, 
                link:link, 
                imgUrl:imgurl, 
                success: function () {},
                cancel: function () {}
            });
        });
    }
});

三、微信JS-SDK實戰

1、微信JS-SDK分享示例代碼

我們首先需要獲取授權信息，然後將其加載到頁面中，這些信息包括appid、timestamp、noncestr、signature。

2、微信JS-SDK，使用微信的API為朋友們分享我們的文章

url = location.href.split('#')[0];
$.ajax({
    url: '/wx_config',
    data: {
        url: url
    },
    success: function (data) {
        wx.config({
            debug: false,
            appId: data.appId,
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo'
            ]
        });
        wx.ready(function () {
            var title = 'Learn from Little things練習題',
            desc = 'Learn from Little things練習題',
            link = "http://" + location.host + location.pathname;
            imgurl = "http://" + location.host + "/static/img/icon.png";
            wx.onMenuShareTimeline({ //分享到朋友圈
                title:title, 
                link:link, 
                imgUrl:imgurl, 
                success: function () {},
                cancel: function () {}
            });
            wx.onMenuShareAppMessage({ //分享給朋友
                title:title, 
                desc:desc, 
                link:link, 
                imgUrl:imgurl, 
                success: function () {},
                cancel: function () {}
            });
            wx.onMenuShareQQ({ //分享到QQ
                title:title, 
                desc:desc, 
                link:link, 
                imgUrl:imgurl, 
                success: function () {},
                cancel: function () {}
            });
            wx.onMenuShareWeibo({ //分享到微博
                title:title, 
                desc:desc, 
                link:link, 
                imgUrl:imgurl, 
                success: function () {},
                cancel: function () {}
            });
        });
    }
});

上述代碼中，我們在獲取到授權信息後，通過`wx.config`方法配置好授權信息，預加載需要的JS-SDK，之後在`wx.ready`的回調事件中對要分享給朋友們的標題、描述、鏈接、以及分享時顯示的縮略圖進行設置。

四、微信JS-SDK問題解答

由於微信JS-SDK使用沒有十分明確的問題。下面是一些我們在使用微信JS-SDK過程中可能會遇到的常見問題：

1、微信JS-SDK在第二次進入網頁時，分享按鈕會失效

2、使用微信JS-SDK分享時，在分享到朋友圈這一步出現了問題會怎樣

3、非微信用戶怎樣進行支付

4、支付時我的訂單狀態一直處於未處理，請問我應該怎麼辦？

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

微信JS SDK 精講

一、微信JS-SDK介紹

二、微信JS-SDK的開發與使用

三、微信JS-SDK實戰

四、微信JS-SDK問題解答

相關推薦

發表回復