ホームページ > 記事 > ウェブフロントエンド > HTML5ページの二次共有の実装

HTML5ページの二次共有の実装

青灯夜游転載: 2018-10-09 16:43:103388ブラウズ

この記事は、HTML5 ページの二次共有の実装に関する関連情報を主に紹介しています。必要な方は参考にしていただければ幸いです。

H5 ページにとって二次共有は非常に重要です。結局のところ、QQ または WeChat は送信後に独自の共有機能を習慣的に使用します。 PC側とは異なり、PCはアドレスを直接コピーします。 2 日前に招待状を作成していましたが、多くの間違いに遭遇しました。個人の開発と企業の開発は依然として異なります。招待状の追記には、さまざまな問題やその他の問題が記載されています。本題に入りましょう。

WeChat の二次共有

WeChat のドキュメントは非常に充実しています。記事全体を読めば、基本的に多くの落とし穴を回避できます (WeChat ドキュメントは、いくつかの落とし穴をまとめるのではなく、最後にいくつかの落とし穴を書くために使用されることに注意してください)

まず始めに説明します。 WeChatでのやり方について話します公式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空间”按钮点击状态及自定义分享内容接口
});

WeChat での二次共有に落とし穴はありますか? ＃＃＃＃＃＃＃＃＃＃＃＃良い？正しく書いたのに、なぜうまくいかないのでしょうか？文書に要件が記載されていませんか？まず、WeChat パブリックプラットフォーム - 開発インターフェイスの権限を確認し、権限を持っていない人には、権限が取得されていないことを示すメッセージが表示されることを確認してから、共有インターフェイスに権限を取得したことを示すメッセージが表示されます。上では何と言われましたか？ WeChat のドキュメントは巻末にあり、一般的な手順が記載されています。これは以下の文ですが、問題は個人アカウントが認証できないということです。

iOS と Android の両方で共有することはできません (公式アカウントが認証されていることを確認してください。認証された公式アカウントのみが関連インターフェイスを共有する権限を持ちます。実際に認証されている場合は、リスニングインターフェイスが有効になっているかどうかを確認してください) wx.ready コールバック関数トリガーされる場所)

API 調整失敗エラーの並べ替えについて

無効な URL ドメイン

無効な URL 署名
jsapi_ticket
が更新されていないことです WeChat JS インターフェイス署名検証ツール
QQ 2 番目の共有まずドキュメントについて話しましょう

ドキュメントインターネット上で出回っているAPIを試してみましたが、うまくいきません。住所から入って最終保守は15年とかです。

二次共有を設定する方法

最も科学的な方法は、メタタグを使用することです。

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

注意すべき点はありますか

このメタタグは後で追加できません。ページに入るときに存在する必要があります。つまり、背景テンプレートのみを使用できます。そうしないと、一部の

Android

下位バージョンでは概要を取得できず (はい、一部の携帯電話では動的に取得できます)、

iOS

はそれをサポートしません。実際、技術記事は時間に左右されますこの記事は 2018 年 7 月 30 日に書かれました

2018 年 7 月 30 日にテストされました

概要:以上がこの記事の全内容ですので、皆様の学習のお役に立てれば幸いです。関連チュートリアルの詳細については、

Html5 ビデオチュートリアル

をご覧ください。

HTML5ページの二次共有の実装

関連記事