uni-app开发微信小程序,退出当前页时提示,常用于防止填写表单误触返回

1.使用场景

当页面存在需要用户填写的表单时,我们需要考虑是否存在用户不小心回退页面的问题。这将导致用户输入的数据都被销毁,用户的体验感极差。我们无需使用复杂的方法对页面的回退进行监听。

官方提供了API wx.enableAlertBeforeUnload()  

弹窗条件

  • 当用户在小程序内非首页页面/最底层页
  • 官方导航栏上的的返回
  • 全屏模式下自绘返回键
  • android 系统 back 键时

注意事项

  • 手势滑动返回时不做拦截
  • 在任何场景下,此功能都不应拦住用户退出小程序的行为

参考代码

onLoad: function(){
    wx.enableAlertBeforeUnload({
      message: "您确定要退出预约吗?",
      success: function (res) {
        console.log("方法注册成功:", res);
      },
      fail: function (errMsg) {
        console.log("方法注册失败:", errMsg);
      },
    });
}

运行效果

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对于uniapp开发微信小程序实现uni-forms-item表单界面以及表单验证,你可以按照以下步骤进行操作: 1. 首先,确保已经安装了uni-forms插件。你可以在uni-app的插件市场中搜索并安装该插件。 2. 在需要使用表单的页面中,引入uni-forms组件,并注册: ```vue <template> <view> <uni-forms ref="forms"> <uni-forms-item label="姓名" name="name" rules="required" placeholder="请输入姓名"></uni-forms-item> <uni-forms-item label="手机号" name="phone" rules="required|phone" placeholder="请输入手机号"></uni-forms-item> <!-- 其他表单项 --> </uni-forms> <view @click="submitForm">提交</view> </view> </template> <script> import uniForms from '@/components/uni-forms/uni-forms.vue' import uniFormsItem from '@/components/uni-forms/uni-forms-item.vue' export default { components: { uniForms, uniFormsItem }, methods: { submitForm() { this.$refs.forms.validate((valid, errors) => { if (valid) { // 表单验证通过,执行提交逻辑 // 可以通过 this.$refs.forms.model 获取表单数据 } else { // 表单验证不通过,处理错误信息 console.log(errors) } }) } } } </script> ``` 3. 在表单项中,可以使用`label`属性设置标签显示的文本,`name`属性设置表单项的名称,`rules`属性设置表单项的验证规则,`placeholder`属性设置表单项的占位符。 4. 在点击提交按钮,通过`this.$refs.forms.validate`方法进行表单验证。验证结果通过回调函数返回,如果验证通过,可以执行提交逻辑;如果验证失败,可以获取错误信息进行处理。 5. 在uni-forms-item组件中,可以使用内置的验证规则,如`required`表示必填项,`phone`表示手机号格式验证等。 这样,你就可以在uniapp开发微信小程序中实现uni-forms-item表单界面以及表单验证了。记得在需要使用表单的页面引入uni-forms组件和uni-forms-item组件,并根据需求配置表单项和验证规则。希望对你有所帮助!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值