微信小程序嵌套webview頁面條件控制是否返回小程序

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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容