モバイル H5 開発で遭遇する問題と解決策-H5 チュートリアル-php.cn

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

不言

リリース： 2019-03-30 10:43:00

転載

2558 人が閲覧しました

この記事で紹介する内容は、モバイル 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 遅延する