微信分享功能

微信app右上角自帶分享功能--不管是微信公衆號仍是微信小程序或者是用微信打開的別的連接，用戶均可以進行微信分享出去，對於自定義微信分享功能會和默認分享存在一些樣式區別。這就是爲何還要自定義微信分享功能。

如下是步驟：   

一：重中之重就是去看微信開發者文檔，開發者文檔連接：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432，雖然看不下去，但也要忍着看下去，多看幾遍。熟悉了以後能夠看看別人的博客，從別人的經驗中總結出路在哪。

二：申請微信公衆號，連接：https://mp.weixin.qq.com/

 

三：在微信公衆號的後臺進行設置：公衆號設置-->功能設置-->JS接口安全域名，打開這個頁面以後你會看到下面的提示。須要先下載這個文件並上傳到指定域名的根目錄。

 

四：能夠經過開發-->接口權限查看本身是否獲取到了分享事件的權限。

五： 首先要說明的是分享功能是一個配置功能，綁定在按鈕的click事件中是沒有效果的。也就是說只有點擊微信右上角的分享纔有效果。微信分享要引入wx.js，此js文件必須是低版本的wx.js的低版本，最新版本的1.4.0的版本沒有分享功能，以前這個也琢磨了好久，搜了半天都沒有找到這個也是個問題，也沒有看到前人博客的關於這個js文件版本的指點。

 

 

六：要注意分享功能的簽名signature必需要在後臺獲取，若是前端的話會暴露appID和密鑰，這樣的話很是不安全，微信也不建議這麼作。

七：獲取簽名時的url不能帶有#，必須是去掉#以後的url。

var url=window.location.href;
url= rote.split("#")[0];

八：要使用簽名工具對你獲取到的簽名進行驗證，看看簽名的獲取有沒有錯誤，連接：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

九：注意開啓微信分享調試功能，debug:true;這樣在console後臺能夠看到報錯，並且要注意的是微信分享或者微信的其餘功能在瀏覽器的手機模擬端時是不會顯示效果的，必需要使用微信開發者工具，當數據獲取成功的時候回提示errMsg：‘config：ok’,剛開始看到是errMsg我還覺得這不是成功的提示而是失敗的提示呢，其實並否則。當一切都完成的時候，要把alert測試信息去掉，否則蘋果手機會莫名的出現彈框。

十：關於分享出去的圖片連接也頁面的連接，必須和當前頁的域名一致，並且此域名必需要配置在公司公衆號的IP白名單上，不然分享不成功。

 

剩下的就是業務邏輯了，這個就很是簡單了

 

首先要請求，後端的接口，獲取簽名等數據

 

//分享功能請求接口獲取簽名等數據

$.ajax({    
    url:請求的接口,
    type:請求的方式,
    data:傳入的參數,
    success:function (res) {
        wx.config({
            debug: false,
            appId: res.retData.appId,
            timestamp: res.retData.timestamp,
            nonceStr: res.retData.nonceStr,
            signature: res.retData.signature,
            jsApiList: [
                'onMenuShareAppMessage','onMenuShareTimeline'
            ]
        });
    }
})

//點擊分享按鈕進行分享事件

wx.ready(function () {
    // 2.2 監聽「分享到朋友圈」按鈕點擊、自定義分享內容及分享結果接口
    document.querySelector(點擊的按鈕).onclick = function () {
        document.getElementById(蒙版層).style.display='block';
    
        //分享到朋友圈
        wx.onMenuShareTimeline({
            title: 分享標題,
            desc: 分享描述,
            link:  分享連接,
            imgUrl: 分享圖片的連接,
            trigger: function (res) {
　　　　　　　　　　alert(res)   /////注意蘋果手機分享的時候要去掉alert事件，否則會出現莫名的彈框
            },
            success: function (res) {
　　　　　　　　　　alert(res)
            },
            cancel: function (res) {
            },
            fail: function (res) {
            }
        });
        //分享給朋友
        wx.onMenuShareAppMessage({

 　　　　　　 title: 分享標題,
            desc: 分享描述,
            link:  分享連接,
            imgUrl: 分享圖片的連接,

            trigger: function (res) {            },            success: function (res) {            },            cancel: function (res) {            },            fail: function (res) {            }        });    };})