Vue H5微信分享添加圖片 標(biāo)題 描述

最近公司新加了個(gè)需求說(shuō)我的H5分享在微信里太難看了（沒(méi)圖片 描述是鏈接，標(biāo)題是網(wǎng)頁(yè)默認(rèn)title），而且和別人家的不一樣。然后我去看了一下別人家的果然別人家的網(wǎng)頁(yè)分享出來(lái)和手機(jī)app分享出來(lái)的一樣（之前做ios開(kāi)發(fā)，公司需要就學(xué)習(xí)了一下H5）。于是我就去找了微信官方文檔。

一般的H5網(wǎng)頁(yè)分享不能自定義標(biāo)題 圖片的原因。

在微信里不是所有的網(wǎng)頁(yè)都可以按照微信友好的分享形式分享的，對(duì)于一般的網(wǎng)頁(yè)來(lái)說(shuō)（如非被微信屏蔽掉）是可以分享傳播的，但僅限于分享轉(zhuǎn)發(fā)（就是默認(rèn)的沒(méi)圖片 默認(rèn)標(biāo)題 鏈接顯示）

如果想要更好看，自定義標(biāo)題 圖片 描述，可以。必須要微信認(rèn)證過(guò)，加到自己的白名單里就可以了 說(shuō)白點(diǎn)就是要掏錢(qián)購(gòu)買(mǎi)公眾號(hào)，在公眾號(hào)里綁定Js安全域名。

首先 我們需要一個(gè)公眾號(hào)（必須是經(jīng)過(guò)認(rèn)證的，沒(méi)有認(rèn)證的或者認(rèn)證過(guò)期的都不可以），還要有備案過(guò)的域名（必須是備案過(guò)的，不然是無(wú)法使用的）

1 綁定域名

先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫(xiě)“JS接口安全域名”。

備注：登錄后可在“開(kāi)發(fā)者中心”查看對(duì)應(yīng)的接口權(quán)限

2 引入js文件

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

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

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

3 通過(guò)config接口注入權(quán)限驗(yàn)證配置

所有需要使用JS-SDK的頁(yè)面必須先注入配置信息，否則將無(wú)法調(diào)用
(同一個(gè)url僅需調(diào)用一次，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用）

也就是說(shuō)如果你所分享的是多頁(yè)面的并且都想讓別人從H5 入口頁(yè)面進(jìn)入那么你只需要進(jìn)入時(shí)配置一次信息就可以了，并不需要每個(gè)頁(yè)面配置一次.

1 首先你需要從后臺(tái)獲取分享配置信息

你需要上傳你要分享的的網(wǎng)頁(yè)鏈接的 # 以前的
對(duì)當(dāng)前頁(yè)面鏈接以# 切割獲取# 以前部分進(jìn)行編碼（后臺(tái)需要相應(yīng)的解碼）

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

然后傳給后臺(tái)獲取配置信息。（因?yàn)楹灻歉鶕?jù)你當(dāng)前的分享鏈接 和時(shí)間戳生成的），其實(shí)這樣我們分享出去的鏈接是被微信加過(guò)簽名參數(shù)的鏈接，和我們看的鏈接有點(diǎn)不一樣了

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

獲取回來(lái)的配置信息

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

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

wx.config({

})

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

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

wx.ready(function () {

})
上面 config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來(lái)確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。

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 掛載的分享的配置信息

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

wx.error(function (res) {

})
在error 函數(shù)中可獲取的錯(cuò)誤信息，尤其是配置信息的錯(cuò)誤，因?yàn)樾枰扰渲门渲眯畔⑷缓笪⑿膨?yàn)證，驗(yàn)證通過(guò)后再調(diào)用 wx.ready() 里的分享配置信息（其實(shí)驗(yàn)證不通過(guò)也會(huì)走 應(yīng)該是異步的）

所以在這里看錯(cuò)誤信息很重要 可以加 alert 當(dāng)然如果是調(diào)試模式它自己也會(huì)跳出alert 提示

注意

發(fā)生錯(cuò)誤信息檢查
1 公眾號(hào) appid是否綁對(duì)了
2 安全域名是否改了
3 就是取配置信息的時(shí)候是否取到并且上傳對(duì)了（我就是以為對(duì)著api字段就沒(méi)事兒，結(jié)果有個(gè)字段和后臺(tái)傳過(guò)來(lái)的不一致然后一直配置信息失敗 提示 invalid signature）

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

share() {

        //對(duì)url 進(jìn)行編碼

        var localUrl = encodeURIComponent(location.href.split('#')[0]);//
        // //url傳到后臺(tái)的格式
        // var url = 'URL=' + localUrl;
        // //這幾個(gè)參數(shù)都是后臺(tái)從微信公眾平臺(tái)獲取到的
        // 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
          //通過(guò)微信config接口注入配置
          wx.config({
            debug: false, //默認(rèn)為false 為true的時(shí)候是調(diào)試模式，會(huì)打印出日志
            appId: appId,
            timestamp: timestamp,
            nonceStr: nonStr,
            signature: signature,
            jsApiList: [
              'checkJsApi',
              'onMenuShareTimeline',
              'onMenuShareAppMessage',
              'onMenuShareQQ',
              'onMenuShareWeibo',
              'onMenuShareQZone',
              'updateAppMessageShareData',
              'updateTimelineShareData',
            ],
          });

          //配置自定義分享內(nèi)容
          window.share_config = {
            share: {

              title:  `自定義標(biāo)題`, // 這是分享展示卡片的標(biāo)題
              desc: `自定義描述`, // 這是分享展示的摘要
              link: `要分享的鏈接`, // 這里是分享的網(wǎng)址
              imgUrl: `右下角顯示圖標(biāo)`, // 這里是需要展示的圖標(biāo)
              success: function (rr) {
             ` 分享成功回調(diào) 可以在這兒加 alert 打印 便于調(diào)試`
                console.log('成功' + JSON.stringify(rr))
              },
              cancel: function (tt) {
              ` 分享失敗回調(diào) 可以在這兒加 alert 打印 便于調(diào)試`
                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) {

          });
        });
      }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 先引入JS 文件 this.wxShare() 在created里調(diào)用 首先登陸微信公眾號(hào) JSSDK使用步驟 步...
    寄魚(yú)予海與你閱讀 6,959評(píng)論 1贊 3
  • 1. 準(zhǔn)備工作 1.1 查看公眾號(hào)分享接口權(quán)限 要使用微信SDK必須要有經(jīng)過(guò)微信認(rèn)證的非個(gè)人服務(wù)號(hào) 登陸服務(wù)號(hào)后，...
    sxplus閱讀 6,724評(píng)論 0贊 2
  • 必要的前提準(zhǔn)備 PS：本文的方法只適合6.0.2.58以及更高版本的微信客戶端。舊版參考這個(gè)非官方的API 這幾個(gè)...
    小茉茉茉閱讀 464評(píng)論 0贊 0
  • 本該開(kāi)始旅行的第一天，橙子睡到了日上三竿。 啊……這就是放假的生活節(jié)奏。 三亞的早晨太陽(yáng)起的比雞早，橙子睜開(kāi)眼的一...
    馬每每閱讀 215評(píng)論 0贊 0
  • 1987年，開(kāi)學(xué)第一天。xx小學(xué)迎來(lái)了兩位插班生。一男一女。分別就讀于校里唯有的兩班五年級(jí)班。很巧，兩班的...
    Rebecca飛翔閱讀 122評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容