微信分享自定義實現

經過Js-SDK方式實現 兩步： 1、服務端獲取accessToken和jsApiKey, 生成簽名， 傳給前臺使用 2、前臺引入對應js文件，配置config， 依次調用分享的函數

具體實現步驟：

一、綁定域名

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。 根據指引，須要先引入一個txt文件，經過線上路徑能訪問到便可， 而後才能成功添加域名    二、前端引入js文件 res.wx.qq.com/open/js/jwe…

三、經過config接口注入權限驗證配置 全部須要使用JS-SDK的頁面必須先注入配置信息，不然將沒法調用 wx.config({     debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。     appId: '', // 必填，公衆號的惟一標識     timestamp: , // 必填，生成簽名的時間戳     nonceStr: '', // 必填，生成簽名的隨機串     signature: '',// 必填，簽名，見附錄1     jsApiList: [] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2 });

四、config信息驗證後會執行ready方法 因此， 分享的各個函數須要寫在ready函數裏，才能確保正確執行

wx.ready(function(){

})

五、經過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)