這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
介紹
可曾想過我們每次創建新項目，或者換地方寫程序，都要把之前寫過的工具類找出來又要復制粘貼一遍有些麻煩，尤其是寫uni-app自定義模板主要還是開發工具完成的。愛掏網 - it200.com這時為什么不自己做一款自己的uni-app工具箱，每次用直接從商城導入就行了，不用那么費心，而且還可以追加新函數更新上以后的項目也會受益。愛掏網 - it200.com本期就帶大家從創建到開發再到發布，一條龍服務來去實現一個專屬于自己的uni-app工具箱，還等什么呢？帶好扳手我們這就要出發啦~
開發
創建插件
先創建 uni_modules 文件夾，然后點擊右鍵選擇 新建uni modules插件 然后，可以自己選擇類型，起好名字就自動創建出所需文件夾和文件了。愛掏網 - it200.com
?此時我們在里面創建一個index.js文件，作為其入口文件，再創建一個utils文件夾，以后我們所有想要完成的工具函數都要放在里面。愛掏網 - it200.com
?入口文件
// index.js
import utils from "./utils"
const $mt = {
...utils,
}
uni.$mt = $mt
const install = (Vue) => {
// #ifndef APP-NVUE
Vue.prototype.$mt = $mt
// #endif
}
export default {
install
}
剛才說過我們將會把所有的工具方法都寫入utils中，然后導出來提供給mt。愛掏網 - it200.com再把mt。愛掏網 - it200.com再把mt。愛掏網 - it200.com再把mt掛載到uni對象上。愛掏網 - it200.com
然后我們還要寫一個install函數，這里可以接收到Vue對象，這樣可以在Vue.prototype同樣掛載上。愛掏網 - it200.com但是注意，這里要判斷環境是否是nvue，如果不是nvue我們才可以在Vue.prototype上掛載，因為在nvue中，全局Vue.prototype和Vue.mixin是無效的，而這里只有掛載到Vue.prototype才有意義，所以加了一層判斷。愛掏網 - it200.com
這里查個知識點關于uni-app的條件編譯：
- #ifdef：if defined 僅在某平臺存在
- #ifndef：if not defined 除了某平臺均存在
工具函數
我既然要寫屬于自己的一個小工具箱，那么就根據自己以往的經驗需求去完成了，相信每個人都有很多函數要實現，這里就先寫幾個常見的實用的函數吧，還有很多這里就不一一實現了。愛掏網 - it200.com
// utils/index.js
/**
* 去除空格
*/
function trim(str = "", type = "both") {
return (str + "").replace({
both: /^\s+|\s+$/g,
left: /^\s*/,
right: /(\s*$)/g,
all: /\s+/g
} [type], "")
}
/**
* 深度拷貝
*/
function deepClone(obj1, obj2 = {}) {
let toStr = Object.prototype.toString;
let arrStr = toStr.call([]);
for (let prop in obj1) {
if (obj1.hasOwnProperty(prop)) {
if (obj1[prop] !== null && typeof(obj1[prop]) == "object") {
obj2[prop] = toStr.call(obj1[prop]) == arrStr ? [] : {};
deepClone(obj1[prop], obj2[prop]);
} else {
obj2[prop] = obj1[prop];
}
}
}
return obj2;
}
/**
* 顯示toast信息提示
*/
function toast(msg, duration = 2000) {
if (!msg) return;
uni.showToast({
title: msg + "",
icon: 'none',
duration
})
}
export default {
trim,
deepClone,
toast，
// ...
}
這里沒有什么可以說的，按照自己平時的項目需求把一些自己常用的寫好封裝好就行了，當然別忘記加注釋！加注釋！加注釋！
這樣至少讓人知道這些方法是干嘛的，尤其是你還沒有生成API在線文檔的時候尤為重要，當然如果不怕麻煩的話還可以寫的更詳細一些。愛掏網 - it200.com
測試使用
剛才寫了很多工具函數方法，但是我們還不知道能不能用起來，此時我們先在main.js 引入這個工具箱吧。愛掏網 - it200.com
// main.js
// #ifndef VUE3
import Vue from 'vue'
import mTools from '@/uni_modules/m-tools'
Vue.use(mTools)
// ...
// #endif
然后我們就隨便到一個頁面里嘗試一下剛才寫的?uni.$mt?是否能正確使用。愛掏網 - it200.com
uni.$mt.isEmpty([]); // true
uni.$mt.isChinese("恭喜發財"); // true
uni.$mt.round(0.1+0.2); // 0.3
uni.$mt.num2K(1580); // 1.6k
uni.$mt.num2M(1580); // 1,580
uni.$mt.deepClone({a:{b:{c:1}}}) // {a:{b:{c:1}}}
發現跟期望相同，整理的差不多然后我們就可以去做插件發布了。愛掏網 - it200.com
發布
編輯readme
發布之前我們當然需要在里面的 readme.md 文件，需要寫寫你去說說開發這款插件是什么？怎么用？這些這些至少說明白，不然別說別人，過段時間連自己都忘了怎么用了，方便別人也方便自己吧。愛掏網 - it200.com
執行發布
最后我們在 uni_modules 的文件夾中，找的我們剛剛寫的 m-tools ，在這個文件夾上點擊右鍵選擇 發布到插件市場 （此前，必須要在Dcloud注冊為開發者并且實名認證）。愛掏網 - it200.com等待成功后，就會輸出一個插件商城的鏈接，點開它，就可以看到，我們自己專屬的小工具箱就完成發布了。愛掏網 - it200.com
?
本文轉載于：
https://juejin.cn/post/7106295707434221582
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。愛掏網 - it200.com
?