實現H5連接分享給好友或朋友圈自定義分享內容（標題、圖片、簡介）的方法代碼

• 首先配置公眾號
• • JS接口安全域名
  • 設置ip白名單
• 后台配置接口，獲取簽名signature
• 最后html分享頁面聯調

 

1.首先配置公眾號

1.1.JS接口安全域名

接入jssdk時，就需要配置JS接口安全域名，因此需要登錄微信公眾平台，在公眾號設置→功能設置中，填寫JS接口安全域名，域名即為H5項目的域名（如：www.baidu.com）,同時需要下載一個txt驗證文件，並放置到服務器的根路徑下，實際操作時根據提示即可。

           

 1.2.設置ip白名單

這一步其實應該放到后面獲取access_token步驟中，我這里正好已經登錄在公眾號平台，所以就一並操作了。后面講到獲取access_token和jsapi_ticket時，需要訪問服務器，因此需要將H5項目服務器的IP地址添加到白名單中，否則接口將無法調用成功。具體設置方法：在開發→基本設置→IP白名單中進行添加相應的IP地址即可。如下圖所示

       

 2.后台配置接口，獲取signature

2.1.在微信公眾號里，拿到APPID和秘鑰（APPSECRET），向后台獲取access_token，把access_token全局存到瀏覽器里面

2.2.通過access_token，向后台獲取jsapi_ticket，把jsapi_ticket全局存到瀏覽器里面

        

2.3.定義noncestr和timestamp

        

2.4.把jsapi_ticket和noncestr和timestamp和url合成生成簽名signature

    var signature = calcSignature(jsapi_ticket, noncestr, timestamp, pageurl)

    function calcSignature(ticket, noncestr, timestamp, url) {
        var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + url;
        shaObj = new jsSHA(str, 'TEXT');
        return shaObj.getHash('SHA-1', 'HEX');
    }

       注意：url可以通過url = window.location.href來獲取

3.html代碼分享

3.1.通過APPID和timestamp和noncestr和signature編寫微信環境代碼

    shareParem(APPID, timestamp, noncestr, signature);

    function shareParem(APPID, timestamp, noncestr, signature) {
        let ua = window.navigator.userAgent.toLowerCase();
        if (ua.indexOf('micromessenger') > 0) {//微信環境
            wx.config({
                debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
                appId: APPID, // 必填，公眾號的唯一標識
                timestamp: timestamp, // 必填，生成簽名的時間戳
                nonceStr: noncestr, // 必填，生成簽名的隨機串
                signature: signature,// 必填，簽名，見附錄1
                jsApiList: [
                    'updateAppMessageShareData',
                    'updateTimelineShareData'
                ]
            })

            wx.ready(function () {
                //分享給朋友
                wx.updateAppMessageShareData({
                    title: "分享的標題",
                    desc: "分享的詳細描述",
                    link: "h5頁面的鏈接",
                    imgUrl: "分享的logo圖標的鏈接",
                    // type: 'link', // 分享類型,music、video或link，不填默認為link
                    dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空
                    success: function () {
                        // 用戶確認分享后執行的回調函數
                    }
                })

                //分享到朋友圈
                wx.updateTimelineShareData({
                    title: "分享的標題",
                    link: "h5頁面的鏈接",
                    imgUrl: "分享的logo圖標的鏈接",
                    success: function () {
                        // 用戶確認分享后執行的回調函數
                    }
                })

            })

            wx.error(function (res) {
                alert(res.errMsg);//錯誤提示
            })
        }else{
            alert("非微信瀏覽器");
        }
    }

3.2.正確獲取微信分享鏈接

步驟一：先通過移動端的qq瀏覽器訪問h5頁面

步驟二：再通過qq瀏覽器的分享功能分享到微信。

此時，就可以獲得以上配置好的微信分享鏈接

4.常見錯誤

invalid credential, access_token is invalid or not latest hint 是由於access_token過期了，導致生成的簽名失敗。分析上面的代碼，發現將獲取到的access_token緩存到localstorage的邏輯是有問題的，獲取到的access_token默認有效期為2小時，如果重新請求API接口，新的access_token會覆蓋原來的值，而我將access_token存入localstorage后，其實並沒有做進一步的有效期的校驗和定時刷新，所以過了有效期之后，自然就會出現上面的那個錯誤了

5.注意事項

access_token和jsapi_ticket只能通過服務器去訪問得到(后台編寫接口，然后前端去訪問后台的接口，即可)，前端無法直接訪問獲取，會出現無法解決的跨域問題。

 

 

signature簽名獲取方法可以參考 微信開放文檔 和文檔 https://blog.csdn.net/wjiaoling136/article/details/84755904

 

參考---https://blog.csdn.net/guo_qiangqiang/article/details/103023458?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0.no_search_link&spm=1001.2101.3001.4242.1