微信小程序，防止表單數據丟失，表單返回提示框 wx.enableAlertBeforeUnload ，需要真機預覽才有效果哦

十年河東，十年河西，莫欺少年窮

學無止境，精益求精

在我們實際開發中，有些頁面是大表單頁面，用戶填寫了很多信息后，誤觸到返回按鈕，則用戶填寫的表單數據丟失，此時，就需要我們對該種場景做處理

一般情況下，我們可以采用Storage存儲本地數據的方式，但這種方式開發量大，易出錯。

假設我們有A、B兩個頁面，其中B頁面是個大表單頁面

A頁面如下：

<navigator url="/pages/requ/requ" hover-class="navigator-hover">跳轉到大表單頁面</navigator>

B頁面，我們只需在OnLoad中添加如下代碼，即可防止用戶因誤觸返回鍵帶來的問題

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    this.BeaforeUnLoad();
  },

  BeaforeUnLoad() {
    wx.enableAlertBeforeUnload({
      message: '離開此頁后數據將會被清空哦',
      success: (e) => {
        console.log(e);
      },
      fail: (e) => {
        console.log(e);
      }
    })
  },

當我們在B頁面點擊返回導航時，真機預覽效果如下：

 

 類似於一個確認框。

當然，有人說，我可以在B頁面的UnLoad 卸載方法中加一個模態框，用來阻止跳轉，我們來試驗下。

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {
    wx.showModal({
      cancelColor: 'red',
      title: "卸載",
      content: "卸載內方法執行時，頁面已跳轉"
    })
  },

真機預覽效果如下

 

 從效果圖可以看出，B頁面的卸載方法中的模態框展示時，已經跳轉到了A頁面，因此，在卸載方法中阻止表單數據丟失是不行的

@天才卧龍的博客