快捷導(dǎo)航

微信小程序點(diǎn)擊左上角返回彈窗提示解決思路

更新時(shí)間：2024年06月28日 10:20:54 作者：chensi_07

當(dāng)頁(yè)面表單沒(méi)有提交直接返回時(shí),要提示用戶是否保存當(dāng)前信息,如果已經(jīng)提交就不提示了,下面小編給大家?guī)?lái)了微信小程序點(diǎn)擊左上角返回彈窗提示解決思路,感興趣的朋友一起看看吧

微信小程序點(diǎn)擊左上角返回彈窗提示解決思路

業(yè)務(wù)需求：當(dāng)頁(yè)面表單沒(méi)有提交直接返回時(shí)，要提示用戶是否保存當(dāng)前信息，如果已經(jīng)提交就不提示了。

由于微信小程序是無(wú)法監(jiān)聽(tīng)右上角按鈕返回事件。

所以就換個(gè)思路

小程序提供了如下兩個(gè)Api

wx.enableAlertBeforeUnload(Object object)：開(kāi)啟小程序頁(yè)面返回詢(xún)問(wèn)對(duì)話框

wx.disableAlertBeforeUnload：關(guān)閉小程序頁(yè)面返回詢(xún)問(wèn)對(duì)話框

實(shí)現(xiàn)方法如下：

onLoad: function (options) {
    this.enableFun()
},
enableFun() {
    wx.enableAlertBeforeUnload({
      message: '離開(kāi)當(dāng)前頁(yè)面數(shù)據(jù)將會(huì)被清空',
      success(res) {
        console.log('success:', res)
      },
      fail(res) {
        console.log('fail:', res)
      },
      complete(res) {
        console.log('complete:', res)
      }
    })
  }

如果在某種情況下（如已經(jīng)提交了數(shù)據(jù)），不需要彈出提示框

onSubmit(){
    this.disableFun()
},
// 關(guān)閉小程序頁(yè)面返回詢(xún)問(wèn)對(duì)話框
disableFun() {
    wx.disableAlertBeforeUnload({
      success(res) {
        console.log('success:', res)
      },
      fail(res) {
        console.log('fail:', res)
      },
      complete(res) {
        console.log('complete:', res)
      }
    })
  }

微信小程序阻止用戶返回上一頁(yè)，并彈窗給用戶確定是否要返回上一頁(yè)

在onload中調(diào)用微信的enableAlertBeforeUnload方法，在首次進(jìn)入會(huì)自動(dòng)監(jiān)聽(tīng)當(dāng)前的頁(yè)面，在返回的時(shí)候會(huì)自動(dòng)彈出彈窗阻止用戶返回上一頁(yè)，點(diǎn)擊確定則返回上一頁(yè)，取消則停留在當(dāng)前頁(yè)

onLoad: function(){
    wx.enableAlertBeforeUnload({
      message: "返回上頁(yè)時(shí)彈出對(duì)話框1212",
      success: function (res) {
        console.log("方法注冊(cè)成功：", res);
      },
      fail: function (errMsg) {
        console.log("方法注冊(cè)失?。?, errMsg);
      },
    });
}

到此這篇關(guān)于微信小程序點(diǎn)擊左上角返回彈窗提示的文章就介紹到這了,更多相關(guān)小程序點(diǎn)擊返回彈窗提示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: