微信小程序API交互的自定義封裝

時間 2021-01-17

標籤 javascript html java git github 小程序微信小程序服務器微信 ide 欄目軟件設計简体版

原文原文鏈接

1，原由

哪天，正在螞蟻森林瘋狂偷能量的我被boss叫過去，告知我司要作一個線上直播公開課功能的微信小程序，博主第一次寫小程序，複習了下文檔，看了看騰訊雲直播sdk，開工了。
寫着寫着就發現不對勁了，這裏面wx.showToast，wx.showModal，這一類的調用太多了，每次都寫一遍太特麼麻煩了，就拿wx.showToast作例子，產品要求是duration爲2000ms，默認值是1500ms，且有時候不須要icon圖標，有時候又須要，因此每次都要以下調用javascript

wx.showToast({
  title: '建立成功',
  icon: 'none',
  duration: 2000
})

不但麻煩，並且代碼看着很糟糕，因此博主決定二次封裝一下。html

2，優化成果

通過博主封裝後，代碼以下java

// wx.showToast優化前調用
wx.showToast({
  title: '建立成功',
  icon: 'none',
  duration: 2000
});

// wx.showToast優化後調用
FN.Toast("建立成功");

// wx.showModal優化前調用
wx.showModal({
  title: '舒適提示',
  content: '確認更換帳號嗎？',
  success (res) {
    if (res.confirm) {
      console.log('用戶點擊肯定')
    } else if (res.cancel) {
      console.log('用戶點擊取消')
    }
  }
});

// wx.showModal優化後調用
FN.Confirm("確認更換帳號嗎？")
.then(res => {
   	console.log('用戶點擊肯定')
 })
.catch(error => {
	console.log('用戶點擊取消')
});

3，實現思路

定義一個公共的public.js，在裏面寫上經常使用的方法，用一個常量承載，而後經過module.exports暴露出去，在須要的地方接收，而其中好比wx.showModal，wx.login，這些須要回調來處理的方法，使用了Promise實現了鏈式調用。git

4，完整代碼

文件名：public.jsgithub

const publicFn = {
  /**
  * Loading轉圈圈
  * @param {nunber} mask - 不傳默認不顯示透明蒙層
  * @param {string} msg - 提示語 默認值：加載中
  */
  Loading (mask, msg){
    let Mask = mask ? true : false;
    let Msg = msg ? msg : "加載中"
    wx.showLoading({
      title: Msg,
      mask: Mask
    })
  },
  /**
  * Loading取消轉圈圈
  */
  LoadingOff (){
    wx.hideLoading();
  },
  /**
  * Toast提示
  * @param {string} msg - 提示內容
  * @param {string} icon - icon圖標 成功success 加載中loading 無樣式none
  * @param {number} time - 提示存在時長
  */
  Toast (msg, icon, time){
    let Icon = icon === 1 ? "success" : "none";
    wx.showToast({
      title: msg,
      icon: Icon,
      duration: time || 2000
    })
  },
  /**
  * 帶確認的提示框
  * @param {string} msg - 提示內容
  */
  Alert (msg){
    return new Promise((resolve, reject) => {
      wx.showModal({
        title: '舒適提示',
        content: msg,
        showCancel:false,
        confirmColor:"#007AFF",
        success (res) {
         // 此彈窗只有確認鍵，沒有取消鍵，因此只寫了resolve沒有reject
          resolve(res);
        }
      })
    })
  },
  /**
  * 帶確認和取消的提示框
  * @param {string} msg - 提示內容
  */
  Confirm (msg){
    return new Promise((resolve, reject) => {
      wx.showModal({
        title: '舒適提示',
        content: msg,
        cancelColor:"#000000",
        confirmColor:"#007AFF",
        success (res) {
          if (res.confirm) {
            resolve(res);
          }else if (res.cancel) {
            reject(res)
          }
        }
      })
    })
  },
  /**
  * 微信登錄 wx.login
  */
  wxLogin () {
    return new Promise((resolve, reject) => {
      wx.login({
        success (res) {
          if (res.code) {
            resolve(res.code)
          } else {
            reject(res.errMsg);
          }
        }
      })
    });
  }
}

module.exports = publicFn;

使用方法：在你須要調用的地方的js文件頂部引入小程序

//路徑根據本身項目文件位置改變
const FN = require('../publicFn/public');

調用語法參考目錄2微信小程序

若是看了以爲有幫助的，我是@鵬多多，歡迎點贊關注評論；
END服務器

往期文章微信

我的主頁ide

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。