1，起因
哪天，正在螞蟻森林瘋狂偷能量的我被boss叫過去，告知我司要做一個線上直播公開課功能的微信小程序，博主第一次寫小程序，復習了下文檔，看了看騰訊雲直播sdk，開工了。
寫着寫着就發現不對勁了， 這里面wx.showToast，wx.showModal，這一類的調用太多了，每次都寫一遍太特么麻煩了，就拿wx.showToast做例子，產品要求是duration為2000ms，默認值是1500ms，且有時候不需要icon圖標，有時候又需要，所以每次都要如下調用
wx.showToast({
title: '創建成功',
icon: 'none',
duration: 2000
})
不但麻煩，而且代碼看着很糟糕，所以博主決定二次封裝一下。
2，優化成果
經過博主封裝后，代碼如下
// 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實現了鏈式調用。
4，完整代碼
文件名：public.js
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
往期文章
個人主頁