微信分享自定義實現

Will醬發表於2017-12-15

通過Js-SDK方式實現 兩步： 一、服務端獲取accessToken和jsApiKey, 生成簽名， 傳給前臺使用 二、前臺引入對應js檔案，配置config， 依次呼叫分享的函式

具體實現步驟：

1、繫結域名

先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。 根據指引，需要先引入一個txt檔案，通過線上路徑能訪問到即可， 然後才能成功新增域名    2、前端引入js檔案 res.wx.qq.com/open/js/jwe…

3、通過config介面注入許可權驗證配置 所有需要使用JS-SDK的頁面必須先注入配置資訊，否則將無法呼叫 wx.config({     debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。     appId: '', // 必填，公眾號的唯一標識     timestamp: , // 必填，生成簽名的時間戳     nonceStr: '', // 必填，生成簽名的隨機串     signature: '',// 必填，簽名，見附錄1     jsApiList: [] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2 });

4、config資訊驗證後會執行ready方法 所以， 分享的各個函式需要寫在ready函式裡，才能確保正確執行

wx.ready(function(){

})

5、通過error介面處理失敗驗證 config資訊驗證失敗時會執行error函式，如簽名過期導致驗證失敗，

wx.error(function(res){     Console.log(res) // 列印出錯誤資訊， 可以在這裡做重新整理簽名處理， 向後臺傳送請求 })

// 前端程式碼
<!--分享-->
<script src="[https://res.wx.qq.com/open/js/jweixin-1.0.0.js](https://res.wx.qq.com/open/js/jweixin-1.0.0.js)"></script>
<script>
    wx.config({
        debug: false, //除錯階段建議開啟
        appId: "wx260c70c8ae7d9b3b",//APPID
        timestamp: "{{share_config.Timestamp}}",//上面main方法中拿到的時間戳timestamp
        nonceStr: "{{share_config.NonceStr}}",//上面main方法中拿到的隨機數nonceStr
        signature: "{{share_config.Signature}}",//上面main方法中拿到的簽名signature
        jsApiList: [
            //所有要呼叫的 API 都要加到這個列表中
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "onMenuShareQQ",
            "onMenuShareWeibo",
            "onMenuShareQZone"
        ]
    });
  
    // 配置完成後，分享函式一定要寫在ready裡面
    wx.ready(function(){
        var title = "有色商城看貨節，和我們一起去看貨 - 有色商城",
            desc = "有色商城聯合多家鋅合金廠家，舉辦第一屆“看貨節”活動，線上線下相結合，廠家接待，現場看貨，當面洽淡，歡迎和我們一起去看貨！”,
            // imgurl 必須是絕對地址，包含協議、域名
            imgURL = "https://" + window.location.host + "{{static_server_path.UrlPrefix}}{{static_server_path.Version}}/images/kanhuo/H5/share.jpg",
            linkURL = window.location.href;

        // 分享給朋友
        wx.onMenuShareAppMessage({
            title: title, // 分享標題
            desc: desc, // 分享描述
            link: linkURL, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
            imgUrl: imgURL // 分享圖示
        });
        
        // 分享到朋友圈
        wx.onMenuShareTimeline({
            title: title, // 分享標題
            link: linkURL, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
            imgUrl: imgURL// 分享圖示
        });

        // 分享到QQ
        wx.onMenuShareQQ({
            title: title, // 分享標題
            desc: desc, // 分享描述
            link: linkURL, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
            imgUrl: imgURL // 分享圖示
        });

        // 分享到騰訊微博
        wx.onMenuShareWeibo({
            title: title, // 分享標題
            desc: desc, // 分享描述
            link: linkURL, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
            imgUrl: imgURL // 分享圖示
        });

        // 分享到qq空間
        wx.onMenuShareQZone({
            title: title, // 分享標題
            desc: desc, // 分享描述
            link: linkURL, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
            imgUrl: imgURL // 分享圖示
        });
    })
</script>
複製程式碼

工具： 微信JS-SDK說明文件(https://mp.weixin.qq.com/wiki) 微信js介面簽名校驗工具(https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign)

相關文章