WeChat で HTML5 ページの共有を実装する方法

WeChat の共​​有は一見複雑に見えるかもしれませんが、実際は非常に簡単です。 WeChat でリリースされた WeChat jssdk を呼び出し、いくつかの設定を追加するだけで、WeChat での h5 ページの共有を実現できます。公式ドキュメントのアドレスは、https://mp.weixin.qq.com/wiki?t=resource/res_main&id です。 =mp1421141115

既存の公式アカウントの appid を検索し、この appid と URL に基づいてバックエンドにリクエストを送信し、構成に必要なパラメーター (タイムスタンプ、noncestr、署名) を取得します。

WeChat公式サイトのJS-SDKファイルをscriptタグで導入

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

2. 基本構成

 wx.config({ debug: false, // デバッグモードを有効にするかどうか appId: appid, //appid timestamp: timestamp, // timestamp nonceStr: noncestr, // ランダムな文字列 Signature: Signature, // Signature jsApiList: [ ' onMenuShareTimeline '、'onMenuShareAppMessage'、'onMenuShareQQ'、'onMenuShareWeibo'、'onMenuShareQZone' ] // 使用する JS インターフェースのリスト})

3. 使用する

 wx.ready(function(){ // 友達に共有 wx.onMenuShareAppMessage({ title: title, // タイトルを共有 desc: desc, // 説明を共有 link: link, // リンクを共有 imgUrl: imgUrl, // アイコンを共有成功: function () { doShareDone() }, cancel: function () { doShareCancel() } }) //モーメントで共有 wx.onMenuShareTimeline({ title: title, // タイトルを共有 link: link, // リンクを共有 imgUrl: imgUrl, // アイコンを共有成功: function () { doShareDone() }, cancel: function () { doShareCancel () } })}) 

 // 共有成功コールバック関数 doShareDone () { console.log('共有成功')} 

 //共有キャンセルコールバック関数 doShareCancel () { console.log('共有キャンセル')}

wx.config の debug フィールドが true に設定されている場合、デバッグを実行できます。

デバッグするには、WeChat 開発者ツールを使用し、公式アカウント Web ページ プロジェクトを選択し、ページ アドレスを入力する必要があります。

WeChat JS-SDK ドキュメントの付録 5 には、ほとんどの問題に対する解決策が記載されています。ここでは、上記の解決策が提供されていない問題をいくつか挙げます。

1. キャッチされない TypeError: 未定義のプロパティ 'config' を読み取れません

解決策: HTML ページで SDK が別途導入され、統合されたコンポーネントでも SDK が再導入されるため、どちらかを削除すると問題が発生します。

2. Uncaught (in Promise) TypeError: 未定義のプロパティ 'ready' を読み取れません

解決策: 問題 1 と同じ。

3. 無効な署名

解決策: このドキュメントのどの方法でもこの問題を解決できない場合は、最初に最も基本的な構成をセットアップして、必要なさまざまなパラメーターを使用して共有コピーをセットアップするという別の方法があります。問題が発生しました。設定後、正常に共有されました。少しわかりにくいかもしれませんが、簡単に理解すると、ページの構成が正常に構成されている限り、この共有構成の署名が無効であっても、他の共有の構成を続行できるということです。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。