微信H5開發分享添加圖片標題描述的方法

時間：2019-08-28 02:05:16 | 來源：

在微信里不是所有的網頁都可以按照微信友好的分享形式分享的，對于一般的網頁來說（如非被微信屏蔽掉）是可以分享傳播的，但僅限于分享轉發（就是默認的沒圖片默認標題鏈接顯示）

如果想要更好看，自定義標題圖片描述，可以。必須要微信認證過，加到自己的白名單里就可以了說白點就是要掏錢購買公眾號，在公眾號里綁定Js安全域名。

1 綁定域名

先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。

備注：登錄后可在“開發者中心”查看對應的接口權限

2 引入js文件

在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js

如果是和我一樣是Vue的在 index.html 文件中的引入

<scripttype="text/javascript"src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

3 通過config接口注入權限驗證配置

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用
(同一個url僅需調用一次，對于變化url的SPA的web app可在每次url變化時進行調用）

也就是說如果你所分享的是多頁面的并且都想讓別人從H5 入口頁面進入那么你只需要進入時配置一次信息就可以了，并不需要每個頁面配置一次.

1 首先你需要從后臺獲取分享配置信息

你需要上傳你要分享的的網頁鏈接的 # 以前的
對當前頁面鏈接以# 切割獲取# 以前部分進行編碼（后臺需要相應的解碼）

var localUrl = encodeURIComponent(location.href.split('#')[0])

然后傳給后臺獲取配置信息。（因為簽名是根據你當前的分享鏈接和時間戳生成的），其實這樣我們分享出去的鏈接是被微信加過簽名參數的鏈接，和我們看的鏈接有點不一樣了

 httpGet('xforh5/service/sys/wechat/js/config?url=' + localUrl, {}).then(response => {  //在這里獲取到配置信息 進行配置 }

獲取回來的配置信息

{
"status": 0,
"result": {
"appId": "wx9e3d362372762cc1",
"timestamp": 1563269390,
"nonStr": "u1n8BylqEcBBlkZ7",
"signature": "72a46eac7b1505e51b148b0949f1f8e90e5ef9ab"
}
}

獲取到配置信息后就已完成大半了，接下來就要用的引入的微信 JS Api

wx.config({

})

wx.config({            debug: false, //默認為false 為true的時候是調試模式，開啟調試模式,調用的所有api的返回值會在客戶端alert出            appId: appId,//必填，公眾號的唯一標識            timestamp: timestamp,// 必填，生成簽名的時間戳            nonceStr: nonStr,// 必填，生成簽名的隨機串            signature: signature,// 必填，簽名// 必填，需要使用的JS接口列表            jsApiList: [              'checkJsApi',              'onMenuShareTimeline',              'onMenuShareAppMessage',              'onMenuShareQQ',              'onMenuShareWeibo',              'onMenuShareQZone',              'updateAppMessageShareData',              'updateTimelineShareData',            ],          });

需要的JS接口列表根據公司分享需要選擇接口

wx.ready(function () {

})
上面 config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對于用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。

wx.ready(function () {            wx.onMenuShareAppMessage(window.share_config.share); // 微信好友            wx.onMenuShareTimeline(window.share_config.share); // 微信朋友圈            wx.onMenuShareQQ(window.share_config.share); // QQ            wx.updateAppMessageShareData(window.share_config.share);              wx.updateTimelineShareData(window.share_config.share);          });

window.share_config.share 掛載的分享的配置信息

//配置自定義分享內容
window.share_config = {
share: {
title: 自定義標題, // 這是分享展示卡片的標題
desc: 自定義描述, // 這是分享展示的摘要
link: 要分享的鏈接, // 這里是分享的網址
imgUrl: 右下角顯示圖標, // 這里是需要展示的圖標
success: function (rr) {
分享成功回調可以在這兒加 alert 打印便于調試
console.log('成功' + JSON.stringify(rr))
},
cancel: function (tt) {
分享失敗回調可以在這兒加 alert 打印便于調試
console.log('失敗' + JSON.stringify(tt));
}
}
};

wx.error(function (res) {

})
在error 函數中可獲取的錯誤信息，尤其是配置信息的錯誤，因為需要先配置配置信息然后微信驗證，驗證通過后再調用 wx.ready() 里的分享配置信息（其實驗證不通過也會走應該是異步的）

所以在這里看錯誤信息很重要可以加 alert 當然如果是調試模式它自己也會跳出alert 提示

注意

發生錯誤信息檢查
1 公眾號 appid是否綁對了
2 安全域名是否改了
3 就是取配置信息的時候是否取到并且上傳對了（我就是以為對著api字段就沒事兒，結果有個字段和后臺傳過來的不一致然后一直配置信息失敗提示 invalid signature）

最后附上完整分享函數只需要在你獲取到需要分享的必要信息在調用（記得修改里面的參數）

share() {        //對url 進行編碼var localUrl = encodeURIComponent(location.href.split('#')[0]);//// //url傳到后臺的格式// var url = 'URL=' + localUrl;// //這幾個參數都是后臺從微信公眾平臺獲取到的// var nonceStr,signature,timestamp,appId,shareUrl;//+ this.$route.query.viewidlet currentUrl = location.href        httpGet('xforh5/service/sys/wechat/js/config?url=' + localUrl, {}).then(response => {          const {appId, nonStr, signature, timestamp} = response.result          //通過微信config接口注入配置          wx.config({            debug: false, //默認為false 為true的時候是調試模式，會打印出日志            appId: appId,            timestamp: timestamp,            nonceStr: nonStr,            signature: signature,            jsApiList: [              'checkJsApi',              'onMenuShareTimeline',              'onMenuShareAppMessage',              'onMenuShareQQ',              'onMenuShareWeibo',              'onMenuShareQZone',              'updateAppMessageShareData',              'updateTimelineShareData',            ],          });          //配置自定義分享內容window.share_config = {            share: {              title:  `自定義標題`, // 這是分享展示卡片的標題              desc: `自定義描述`, // 這是分享展示的摘要              link: `要分享的鏈接`, // 這里是分享的網址              imgUrl: `右下角顯示圖標`, // 這里是需要展示的圖標              success: function (rr) {             ` 分享成功回調 可以在這兒加 alert 打印 便于調試`console.log('成功' + JSON.stringify(rr))              },              cancel: function (tt) {              ` 分享失敗回調 可以在這兒加 alert 打印 便于調試`console.log('失敗' + JSON.stringify(tt));              }            }          };          // config          wx.ready(function () {            wx.onMenuShareAppMessage(window.share_config.share); // 微信好友            wx.onMenuShareTimeline(window.share_config.share); // 微信朋友圈            wx.onMenuShareQQ(window.share_config.share); // QQ            wx.updateAppMessageShareData(window.share_config.share);              wx.updateTimelineShareData(window.share_config.share);          });          wx.error(function (res) {          });        });      }