起因

刚才在写一个很常见的操作，在用户返回页面时，对用户是否保存了便签内容进行提示，如果未修改则不做提示直接退出，如果修改了则提醒用户未保存确认是否退出。

我以为微信会有这个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()
            }
        })
    },

综上，问题解决！