[TOC] #### 1. 工具類封裝思路 --- 無(wú)論是前端開發(fā)者還是后端開發(fā)者，都會(huì)在項(xiàng)目中封裝一些經(jīng)常使用的功能方法，可以大大提高我們的開發(fā)效率 工具類的封裝重要性就不多說(shuō)，本文提供一個(gè)在 uniapp 項(xiàng)目中封裝方法的一種思路，最終代碼結(jié)構(gòu)在文章的最后 #### 2. 工具類封裝示例 --- 創(chuàng)建 `utils/tools.js` ```javascript export default { /** * 消息提示框，支持頁(yè)面跳轉(zhuǎn) */ toast (options, navigate) { let { icon, mask, duration, title } = options icon = icon || 'none' mask = mask || true duration = duration || 1500 title = typeof options === 'string' ? options : title // 消息提示 uni.showToast({ icon, mask, duration, title }) // 頁(yè)面跳轉(zhuǎn) if (typeof navigate === 'function') { setTimeout(() => navigate(), duration) } else if (typeof navigate === 'object') { const { url, type = 1 } = navigate setTimeout(() => { if (type == 1) { uni.navigateTo({ url }) } else if (type == 2) { uni.redirectTo({ url }) } }, duration) } }, /** * 顯示加載動(dòng)畫 */ loading(options) { let { mask, title } = options mask = mask || true title = typeof options === 'string' ? options : title uni.showLoading({ mask, title }) }, /** * 隱藏加載動(dòng)畫，支持頁(yè)面跳轉(zhuǎn) */ hideLoading (options, navigate) { uni.hideLoading() this.toast(options, navigate) } } ``` 在 uniapp 的入口文件 `main.js` 中，將封裝的方法掛載到 `uni` 上 ```javascript // main.js 默認(rèn)代碼 import App from './App' // 下面是新增的代碼(可以放在導(dǎo)入App的后面) import tools from './utils/tools'; uni.$tools = tools; ``` 那么，我們將頁(yè)面或組件的 js 中，可以直接使用封裝的方法 ```javascript // 消息提示 uni.$tools.toast('修改成功') uni.$tools.toast({ icon: 'success', title: '提交成功' }) // 消息提示后進(jìn)行頁(yè)面跳轉(zhuǎn) uni.$tools.toast({ icon: 'success', title: '提交成功', duration: 3000, }, { url: '/pages/scan/scan' }) // 顯示加載動(dòng)畫 uni.$tools.loading('上傳中') // 關(guān)閉加載動(dòng)畫，并且彈出提示框，然后跳轉(zhuǎn)頁(yè)面 setTimeout(() => { uni.$tools.hideLoading('上傳成功', { url: '/pages/scan/scan' }) }, 3000) ``` #### 3. 多個(gè)工具類封裝 --- 當(dāng)前有多個(gè)工具類方法文件時(shí) 比如 : `utils/tools.js` 常用方法封裝、`utils/cache.js` 數(shù)據(jù)緩存方法封裝，基于上面的代碼調(diào)整內(nèi)容如下: **utils/tools.js** ```javascript // 掛載到 uni 上的屬性名 export const alias = '$t' export default { toast(){}, loading(){}, } ``` **utils/cache.js** ```javascript // 掛載到 uni 上的屬性名 export const alias = '$c' export default { set(){}, get(){}, remove(){}, } ``` 創(chuàng)建 **utils/index.js** 工具類入口文件，在該文件中將工具類文件掛載到 uni 上 ```javascript const files = require.context("./", false, /\.js$/); files.keys().forEach(key => { if (key !== './index.js') { const { alias, default: utils } = files(key) uni[alias || ('$' + key.match(/^\.\/(.+)\.js$/)[1])] = utils } }) ``` 在 **main.js** 中導(dǎo)入工具類入口文件即可 ```javascript require('./utils') ``` #### 4. 最終代碼結(jié)構(gòu)示例 --- 下面是工具類封裝的最終代碼目錄結(jié)構(gòu)，是我目前使用的封裝方式，后續(xù)如果有更好的方式會(huì)更新 ``` uniapp 項(xiàng)目根目錄 ├─utils 應(yīng)用目錄 │ ├─index.js 工具類入口 │ ├─tools.js 常用功能方法 │ ├─cache.js 緩存相關(guān)方法 ``` 在 `main.js` 文件中使用 `require` 導(dǎo)入工具類即可，可以放在導(dǎo)入 `App` 之后 ```javascript import App from "./App" // 工具類 require('./utils') ``` `utils` 目錄下的文件內(nèi)容: `utils/index.js`: ```javascript // +---------------------------------------------------------------------- // | 工具類入口文件, 在 main.js 導(dǎo)入即可 // +---------------------------------------------------------------------- // | 遍歷當(dāng)前目錄下的所有 js 文件, 將工具類掛載到 uni // +---------------------------------------------------------------------- const files = require.context("./", false, /\.js$/) files.keys().forEach(key => { if (key !== "./index.js") { const { alias, default: utils } = files(key) uni[alias || ("$" + key.match(/^\.\/(.+)\.js$/)[1])] = utils } }) ``` `utils/tool.js` 和 `utils/cache.js` 使用默認(rèn)導(dǎo)出一個(gè)對(duì)象即可，代碼示例: 通過(guò)分析 **utils/index.js** 文件可知: 使用工具類文件導(dǎo)出的 alias 為掛載到 uni 上的屬性名，當(dāng)沒(méi)有 alias 時(shí)，默認(rèn)使用工具類文件的名稱作為屬性名 ```javascript // +---------------------------------------------------------------------- // | 調(diào)用方式: uni.$t.方法名稱(參數(shù)) // +---------------------------------------------------------------------- // | toast 消息提示框，支持頁(yè)面跳轉(zhuǎn) // +---------------------------------------------------------------------- // | loading 顯示加載動(dòng)畫 // +---------------------------------------------------------------------- // | hideLoading 隱藏加載動(dòng)畫，支持頁(yè)面跳轉(zhuǎn) // +---------------------------------------------------------------------- // 掛載到 uni 的屬性名 export const alias = '$t' export default { /** * 消息提示框，支持頁(yè)面跳轉(zhuǎn) */ toast (options, navigate) {}, /** * 頁(yè)面跳轉(zhuǎn) */ goPage(url, type = 1) {}, /** * 顯示加載動(dòng)畫 */ loading(options) {}, /** * 隱藏加載動(dòng)畫，支持頁(yè)面跳轉(zhuǎn) */ hideLoading (options, navigate) {} } ```