Vue H5微信分享添加圖片 標題 描述

最近公司新加了個需求說個人H5分享在微信裏太難看了（沒圖片 描述是連接，標題是網頁默認title），並且和別人家的不同。而後我去看了一下別人家的果真別人家的網頁分享出來和手機app分享出來的同樣（以前作ios開發，公司須要就學習了一下H5）。因而我就去找了微信官方文檔。

通常的H5網頁分享不能自定義標題 圖片的緣由。

在微信裏不是全部的網頁均可以按照微信友好的分享形式分享的，對於通常的網頁來講（如非被微信屏蔽掉）是能夠分享傳播的，但僅限於分享轉發（就是默認的沒圖片 默認標題 連接顯示）

若是想要更好看，自定義標題 圖片 描述，能夠。必需要微信認證過，加到本身的白名單裏就能夠了 說白點就是要掏錢購買公衆號，在公衆號裏綁定Js安全域名。

首先 咱們須要一個公衆號（必須是通過認證的，沒有認證的或者認證過時的都不能夠），還要有備案過的域名（必須是備案過的，否則是沒法使用的）

1 綁定域名

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。

備註：登陸後可在「開發者中心」查看對應的接口權限

2 引入js文件

在須要調用JS接口的頁面引入以下JS文件，（支持https）：res.wx.qq.com/open/js/jwe…

若是是和我同樣是Vue的在 index.html 文件中的引入

<script type="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.viewid

        let 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) {

          });
        });
      }
複製代碼