微信網頁開發,如何在H5頁面中設定分享的標題,內容以及縮圖
阿新 • • 發佈:2020-09-15
前言
最近的需求是做一個移動端H5的長屏廣告頁,最後需要在微信分享的時候修改文案以及帶上圖片,這個實現起來也不是很複雜。
實現步驟
- 先繫結域名,先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。由於該自定義分享需要藉助微信的jssdk來實現,所以這一步是必須的。
- 引入微信的jssdk,在需要呼叫JS介面的頁面引入如下JS檔案,(支援https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js。
- 通過config介面注入許可權驗證配置,所有需要使用JS-SDK的頁面必須先注入配置資訊,否則將無法呼叫。
// 生成簽名隨機字串 function createNoncerStr() { const chars = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] var noncerStr = "" for (let index = 0; index < 16; index++) { const element = chars[randomNum(0, 51)]; noncerStr += element; } return noncerStr } const nonceStr = createNoncerStr(); wx.config({ debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來,若要檢視傳入的引數,可以在pc端開啟,引數資訊會通過log打出,僅在pc端時才會列印。 appId: '公眾號的id', // 必填,公眾號的唯一標識 timestamp: new Date().getTime(), // 必填,生成簽名的時間戳 nonceStr: nonceStr, // 必填,生成簽名的隨機串 signature: sha1(`jsapi_ticket=${通過後臺介面拿到的jsTicket,如何拿可以去看官網說明}&noncestr=${noncerStr}×tamp=${timestamp}&url=${url}`),// 必填,簽名,sha1方法可以直接引入第三方的js庫 jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData',] // 必填,需要使用的JS介面列表,分享會用到這兩個介面 });
- 配置自定義分享內容
wx.ready(function () { //需在使用者可能點選分享按鈕前就先呼叫 // 自定義“分享給朋友”及“分享到QQ”按鈕的分享內容(1.4.0) window.wx.updateAppMessageShareData({ title: '標題', // 這是分享展示卡片的標題 desc: '描述', // 分享描述 link: '點進去的連結', // 分享連結,該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: '縮圖地址', // 分享圖示 success: function () { // 設定成功 } }) // 自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內容(1.4.0)這個是不支援加入描述的要注意一下 window.wx.updateTimelineShareData({ title: '標題', // 這是分享展示卡片的標題 link: '點進去的連結', // 分享連結,該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: '縮圖地址', // 分享圖示 success: function () { // 設定成功 } }) });
- 完成,開始測試。
小結
之所以寫一下是之前在網上找的一篇部落格明明都是錯的,用了之後沒反應也要發出來,誤導人,浪費時間,所以將自己親測可用的方法記下來