この記事で紹介する内容は、モバイル H5 開発で遭遇する問題とその解決策に関するものであり、一定の参考価値があります。困っている友人は参考にしていただければ幸いです。
WeChat 共有署名エラー無効な署名
vue 単一ページ アプリケーション履歴モードでは、WeChat 共有で常に署名エラー無効な署名が表示されます
WeChat 公式 Web サイトのドキュメント、jssdk によるとが導入され、js セキュア ドメイン名を正しく構成し、バックエンド開発者によって生成された署名も WeChat 署名ツールによって検証されますが、フロントエンドのカスタム共有では常に署名エラーが報告され、それを確認する方法はありません。基本設定に問題がなく、署名も WeChat 署名ツールの検証に合格した場合は、フロントエンドがアクセスする URL と URL の不一致によって署名エラーが発生している可能性があります。
フロントエンドが署名を取得するために ajax を介して URL をバックエンドに渡す場合、現在のページのリンクのハッシュ部分を削除する必要があります。 to encodeURIComponent
let url = location.href.split('#')[0] encodeURIComponent(url)
通常、これで WeChat でのカスタム共有を実現できますが、シングルページ アプリケーションのルーティングが切り替わった後も、IOS 側では依然として署名エラーが表示されますが、Android 側では問題ありません
これは、履歴モードのビューがpushStateを通じて切り替えられるためですが、IOS WeChatクライアント(Androidクライアントは修復されています)はpushStateの新しいH5機能をサポートしていないため、ルーティングは変更されますが、WeChatブラウザはURLを取得します。変更されていません。右上隅のリンクをコピーすると、WeChat によって記録された URL が最初に入力したときの URL のままであることがわかります。手動で更新するか、window.location などのページ ジャンプ メソッドを使用して更新しない限り、最新の URL
解決策は、ページに入るときに URL を記録することです。iOS デバイスの場合は、この URL を使用して WeChat 署名を取得します。
router.afterEach(to => { sessionStorage.setItem('currentUrl',window.location.href) }) let url = encodeURIComponent(location.href.split('#')[0]) if(system == "iOS" && sessionStorage.getItem('currentUrl')) { url = encodeURIComponent(sessionStorage.getItem('currentUrl').split('#')[0]) }
現時点では、この URL を使用して WeChat 署名を取得するのが正しいです。この方法は、IOS デバイスの場合にのみ適しています。署名された URL が WeChat によって記録された URL と一致している限り、正しいものになります。
ブラウザの「進む」ボタンと「戻る」ボタンをクリックすると、js が自動的に実行されないことがあります。特に Safari では、これはラウンド トリップ キャッシュ (bfcache) に関係しています。
解決策: window.onunload = function(){};
Vue シングルページ アプリケーションでキープアライブが使用されている場合、ページは更新されません。このとき、一部のインターフェイスはbeforeRouteEnterメソッドに置く
この書き方new Date("2019-01 -01 00:00:00") は Android 側ではサポートされていますが、IOS 側ではサポートされておらず、NAN エラーが報告されるため、new Date("2019- 01-01 00:00:00") から新しい日付("2019/01/01 00:00:00") このフォーム
let date = '2019-01-01 00:00:00' date.replace(/\-/g, '/')
複数のQRがある可能性がありますページ上にコードが複数ありますが、長押しすると 2 つ識別されます QR コードは最後の QR コードのみを認識します。現時点では、ページの表示領域に 1 つの QR コードのみが表示されるように制御する必要があります。
IOS ではクリックできませんspan、p などはデフォルトではクリックできませんクリックされたラベル、クリック イベントの監視は IOS では無効です解決策、カーソル: ポインタ;
# を追加してください##audio オーディオを再生できません
オーディオが正常かどうかは、loadeddata メソッドを監視することで確認できます 再生を開始します Android はオーディオがロードされた後に再生を開始するように設定されていますが、 iOS 側で若干の遅延が発生する可能性があります。この時点で、audio.currentTime を通じてオーディオの再生が開始されたかどうかを取得できます。この値が 0 より大きい場合、再生が開始されたことを意味します。
IOS モバイル端末のクリック イベントに対する応答が 300ms 遅延する
この記事はここにすべてありますが、他にも興味深いコンテンツがあります。 PHP 中国語 Web サイトの
以上がモバイル H5 開発で遭遇する問題と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。