微信js-sdk分享詳解及demo實例

步驟一：綁定域名

先登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。

 

---

步驟二：引入JS文件

在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

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

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

 

---

 

步驟三：通過config接口注入權限驗證配置

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用。

wx.config({
    debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
    appId: '', // 必填，公眾號的唯一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});

 

---

 

 

步驟四：通過ready接口處理成功驗證

wx.ready(function(){
    //config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
});

 

---

 

步驟五：通過error接口處理失敗驗證

wx.error(function(res){
    //config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。
});

 

---

 

 

詳細頁面代碼

    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
        wx.config({
            debug: false,
            appId: '${appId!}',
            timestamp: ${timestamp!},
            nonceStr: '${nonceStr!}',
            signature: '${signature!}',
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'hideMenuItems',
                'getLocation'
            ]
        });
        var shareTitle = "更多優惠，盡在聚惠";
        var shareDesc = "大回饋，花少錢享優質生活，更多優惠商品，就等你喊朋友一起來選！";
        var currentLink = window.location.href;
        var shareLink = currentLink <#if u??> + (currentLink.indexOf("?") > -1 ? ("&u=" + "${u!}" + "&t=" + "${t!}" + "&o=" + "${o!}" + "&s=" + "${s!}") : ("?u=" + "${u!}" + "&t=" + "${t!}" + "&o=" + "${o!}" + "&s=" + "${s!}"))</#if>;
            shareLink = shareLink <#if !city??> + (shareLink.indexOf("?") > -1 ? ("&city=" + "深圳") : ("?city=" + "深圳"))</#if>;
        var shareImgUrl = "${IMGPATH!}/images/banner2.png";
        var shareGid = "";

        wx.ready(function () {
            //分享給朋友
            wx.onMenuShareAppMessage({
                title: shareTitle,
                desc: shareDesc,
                link: shareLink,
                imgUrl: shareImgUrl,
                success: function (res) {
                    shared(shareLink, "friend", shareGid);
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
            //分享到朋友圈
            wx.onMenuShareTimeline({
                title: shareTitle,
                desc: shareDesc,
                link: shareLink,
                imgUrl: shareImgUrl,
                success: function (res) {
                    shared(shareLink, "Timeline", shareGid);
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
            //分享到QQ
            wx.onMenuShareQQ({
                title: shareTitle,
                desc: shareDesc,
                link: shareLink,
                imgUrl: shareImgUrl,
                success: function (res) {
                    shared(shareLink, "QQ", shareGid);
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
            //分享到騰訊QQ
            wx.onMenuShareWeibo({
                title: shareTitle,
                desc: shareDesc,
                link: shareLink,
                imgUrl: shareImgUrl,
                success: function (res) {
                    shared(shareLink, "Weibo", shareGid);
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
            //分享到QZone
            wx.onMenuShareQZone({
                title: shareTitle,
                desc: shareDesc,
                link: shareLink,
                imgUrl: shareImgUrl,
                success: function (res) {
                    shared(shareLink, "QZone", shareGid);
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        });

        function shared(url, type, gid){
            var rUrl = basePath + "/share/add?type=" + type + "&url=" + encodeURI(url);
            if(!!gid) {
                rUrl += "&gid=" + gid;
            }
            $.ajax({
                type: "GET",
                url: rUrl,
                dataType: "json",
                success: function(rs){
                    //alert("分享成功");
                }
            });
        }
    </script>

 

注：微信接口文檔地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115