ブラウザでは、ページを閉じる、指定したページに調整する、ページから離れることを確認する、またはその他の操作を実行する必要があることを認識するために、「戻る」、「戻る」、「前ページ」およびその他のボタンをクリックする必要があります。Popstate イベントを使用して、戻る、戻る、前のページの操作を監視できます。
1. 歴史上の操作を簡単に紹介します
1.window.history.back()、戻る
2.window.history.forward()、前方へ
3.window.history.go(num)、指定された数の履歴レコードを前方または後方に移動します
4.window.history.pushState(state, title, utl)、ページ内に履歴エンティティを作成します。履歴に直接追加されました。
パラメータ: state: オブジェクトを保存します。関連情報を追加できます。history.state を使用してコンテンツを読み取ることができます。
title: 履歴レコードのタイトル。
url: 作成された履歴へのリンク。履歴操作を実行すると、このリンクにリダイレクトされます。
5.window.history.replaceState()、現在の履歴エンティティを変更します。
6. Popstate イベント。履歴エンティティが変更されたときにトリガーされるイベント。
7.window.history.state は、履歴エンティティ内の状態オブジェクトを取得します。
2. H5 ブラウザの戻りイベントをリッスンし、同時にアプレットにパラメータを渡します
要件: H5 ページで操作していない場合は、アプレットに戻り、ポップアップ ボックスの表示をトリガーします。
問題: アプレットの成功したコールバック メソッドで、(Web ビュー経由で) H5 ページを開くトリガーが行われます。H5 ページの左上隅にある物理的な戻るボタンをクリックすると、アプレットに戻りますが、 H5 ページへのジャンプを再度トリガーできるようになりました
解決策:
1. H5 ページの物理的な戻るボタンを監視します。
2. 戻るときにアプレットにパラメータを渡します。
3. アプレットでパラメータを受け取り、パラメータによって判断し、ポップアップ ボックスを表示して再度ジャンプするように促します。
デフォルトの返品アクションをキャンセルします。
1.添加一条 history 实体作为替代原来的 history 实体
function pushHistory(){
var state = {
title: "title",
url: "#"
}
window.history.pushState(state, "title", "#");
}
pushHistory()
2.监听 popstate 事件
window.addEventListener("popstate", function(){
//doSomething
}, false)
プロジェクトで使用される
H5 ページコード:
1.WeChat SDKをインストールする
npm install weixin-js-sdk –save
2. WeChat SDKをページに導入する
import wx from 'weixin-js-sdk'
3. H5 ページは監視して戻り、パラメータをアプレットに渡します。
mounted () {
const that = this
// 监听返回
this.pushHistory()
window.addEventListener('popstate', function (e) {
// 为了避免只调用一次
that.pushHistory('title1')
// 自定义方法, 直接关闭网页或返回小程序上一页
that.goBack()
},
false
)
},
methods:{
// 添加一条 history 实体作为替代原来的 history 实体
pushHistory (str = 'title', url = '#') {
const state = {
title: str,
url
}
window.history.pushState(state, state.title, state.url)
},
goBack () {
wx.miniProgram.navigateBack()
// postMessage给小程序传递参数，只有当小程序页面退出和当前页面销毁的情况下才会触发传参
wx.miniProgram.postMessage({
data: {
passWord: this.passwordValue } })
},
}
アプレット内のコード:
1. Webview ページで H5 ページ パラメータを受け取り、そのパラメータをページ スタックを通じてアプレットの前のページに渡します。
<template>
<view>
<web-view :src="url" @message="handleMessage"></web-view>
</view>
</template>
<script>
import apiUrl from '@/utils/commonUrl.js';
export default {
data() {
return {
url: '',
};
},
onLoad(option) {
this.url = apiUrl.videoUrl + "?t=" + new Date().getTime() + '&message=' + option.message
},
methods:{
handleMessage(res){
let pages = getCurrentPages(); //获取所有页面栈实例列表
let nowPage = pages[pages.length - 1]; //当前页页面实例
let prevPage = pages[pages.length - 2]; //上一页页面实例
prevPage.$vm.passwordValue = res.detail.data[res.detail.data.length - 1].passWord; //修改上一页data里面的参数值
},
}
}
</script>
<style lang="scss">
</style>
2. Web ビュー ページにジャンプする前に、ページ ウォッチはパラメータの変更を監視し、ポップアップ ボックスの表示をトリガーします。
<!-- 请输入密码 -->
<view class="success-box" v-if="passwordsubmitIshow">
<view class="contain-top">
温馨提示
</view>
<view class="success-text1">
请前往重置密码
</view>
<button class="bottom-submit" @click="passwordConfirm">确认</button>
</view>
watch: {
'passwordValue': {
handler(newVal) {
if (newVal == 0) {
this.passwordsubmitIshow = true;
} else if (newVal == 1) {
this.passwordsubmitIshow = false;
}
},
deep: true
},
},
効果を達成する
H5 ページが操作中でない場合、または操作が完了していない場合は、アプレットに戻り、ポップアップ ボックスの表示をトリガーします。
3. 指定したページで H5 ブラウザのリターン イベントをリッスンし、ページが破棄されたときにリッスン イベントをクリアし、同時にアプレットにパラメータを渡します。
H5 にページが 1 つしかない場合は、上記の方法で問題ありませんが、H5 にページが多数ある場合は、指定されたページに返されたリッスン イベントと返されたキャンセル リスニング イベントを追加する必要があります。
例: H5 プロジェクトのコード
mounted () {
// 监听返回
this.pushHistory()
if (this.personList.token != '') {
window.addEventListener('popstate', this.goBack, false)
}
},
// 页面销毁时，清除返回监听事件
beforeDestroy () {
window.removeEventListener('popstate', this.goBack, false)
},
methods: {
// 插入浏览器历史
pushHistory (str = 'title', url = '#/detail') {
const state = {
title: str,
url
}
window.history.pushState(state, state.title, state.url)
},
goBack () {
// 为了避免只调用一次
this.pushHistory('title1')
// 自定义方法, 当页面路由为指定页面时，执行监听的方法
if (window.location.href == 'https://cbstest.ncbmip.com/minip/rongshu/index.html#/detail') {
wx.miniProgram.navigateBack()
wx.miniProgram.postMessage({
data: {
passWord: this.passwordValue } })
}
},