微信小程式消息提醒封裝（簡單但是最實用）

文章目錄

• • • • • 一、思路
        • 二、開幹
        • • 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不能太笨重，是以隻把開發中一些很高頻的代碼封裝進來，嗯，還是挺爽的