モバイル端子H 5開発で出会ったピット

WeChat共有署名エラーinvalid signature
vue単一ページアプリケーションhistoryモードでWeChat共有しています.いつも署名エラーを提示しています.invalid signature.
WeChat公式サイトの文書に従って、jssdkを導入しました.正確にjsセキュリティドメインを設定し、バックグラウンドの開発者が作成した署名もWeChat署名ツールで検証しましたが、フロントエンドのカスタム共有はずっと署名エラーを報告しています.どの基本的な構成が問題ないかを確認できません.そして署名もWeChat署名ツールで検証しました.フロントエンドアクセスのurlとバックグラウンドで署名を生成するurlが一致しないことによる署名エラーかもしれない.
フロントエンドがajaxでurlをバックエンドに送って署名を取得する場合、現在のページから'hash部分のリンクを除去し、encodeURIComponentが必要です.

let url = location.href.split('#')[0]
encodeURIComponent(url)

普通はこのようにすればWeChatのカスタム共有が可能ですが、1ページのアプリルートが切り替わった後、IOS側はまだ署名ミスを提示しています.
これは、historyモードでのビューの切り替えがpusStateによって行われているためですが、IOS WeChatクライアントは、pusStateのH 5の新しい特性をサポートしていませんので、ルートが変更されましたが、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単一ページアプリケーションで、かつkeep-aliveを使用してもページは更新されません.この場合、いくつかのインターフェース要求などはbefore Route Enterメソッドに置くことができます.
IOS側はnew Date(「2019-01-01 00:00:00」)のフォーマットに対応していません.
このような書き方はnew Date(「2019-01-00:00」)では安卓端で支持されていますが、IOS側ではサポートされておらず、NANエラーが報告されますので、new Date(「2019-01-01 00:00」)をnew Date(「2019/01/01 00:00」)に変更します.

let date = '2019-01-01 00:00:00'
date.replace(/\-/g, '/')

マイクロ二次元コード
一つのページには複数の二次元コードがありますが、長押しで二次元コードを識別するには最後の二次元コードしか認識できません.このとき、私たちはページの可視領域には一つの二次元コードしか出現しないようにコントロールする必要があります.
IOSではクリックできません
span、divなどのデフォルトではクリックできないラベルについて、IOSではclickイベントを傍受し、無効な解決方法をクリックして、cursor: pointerを追加します.
オーディオが再生できません.
audio.Play()方法は、Androidデバイスでは正常に再生できますが、IOSクライアントでは再生できません.audioのsrcが設置された後、このラインコードを追加してaudio.load()でオーディオを読み込む必要があります.
オーディオの再生を開始することができますか?Androidはオーディオのロードが完了したら再生を開始しますが、iOS側は少し遅れているかもしれません.この時にはaudio.currentTimeを通じてオーディオの再生を開始するかどうかが分かります.
IOSモバイル端末clickイベント300 msの遅延応答
fixedの問題
ios 8以下のシステムでは、キーパッドがアクティブになると、位置変動問題が発生します.解決方法:中間部分の外層divにcssスタイルposition:fixed;top:50px; bottom:50px;overflow:scroll;を追加するだけです.