微信小程式API互動的自定義封裝
阿新 • • 發佈：2021-01-17
[TOC](目錄)
# 1，起因
***
哪天，正在螞蟻森林瘋狂偷能量的我被boss叫過去，告知我司要做一個線上直播公開課功能的微信小程式，博主第一次寫小程式，複習了下文件，看了看騰訊雲直播sdk，開工了。
寫著寫著就發現不對勁了， 這裡面`wx.showToast`，`wx.showModal`，這一類的呼叫太多了，每次都寫一遍太特麼麻煩了，就拿`wx.showToast`做例子，產品要求是`duration`為2000ms，預設值是1500ms，且有時候不需要icon圖示，有時候又需要，所以每次都要如下呼叫
```javascript
wx.showToast({
title: '建立成功',
icon: 'none',
duration: 2000
})
```
不但麻煩，而且程式碼看著很糟糕，所以博主決定二次封裝一下。
# 2，優化成果
***
經過博主封裝後，程式碼如下
```javascript
// wx.showToast優化前呼叫
wx.showToast({
title: '建立成功',
icon: 'none',
duration: 2000
});
// wx.showToast優化後呼叫
FN.Toast("建立成功");
```
```javascript
// 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`
```javascript
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檔案頂部引入**
```javascript
//路徑根據自己專案檔案位置改變
const FN = require('../publicFn/public');
```
**呼叫語法參考目錄2**
***
**如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；
END**
==往期文章==
+ [微信小程式實現上傳多張本地圖片到伺服器和圖片預覽](https://www.cnblogs.com/-pdd/p/14120442.html)
+ [簡單的JS+CSS實現網頁自定義換膚](https://www.cnblogs.com/-pdd/p/13901765.html)
==個人主頁==
+ [CSDN](https://blog.csdn.net/pdd11997110103?spm=1010.2135.3001.5421)
+ [GitHub](https://github.com/pdd11997110103)
+ [簡書](https://www.jianshu.com/u/b7a8536bff06)
+ [部落格園](https://www.cnblogs.com/-pdd/)
+ [掘金](https://juejin.cn/user/747323639737191)