起因
刚才在写一个很常见的操作,在用户返回页面时,对用户是否保存了便签内容进行提示,如果未修改则不做提示直接退出,如果修改了则提醒用户未保存确认是否退出。
我以为微信会有这个api对返回按钮进行监听,然后我通过当前输入值和缓存值对比决定是否弹窗提示,但是居然没有这种监听方法??
看了一圈社区,也有人和我提出一样的问题
如何解决?
微信只提供了两个方法,开启或者关闭返回提示,并没有提供参数来决定是否关闭,也没有监听用户点击返回按钮的函数。
我的解决方案
首先,默认不开启返回提示,对便签标题和内容添加bind:input事件监听。
<van-field bind:input="input" size="large" title-width="2em" label="" model:value="{{title}}" placeholder="标题" border="{{ false }}" />
<van-field bind:input="input" autosize="{{Height}}" maxlength="1000" title-width="2em" label="" type="textarea" show-word-limit="true" model:value="{{content}}" placeholder="内容" border="{{ false }}" />
通过这个函数监听输入框当前值和缓存值对比,相同时开启弹窗,不同时则关闭
input(){
var data = this.data
console.log(data)
if (data.title!==data.cacheTitle || data.content !== data.cacheContent) {
wx.enableAlertBeforeUnload({
message: '您有内容未保存,确认是否退出?',
})
} else {
wx.disableAlertBeforeUnload()
}
}
当然,cache变量会在页面加载时缓存
onLoad: function (options) {
if (options.id) {
var records = wx.getStorageSync('records')
const record = records.find(item => item.id === options.id);
this.setData({
id:record.id,
title:record.title,
content: record.content,
cacheTitle:record.title,
cacheContent:record.content
})
}
},
当点击保存时,缓存cache变量,关闭返回提示
save(){
const record = {
type:1,
id: this.data.id,
title: this.data.title,
content: this.data.content
}
creatOrUpdateRecord(record).then( res => {
if (res.code === 1000) {
wx.showToast({
title: '保存成功',
icon: 'success'
})
this.setData({
cacheTitle:record.title,
cacheContent:record.content
})
wx.disableAlertBeforeUnload()
}
})
},
综上,问题解决!