微信小程序点击左上角返回弹窗提示解决思路

广东键盘侠广州分侠

微信小程序点击左上角返回弹窗提示解决思路

业务需求：当页面表单没有提交直接返回时，要提示用户是否保存当前信息，如果已经提交就不提示了。
由于微信小程序是无法监听右上角按钮返回事件。
所以就换个思路
小程序提供了如下两个Api

1. wx.enableAlertBeforeUnload(Object object)：开启小程序页面返回询问对话框
   
2. wx.disableAlertBeforeUnload：关闭小程序页面返回询问对话框

复制代码

实现方法如下：

1. onLoad: function (options) {
   
2.     this.enableFun()
   
3. },
   
4. enableFun() {
   
5.     wx.enableAlertBeforeUnload({
   
6.       message: '离开当前页面数据将会被清空',
   
7.       success(res) {
   
8.         console.log('success:', res)
   
9.       },
   
10.       fail(res) {
    
11.         console.log('fail:', res)
    
12.       },
    
13.       complete(res) {
    
14.         console.log('complete:', res)
    
15.       }
    
16.     })
    
17.   }

复制代码

如果在某种情况下（如已经提交了数据），不需要弹出提示框

1. onSubmit(){
   
2.     this.disableFun()
   
3. },
   
4. // 关闭小程序页面返回询问对话框
   
5. disableFun() {
   
6.     wx.disableAlertBeforeUnload({
   
7.       success(res) {
   
8.         console.log('success:', res)
   
9.       },
   
10.       fail(res) {
    
11.         console.log('fail:', res)
    
12.       },
    
13.       complete(res) {
    
14.         console.log('complete:', res)
    
15.       }
    
16.     })
    
17.   }

复制代码

微信小程序阻止用户返回上一页，并弹窗给用户确定是否要返回上一页

在onload中调用微信的enableAlertBeforeUnload方法，在首次进入会自动监听当前的页面，在返回的时候会自动弹出弹窗阻止用户返回上一页，点击确定则返回上一页，取消则停留在当前页

1. onLoad: function(){
   
2.     wx.enableAlertBeforeUnload({
   
3.       message: "返回上页时弹出对话框1212",
   
4.       success: function (res) {
   
5.         console.log("方法注册成功：", res);
   
6.       },
   
7.       fail: function (errMsg) {
   
8.         console.log("方法注册失败：", errMsg);
   
9.       },
   
10.     });
    
11. }

复制代码

到此这篇关于微信小程序 点击左上角返回弹窗提示的文章就介绍到这了,更多相关小程序点击返回弹窗提示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/323440wxh.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！