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

文章目录

• • • • • 一、思路
        • 二、开干
        • • 2.1 在app.js中获取当前页面对象，进行函数绑定
          • 2.2 页面初始化
          • 2.3 调用
        • 后记

题记：微信小程序做久了，一直用的都是微信原生的控件，其他的还能凑合用，但是每次关于消息的提醒，都要写那几行冗余代码，不忍吐槽，后来思考要不要封装成组件来用，权衡之后，官方组件只是丑点，但是基本满足需求，所以我们只对基本的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不能太笨重，所以只把开发中一些很高频的代码封装进来，嗯，还是挺爽的