WeChat パブリック アカウントの開発では、ページを前のページに直接戻すのではなく、ブラウザの左上隅にある戻るボタンに関連するページ ロジックをインターセプトして処理する必要がある場合があります。この詳細はまだわかっていません。かなり前に実装されました。しかし、JDショッピング公式アカウントの結果が非常に良かったので、自分でも試してみました。 JD.comの効果は次のとおりです。
上の図の京東ショッピング効果から判断すると、検索をクリックすると検索インターフェイスが表示され、左上隅をクリックして戻ると検索インターフェイスが閉じるだけですが、プログレスバーを再度読む場合のようにページは戻りません。 、私のページにはこのエフェクトが必要です。vue を使用してこのプロセスのデモを作成してみましょう。
前提: WeChat の左上隅にある戻るボタンを傍受することはできませんが、戻りイベントを監視することはできます。
アイデア: 戻りイベントを実際にインターセプトしたい場合は、まず現在のページの window.history にレコードを追加します (実際にはレコード PushState を履歴スタックに追加するだけで、ブラウザーは実際にはこのパスをロードしません)。クリックして return し、return イベントをリッスンして、処理するロジックを処理します。とにかく、WeChat は追加したレコードが window.history から取得され、このパスが現在のページのパスを置き換えます。注: これはパスの名前を変更するだけであり、実際にパスをロードするわけではありません。
実装: デモでは 2 つの vue ページ (最初と 2) が作成され、最初のページは 2 番目のページにジャンプします。次に、2 番目のページにマスク レイヤーが表示され、左上隅をクリックして戻ると、最初のページには戻りませんが、もう一度クリックすると、最初にマスク レイヤーが消えて前のページに戻ります。
効果は次のとおりです。
関連コードの説明:1 2 ページ目のマウントされたメソッドに追加し、戻りイベントをリッスンするメソッドを追加します。戻るボタンをクリックすると、ポップアップ マスクが非表示になります。
mount() { let that = this; // リターン イベント リスナーを追加します window.addEventListener(popstate, function(e) { that.isShowTestDiv = false; }, false);2. マスキング レイヤーを監視し、表示されたら window.history (履歴スタック) にレコードを追加します。
watch: { isShowTestDiv: function(newVal, oldVal) { if (newVal === true) { this.pushHistory(); } } } PushHistory() { // 履歴を変更します var state = { title: , url: /two / / この URL は、ブラウザーに表示される URL アドレスが変更されないようにするためだけに気軽に入力できます。ページには影響しません。 window.history.pushState(state, state.title, state.url); }、3. ユーザーがマスク レイヤー上の関連する操作をクリックしてマスク レイヤーを閉じる場合、追加したレコードを履歴から手動で削除し、Vue のルートを元に戻す必要があります。
helloClick() { // ポップアップの hello マスクをクリックします this.isShowTestDiv = false; // 追加されたレコードを履歴から削除します。デモアドレス
gitHub:https://github.com/LiJinShi/wechat_back_vue
要約する上記は、編集者が紹介した WeChat ブラウザーの左上隅にある戻るボタンのブロック機能です。ご質問がある場合は、メッセージを残してください。編集者が返信します。時間。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！