Html5頁面二次分享的實現

這篇文章主要介紹了Html5頁面二次分享的實現的相關資料，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。

對於H5頁面來說二次分享還蠻重要的，畢竟qq還是微信發出去之後習慣性的使用自帶的分享功能。和PC端不同，PC直接複製地址了。前兩天在做請柬，踩了不少的雷，個人開發和公司開發還是不一樣，各種問題，其他問題放在一個請柬的後記裡面說吧。我們開始正題。

微信二次分享

微信的文件還是不錯的。通篇看完的話，基本上能避過很多坑（記得微信文檔習慣把一些坑寫在後面，不放在一起）

先說說，怎麼微信怎麼做二次分享

文件位址，透過引入官方API。文件寫挺好，直接傳入shareInfo就得了。

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: sign.appid, // 必填，公众号的唯一标识
    timestamp: sign.timestamp, // 必填，生成签名的时间戳
    nonceStr: sign.nonceStr, // 必填，生成签名的随机串
    signature: sign.signature, // 必填，签名，见附录1
    jsApiList: [
            &#39;onMenuShareTimeline&#39;,
            &#39;onMenuShareAppMessage&#39;,
            &#39;onMenuShareQQ&#39;,
            &#39;onMenuShareWeibo&#39;,
            &#39;onMenuShareQZone&#39;
        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function() {
    wx.showOptionMenu();
    wx.onMenuShareAppMessage(shareInfo); //获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
    wx.onMenuShareTimeline(shareInfo); //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
    wx.onMenuShareQQ(shareInfo); //获取“分享到QQ”按钮点击状态及自定义分享内容接口
    wx.onMenuShareWeibo(shareInfo); //获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
    wx.onMenuShareQZone(shareInfo); //获取“分享到QQ空间”按钮点击状态及自定义分享内容接口
});

微信二次分享有坑嗎？

唉？我寫對了怎麼沒通？文件上下也沒寫有什麼要求呀？

先查看 微信公眾平台-開發-介面權限 發現沒權限的都提示未獲得，然後去進行微信認證，我這個分享介面提示已獲得了呀。上面說過什麼？微信的文件可以去後面查看一般都有說明。就是下面這句話，那麼問題就來了，個人號是沒辦法做認證的。

在iOS和Android都無法分享（請確認公眾號已經認證，只有認證的公眾號才具有分享相關介面權限，如果確實已經認證，則要檢查監聽介面是否在wx.ready回呼函數中觸發）

關於api調不通錯誤整理

• invalid url domain，我的問題是js安全網域沒搞

• invalid url signature#，我的問題是jsapi_ticket沒有更新過來

• #微信JS 介面簽章校驗工具

QQ二次分享先說文檔

網路上流傳的文檔，什麼api的，我試了，不好使。透過地址進去，最後的維護都是15年什麼的。

怎麼去設定二次分享

透過meta標籤是最科學的。

<meta itemprop="name" content="标题" />
<meta itemprop="image" content="副标题" />
<meta name="description" itemprop="description" content="分享图" />

有沒有什麼要注意的

這個meta標籤不能後添加，必須進入頁面的時候就有，也就是說只能走後台模板。不然的話，部分Android低版本拉取不到摘要（是的，有的手機動態的可以拿到），iOS不支援。

其實技術類文章都是有時效的

本文寫於2018年7月30日

測試時間2018年7月30日

#總結：以上就是本篇的全部內容，希望對大家的學習有所幫助。更多相關教學請造訪Html5影片教學！

相關推薦：

php公益訓練影片教學

#HTML5圖文教學

HTML5線上手冊

以上是Html5頁面二次分享的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！