微信公眾號-- 微信分享功能（分享到朋友和朋友圈顯示圖片和簡介）

汪小蓉發表於2018-06-26

1.效果圖對比

微信公眾號-- 微信分享功能（分享到朋友和朋友圈顯示圖片和簡介）
微信公眾號-- 微信分享功能（分享到朋友和朋友圈顯示圖片和簡介）

2.之前踩過的坑

頁面設定一個隱藏的圖片，寬高都是300畫素，微信就會抓取這張圖片做為分享圖片

連結：blog.csdn.net/aoshilang22…

微信公眾號-- 微信分享功能（分享到朋友和朋友圈顯示圖片和簡介）

結果： 並沒有什麼效果，原因：微信對自定義分享內容作了限制，最終還是要依靠配置wx.config。

3.詳細看了一邊官方的文件：

連結：mp.weixin.qq.com/wiki?t=reso…ain&id=mp1421141115

微信公眾號-- 微信分享功能（分享到朋友和朋友圈顯示圖片和簡介）

看一遍，覺得自己的智商似乎下線了，一臉蒙狀態

微信公眾號-- 微信分享功能（分享到朋友和朋友圈顯示圖片和簡介）

4.摸索半天，+++無數次騷擾度娘以後，差不多摸清楚了，everybody跟我走起哈（自己的專案是react框架，主要差不多，其他的根據自己的需求自行調整哈）

（1）準備，設定js介面安全域名

微信公眾號-- 微信分享功能（分享到朋友和朋友圈顯示圖片和簡介）

（2）引入JS檔案

微信公眾號-- 微信分享功能（分享到朋友和朋友圈顯示圖片和簡介）

（3）將要分享出去的頁面URL發給後臺的小夥伴（後臺介面調取成功後，將你需要用到的config配置資訊返回給你，這樣比直接自己寫公眾號的資訊更加安全）

微信公眾號-- 微信分享功能（分享到朋友和朋友圈顯示圖片和簡介）

（4）根據分享的要求，按照官方的介面調取寫法，自由發揮啦啦啦~~~~

  wx.config({
                debug:false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
                appId: json.appId, // 必填，公眾號的唯一標識
                timestamp:json.timestamp , // 必填，生成簽名的時間戳
                nonceStr: json.nonceStr, // 必填，生成簽名的隨機串
                signature: json.signature,// 必填，簽名
                jsApiList: [
                    'onMenuShareTimeline', 'onMenuShareAppMessage',
                    'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'
                ] // 必填，需要使用的JS介面列表
            });
            wx.ready(function() {
                // config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，
                // 則須把相關介面放在ready函式中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。
                //分享到朋友圈
                wx.onMenuShareTimeline({
                    title:shareTitle, // 分享標題
                    link:location.href, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                    imgUrl:"https://jinshang-hz.oss-cn-hangzhou.aliyuncs.com/data/share/images/recruit_action.jpg", // 分享圖示
                    success: function () {
                        // 使用者點選了分享後執行的回撥函式
                        console.log("11");
                    },
                });
                //分享給朋友
                wx.onMenuShareAppMessage({
                    title:shareTitle, // 分享標題
                    desc:mySlogon, // 分享描述
                    link:location.href, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                    imgUrl: "https://jinshang-hz.oss-cn-hangzhou.aliyuncs.com/data/share/images/recruit_action.jpg", // 分享圖示
                    type: '', // 分享型別,music、video或link，不填預設為link
                    dataUrl: '', // 如果type是music或video，則要提供資料連結，預設為空
                    success: function () {
                      // 使用者點選了分享後執行的回撥函式
                        console.log("22");
                    }
                });
複製程式碼

5.參考文章

（1）[http://www.cnblogs.com/stoneniqiu/p/6286599.html]()
（2）[https://blog.csdn.net/HaleyLiu123/article/details/78002835?locationNum=4&fps=1]()
複製程式碼

灰常感謝前面踩坑的前輩們的分享~~~~

相關文章