微信小程序消息提醒封装(简单但是最实用)


题记:微信小程序做久了,一直用的都是微信原生的控件,其他的还能凑合用,但是每次关于消息的提醒,都要写那几行冗余代码,不忍吐槽,后来思考要不要封装成组件来用,权衡之后,官方组件只是丑点,但是基本满足需求,所以我们只对基本的showToast和showModal进行封装,毕竟比较高频。

一、思路

封装的话思考点是两点:
封装简单,减少冗余代码

  1. 优化代码,减少代码的冗余
  2. 优化调用,使用的时候最好一行代码即可

所以,根据小程序结构封装代码放在全局的app.js最好,使用的时候只需要一次初始化即可。

二、开干

这是我的处理方法,仅供参考,如有更方便的可以交流

2.1 在app.js中获取当前页面对象,进行函数绑定
initNotice(){
    let pages = getCurrentPages(); // 获取页面栈
    let page = pages[pages.length-1];// 获取当前页面对象
    page.showCustomToast = function(e){ // 绑定事件到当前对象
      wx.showToast({
        title: e,
        duration:1000,
        icon:'none'
      })
    }
    page.showCustomModal = function(title,callback){// 绑定事件到当前对象,至于左右按钮的样式和取消按钮的事件,根据自己的业务自己添加
      wx.showModal({
        title: '',
        content: title,
        success(res) {
          if (res.confirm) {
            callback();
          }
        }
      })
    }
  },
2.2 页面初始化

在任意使用消息提醒的页面进行初始化,基本每个页面都会用的到,所以我基本每个页面都进行了调用,上代码:

onLoad: function () {
   // 页面初始化 options为页面跳转所带来的参数
   let app = getApp();//获取全局app对象
   app.initNotice();  // 调用这个函数进行事件的初始化绑定
 },

截止到目前为止,已经绑定完成,就是一行代码

2.3 调用

因为事件已经绑定到当前页面的this对象上了,所以可以直接"this."的形式进行调用,很简单:样例:

let that = this;
that.showCustomModal('测试一下Modal',function(){
    that.showCustomToast("测试成功!");
});

效果:
在这里插入图片描述
点击确定:
在这里插入图片描述
因为个人喜欢不带icon的提示,所以如果有需求可自行封装。

后记

到这里基本完了,比较简单,最后说一下,考虑到app.js不能太笨重,所以只把开发中一些很高频的代码封装进来,嗯,还是挺爽的

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值