モバイル H5 開発で遭遇する問題と解決策

この記事で紹介する内容は、モバイル 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メソッドに置く

IOSはnew Date("2019-01-01 00:00:00")の形式をサポートしていません

この書き方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, '/')

WeChat QRコード

複数のQRがある可能性がありますページ上にコードが複数ありますが、長押しすると 2 つ識別されます QR コードは最後の QR コードのみを認識します。現時点では、ページの表示領域に 1 つの QR コードのみが表示されるように制御する必要があります。

IOS ではクリックできません

span、p などはデフォルトではクリックできませんクリックされたラベル、クリック イベントの監視は IOS では無効です

解決策、カーソル: ポインタ;
# を追加してください##audio オーディオを再生できません

audio.play() メソッドは Android デバイスでは正常に再生できますが、IOS クライアントでは再生できません。オーディオの src を設定した後、次の行を追加する必要がありますコード

audio.load() でオーディオをロードします

オーディオが正常かどうかは、loadeddata メソッドを監視することで確認できます 再生を開始します Android はオーディオがロードされた後に再生を開始するように設定されていますが、 iOS 側で若干の遅延が発生する可能性があります。この時点で、audio.currentTime を通じてオーディオの再生が開始されたかどうかを取得できます。この値が 0 より大きい場合、再生が開始されたことを意味します。

IOS モバイル端末のクリック イベントに対する応答が 300ms 遅延する

修正された問題

ios8 より前のシステムでは、小さなキーボードがアクティブになると、位置が浮く問題が発生します。解決策は: css を追加するだけです。中間部分の外側のレイヤー p にスタイルを追加します。

position:fixed;top:50px;bottom:50px;overflow:scroll;

この記事はここにすべてありますが、他にも興味深いコンテンツがあります。 PHP 中国語 Web サイトの

HTML5 ビデオ チュートリアル

列に注目してください。

以上がモバイル H5 開発で遭遇する問題と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。