App下載

在Html5怎么實(shí)現(xiàn)頁(yè)面二次分享?相關(guān)代碼經(jīng)驗(yàn)分享!

猿友 2021-07-15 14:02:30 瀏覽數(shù) (1969)
反饋

有接觸過(guò)前端開(kāi)發(fā)的小伙伴們應(yīng)該都比較清楚,在HTML5中頁(yè)面二次分享是比較重要的,那么我們要怎么實(shí)現(xiàn)呢?那么今天我們就來(lái)說(shuō)說(shuō):“在Html5怎么實(shí)現(xiàn)頁(yè)面二次分享?”這個(gè)問(wèn)題。

微信二次分享

微信的文檔還是不錯(cuò)的。通篇看完的話,基本上能避過(guò)很多坑(記得微信文檔習(xí)慣把一些坑寫(xiě)在后面,不放在一起)

先說(shuō)說(shuō),怎么微信怎么做二次分享

文檔地址,通過(guò)引入官方API。文檔寫(xiě)挺好,直接傳入shareInfo就得了。

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
wx.config({
    debug: false, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái),若要查看傳入的參數(shù),可以在pc端打開(kāi),參數(shù)信息會(huì)通過(guò)log打出,僅在pc端時(shí)才會(huì)打印。
    appId: sign.appid, // 必填,公眾號(hào)的唯一標(biāo)識(shí)
    timestamp: sign.timestamp, // 必填,生成簽名的時(shí)間戳
    nonceStr: sign.nonceStr, // 必填,生成簽名的隨機(jī)串
    signature: sign.signature, // 必填,簽名,見(jiàn)附錄1
    jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone'
        ] // 必填,需要使用的JS接口列表,所有JS接口列表見(jiàn)附錄2
});
wx.ready(function() {
    wx.showOptionMenu();
    wx.onMenuShareAppMessage(shareInfo); //獲取“分享給朋友”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口(即將廢棄)
    wx.onMenuShareTimeline(shareInfo); //獲取“分享到朋友圈”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口(即將廢棄)
    wx.onMenuShareQQ(shareInfo); //獲取“分享到QQ”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口
    wx.onMenuShareWeibo(shareInfo); //獲取“分享到騰訊微博”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口
    wx.onMenuShareQZone(shareInfo); //獲取“分享到QQ空間”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口
});

微信二次分享有坑嗎?

唉?我寫(xiě)對(duì)了怎么沒(méi)通?文檔上下也沒(méi)寫(xiě)有什么要求呀?

先查看 微信公眾平臺(tái)-開(kāi)發(fā)-接口權(quán)限 發(fā)現(xiàn)沒(méi)權(quán)限的都提示未獲得,然后去進(jìn)行微信認(rèn)證,我這個(gè)分享接口提示已獲得了呀。上面說(shuō)過(guò)什么?微信的文檔可以去后面查看一般都有說(shuō)明。就是下面這句話,那么問(wèn)題就來(lái)了,個(gè)人號(hào)是沒(méi)法做認(rèn)證的。

在iOS和Android都無(wú)法分享(請(qǐng)確認(rèn)公眾號(hào)已經(jīng)認(rèn)證,只有認(rèn)證的公眾號(hào)才具有分享相關(guān)接口權(quán)限,如果確實(shí)已經(jīng)認(rèn)證,則要檢查監(jiān)聽(tīng)接口是否在wx.ready回調(diào)函數(shù)中觸發(fā))

關(guān)于api調(diào)不通錯(cuò)誤整理

  • invalid url domain,我的問(wèn)題是js安全域名沒(méi)搞
  • invalid url signature,我的問(wèn)題是jsapi_ticket沒(méi)有更新過(guò)來(lái)
  • 微信 JS 接口簽名校驗(yàn)工具

QQ二次分享先說(shuō)文檔

網(wǎng)上流傳的文檔,什么api的,我試了,不好使。通過(guò)地址進(jìn)去,最后的維護(hù)都是15年什么的。

怎么去設(shè)置二次分享

通過(guò)meta標(biāo)簽是最科學(xué)的。

<meta itemprop="name" content="標(biāo)題" />
<meta itemprop="image" content="副標(biāo)題" />
<meta name="description" itemprop="description" content="分享圖" />

有沒(méi)有什么要注意的

這個(gè)meta標(biāo)簽不能后添加,必須進(jìn)入頁(yè)面的時(shí)候就有,也就是說(shuō)只能走后臺(tái)模板。不然的話,部分Android低版本拉取不到摘要(是的,有的手機(jī)動(dòng)態(tài)的可以拿到),iOS不支持。

通過(guò)分享內(nèi)容中我們就對(duì)于:“在Html5怎么實(shí)現(xiàn)頁(yè)面二次分享?”這個(gè)問(wèn)題有不少的認(rèn)知,那么更多有關(guān)于html5這方面的相對(duì)于知識(shí)我們都可以在W3Cschool中學(xué)習(xí)和了解。 


0 人點(diǎn)贊