微信自定義分享網頁標題及內容
阿新 • • 發佈：2018-12-19
- 通過向後臺請求拿到appid,jsapi_ticket等必要引數；
- 網頁匯入微信js-Sdk微信開發文件
- 在wx.reday api中呼叫相關api;
- 直接上程式碼：
html程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微信分享demo</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <link rel="stylesheet" href="./css/index.css"> /*引入jquery,使用ajax請求配置引數*/ <script src="./js/jquery.min.js"></script> /*匯入jssdk,這一步關鍵*/ <script typet="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> </head> <body> <div id="app"> 自定義分享介面 </div> /* js程式碼*/ <script> /*後臺請求引數*/ let url = window.location.href; console.log(location.href); $.ajax({ type: 'post', url: 'https://www.getwei.com/params', data: { url: url }, success: function (response) { if (response.ret === 0) { let appid = response.body.appid; let jsapi_ticket = response.body.jsapi_ticket; let nonceStr = response.body.nonceStr; let signature = response.body.signature; let timestamp = response.body.timestamp; wx.config({ debug: false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。 appId: appid, // 必填，公眾號的唯一標識 timestamp: timestamp, // 必填，生成簽名的時間戳 nonceStr: nonceStr, // 必填，生成簽名的隨機串 signature: signature,// 必填，簽名 /* 需要呼叫的api列表*/ jsApiList: ['chooseImage', 'updateAppMessageShareData','updateTimelineShareData'] }); wx.ready(function () { var link = location.href; wx.updateAppMessageShareData({ title: '我是標題', // 分享標題 desc: '我是描述', // 分享描述 link: link, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: 'https://y.yun.com/promotion/img/topic.jpg', // 自定義圖示需以http:// 開頭 type: 'link', // 分享型別,music、video或link，不填預設為link success: function () { }, cancel: function () { } }); /*f分享到朋友圈*/ wx.updateTimelineShareData({ itle: '我是標題', // 分享標題 link: link, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: 'https://y.yun.com/promotion/img/topic.jpg', // 自定義圖示 type: 'link', // 分享型別,music、video或link，不填預設為link success: function () { // 使用者確認分享後執行的回撥函式 }, cancel: function () { // 使用者取消分享後執行的回撥函式 } }); wx.error(function (res) { console.log(res); // config資訊驗證失敗會執行error函式，如簽名過期導致驗證失敗，具體錯誤資訊可以開啟config的debug模式檢視，也可以在返回的res引數中檢視，對於SPA可以在這裡更新簽名。 }); }); } } }) </script> </body> </html>