1. 出現(xiàn)場景

在微信小程序中，可以使用webview嵌套web頁面，有些時候在web頁面填寫了表單沒有提交，當(dāng)用戶點(diǎn)擊左上角小程序的返回時，希望可以彈框提示用戶還有未保存內(nèi)容，是否確定返回，根據(jù)用戶選擇之后在確定是否返回。

2. 遇到困難

由于返回圖標(biāo)是微信小程序自帶的，因此我們無法通過web頁面的路由離開鉤子(如：vue中beforeRouterLeave鉤子函數(shù))來控制頁面是否關(guān)閉，因此想要在離開頁面時在web頁面進(jìn)行邏輯控制是有難度的。

3. 解決辦法

使用瀏覽器的popstate事件來禁止頁面跳轉(zhuǎn)。

history.pushState(null, null, document.URL)

4. 項(xiàng)目實(shí)戰(zhàn)

<template>
  <!-- 表單 -->
  ......
  <!-- 此處示例使用vantUI的彈框組件 -->
  <van-dialog
    v-model="isBackWarnShow"
    title="溫馨提示"
    show-cancel-button
    confirmButtonColor="#3DB754"
    className="back-warn-dialog"
    @confirm="handleComfirmBack"
    @cancel="handleCancelBack"
  >
    <div>您的信息還未提交認(rèn)證，</div>
    <div>確定返回嗎？</div>
  </van-dialog>
</template>
<script>
export default {
  data() {
    return {
      // 表單信息
      formData: {
        name: '',
        age: ''
      },
      // 提示是否顯示
      isBackWarnShow: false,
      // 是否放棄提交
      isQuitSubmit: false
    }
  },
  mounted() {
      history.pushState(null, null, document.URL)
      // 點(diǎn)擊小程序返回時會觸發(fā)popstate事件
      window.addEventListener('popstate', this.handlePopstate)
  },
  beforeDestroy() {
    window.removeEventListener('popstate', this.handlePopstate)
  },
  // 點(diǎn)擊小程序返回
  handlePopstate() {
    if (
      !this.isQuitSubmit &&
      (this.formData.name ||
        this.formData.age)
    ) {
      // 表單信息未提交阻止返回
      history.pushState(null, null, document.URL)
      this.isBackWarnShow = true
    } else {
      // 返回到小程序
      wx.miniProgram.navigateBack({
        delta: history.length
      })
    }
  },
  handleComfirmBack() {
      this.isQuitSubmit = true
      this.isBackWarnShow = false
      // 彈框確定后返回小程序
      wx.miniProgram.navigateBack({
        delta: history.length
      })
    },
    handleCancelBack() {
      // 彈框取消留在當(dāng)前頁面
      this.isQuitSubmit = false
      this.isBackWarnShow = false
    }
}
</script>