最近、同社は学生が投票するための H5 ページを作成しました。これは主に WeChat で使用されており、WeChat 共有機能を追加する必要があります。
この記事では主に、WeChat 共有インターフェースを呼び出す際に注意が必要な事項を記録します。
1. フロントエンドで使用される angular1 フレームワークの場合、まずインデックス ページに WeChat インターフェイス ファイルを導入する必要があります。
<script src=http://res.wx.qq.com/open/js/jweixin-1.2.0.js></script>
2. myApp.run ファイルに WeChat 共有関数を記述します。この関数は、現在のページの URL を取得して解析し、それをバックエンドに送信して、対応する署名を生成し、コードを直接アップロードする必要があることに注意してください。
// WeChat 共有関数 function wxShare() { var url = $location.absUrl().split('#')[0]; wxServices.postWxShare(url).then(function (res) { if (res.data.コード == 0) { var respanse = res.data.data; wx.config({ デバッグ: false, //デバッグ モードをオンにすると、すべての API 呼び出しの戻り値がクライアント側でアラートされ、受信パラメータを表示する場合は、PC 側でパラメータ情報が表示されます。ログに記録され、appId は PC 側でのみ出力されます。 respanse.appId, timestamp: respanse.timestamp, // 必須、署名のタイムスタンプを生成します。 nonceStr: respanse.nonceStr, // 必須、ランダムな文字列署名を生成します。サイン： respanse.signature,//必須、署名 jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']//必須、使用する必要がある JS インターフェースのリスト}) } } ) }現在の URL を解析した後、バックエンドは appId、タイムスタンプ、ランダムな文字列、署名を返し、必要に応じてインターフェイス リスト (jsApiList) を手動で追加する必要があります。配列の形式はここでのみ必要です。
デバッグ時に debug を true に変更すると、WeChat インターフェイスが呼び出されるたびにインターフェイス情報が警告され、インターフェイス呼び出しが正常かどうかを簡単に確認できるようになります。
3. この機能の後、共有コンテンツをカスタマイズします。コードは次のとおりです。
wx.ready(function () { var obj = { title: 'SPBCN チーム対抗戦が投票を開始しました!', // タイトルを共有します desc: 'SPBCN チーム対抗戦が投票を開始しました、ぜひ応援に来てください!', // 説明を共有しますlink: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // リンクを共有する場合、リンクのドメイン名またはパスは、現在のアカウントに対応するパブリック アカウントの JS セキュリティ ドメイン名と一致している必要があります。ページ //ユーザー コードを取得する必要があるため、このリンクはリダイレクト リンクですが、コードを取得するために WeChat へのリンクを直接書き込むことはできません。 // したがって、リダイレクトを実装し、ページを再度開くには、クリックして新しいページをリロードする必要があります。コードを取得する WeChat リンク、ユーザー情報を取得する関数を実装する imgUrl: 'http://cdn.spbcn.org/img/logo-image.png', // アイコンの共有失敗: function (res) {アラート(JSON.stringify(res)) ; }; // 2.1 友達への共有、ボタンのクリック、カスタマイズされた共有コンテンツと共有結果インターフェイスを監視します wx.onMenuShareAppMessage(obj); // 2.2 モーメントへの共有を監視するボタン クリック、カスタマイズされた共有コンテンツと共有結果インターフェイス wx.onMenuShareTimeline (obj) ; // 2.3 QQ への共有ボタンのクリックを監視し、共有コンテンツと共有結果インターフェイスをカスタマイズします wx.onMenuShareQQ(obj); 2.4 Weibo の共有ボタンのクリックを監視し、共有コンテンツと共有結果インターフェイスをカスタマイズします。 wx.onMenuShareWeibo(obj); // 2.5 QZone の共有ボタンのクリックを監視し、共有コンテンツと共有インターフェイスをカスタマイズします。 wx. onMenuShareQZone(obj);wx.ready は、wx.config の後に自動的に実行されます。コンテンツを共有するための一般的なオブジェクトを定義し、必要に応じて、友人、友人のサークル、Weibo などを共有するための別のコンテンツを定義することもできます。詳細については、WeChat インターフェースのドキュメント。
主に共有リンクに重点を置きます。リンクは公式アカウントによって設定された JS セキュア ドメイン名の下にある必要があります。そうでない場合、共有は成功しません。
共有失敗の症状は、共有リンク画像がカスタマイズした画像を読み込めないことと、共有タイトルが正しくないことです。
5. 私のプロジェクトは投票用なので、クリックするたびにユーザー コードを取得する必要があります。記事を共有するだけでユーザー情報が必要ない場合は、リンクを記事のリンクに変更するだけです。
6. 投票カテゴリについては、リンクをリダイレクトするという特別な処理を行っています。H5 が WeChat ユーザー情報を取得するには 2 つの方法があることは誰もが知っています。1 つは WeChat 公式アカウントをフォローする方法です。ユーザーがユーザーの公開情報を取得するには、「OK」をクリックします。ただし、これらは両方とも WeChat の要件に従って特別な WeChat リンクに接続する必要があります。そのため、ドメイン名は WeChat に付属しており、私たち自身のパブリック アカウントの JS 安全なドメイン名ではありません。
7. したがって、共有リンクの場合、ユーザー コードを取得する必要がある場合は、他の方法を使用して取得する必要があります。私が使用したのは、空白のページを追加し、ページが読み込まれた後に WeChat にジャンプして取得することです。コード リンク http://dev.spbcn.org/wechat-vote-phone/redirect.html このリンクは空白のページです。このページのコードは次のとおりです。
window.onload = function () { //リダイレクト リンクは、WeChat 公式アカウントのユーザー コードを取得するためのリンクと同じです window.location.href=https://open.weixin.qq.com/connect/oauth2/authorize?appid=public account appid&redirect_uri =http%3A%2F%2Fdev.spbcn.org%2Fwechat-vote-phone?type=weixin&scope=snsapi_userinfo&response_type=code&state=STATE#wechat_redirect }8. この方法には欠点があります。つまり、余分な空白のページが追加されるということです。誰でもメッセージを残していただけます。
9. この手順を追加しない場合、共有リンクは正常に表示されますが、コードを取得できず、バックエンドがユーザーを特定できないため、ユーザーの投票を制限できなくなります。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。