微信分享圖標設置，以及wx.config配置

最近公司要求我做一個關於頁面分享微信顯示小圖和描述的功能，由於之前沒有做過，所以說是從零開始，看jssdk說明文檔，網上搜索各種資料，甚至連三四年前的內容都搜索出來了，也試過以前的簡單方法，包括在頁面設置一個隱藏的圖片，寬高都是300像素，微信就會抓取這張圖片做為分享圖片，但經本人測試無法使用，后來查到了原因，是微信對自定義分享內容作了限制，於是最終還是得回到配置wx.config上來。

wx.config({
    debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來
    appId: data.configMap.appId, // 必填，公眾號的唯一標識
    timestamp: data.configMap.timestamp, // 必填，生成簽名的時間戳
    nonceStr: data.configMap.nonceStr, // 必填，生成簽名的隨機串
    signature: data.configMap.signature,// 必填，簽名，見附錄1
    jsApiList: [
        "onMenuShareTimeline",//分享朋友圈接口
        "onMenuShareAppMessage"//分享給朋友接口
    ] // 必填，需要使用的js接口列表，所有js接口列表見附錄2
});

資源網站大全 https://55wd.com 設計導航https://www.wode007.com/favorites/sjdh

測試的時候最好將debug設置為true，這樣可以在手機微信測試頁面的時候查看到出錯的地方，有四個參數，appId，timestame，nonceStr，signature是由后台給你提供，具體的后台怎樣實現這里不多做解釋，百度搜索和微信官方都有提供，

var link = location.href;
$.ajax({
    url:"your_url",//后台給你提供的接口
    type:"GET",
    data:{"url":link},
    async:true,
    dataType:"json",
    success:function (data){
        wx.config({
            debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來
            appId: data.configMap.appId, // 必填，公眾號的唯一標識
            timestamp: data.configMap.timestamp, // 必填，生成簽名的時間戳
            nonceStr: data.configMap.nonceStr, // 必填，生成簽名的隨機串
            signature: data.configMap.signature,// 必填，簽名，見附錄1
            jsApiList: [
                "onMenuShareTimeline",
                "onMenuShareAppMessage"
            ] // 必填，需要使用的js接口列表，所有js接口列表見附錄2
        });
        wx.error(function (res) {
            alert(res);
        });
    },
    error:function (error){
        alert(error)
    }
});

　　

 

注意，在這里請求四個參數的時候，需要將頁面的url（不包括#以及后面的內容）傳給后台，這一步比較重要。

在這里之前犯了個錯誤，async，請求是否異步的時候，我寫的是false，也就是同步，結果導致頁面在ios系統分享不了，有時候能分享但沒有圖片顯示，但是在安卓系統就可以正常顯示和分享，后來改為true之后就ok了。

這是后台返回的參數，

jsApiList里面的參數是調用的接口列表數組，分享到朋友圈和分享給朋友時必須寫上以上兩個參數，onMenuShareTimeline 和 onMenuShareAppMessage，

測試的時候如果有哪個參數不正確，就會彈出對應的錯誤信息，之前沒有傳url的時候，報的是signature錯誤，也就是簽名錯誤。

當參數都正確的時候，打開了調試時在微信客戶端打開會彈出：errMsg:config:ok!

當wx.config()成功之后，wx.ready()方法就可以調用了，這時候就是設置一些分享時的圖片，標題，以及描述信息了，這個都很簡單，根據需要填寫。

wx.ready(function(res) {
    wx.onMenuShareAppMessage({
        title: document.title,
        desc:document.title,
        link: link,
        imgUrl: Imgurl,
        trigger: function(res) {},
        success: function(res) {},
        cancel: function(res) {},
        fail: function(res) {}
    });
    wx.onMenuShareTimeline({
        title: document.title,
        link: link,
        imgUrl: Imgurl,
        trigger: function(res) {},
        success: function(res) {},
        cancel: function(res) {},
        fail: function(res) {}
    });
});

　　

 

這時候基本上就大功告成了，其實這塊原理不是很復雜，但稍有一個地方出錯就不能成功，所以如果不成功的時候不要心急，耐心尋找哪個地方寫的不對，多上網搜索總會找到答案的。