這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
介紹
可曾想過我們每次創建新專案，或者換地方寫程式，都要把之前寫過的工具類找出來又要復制粘貼一遍有些麻煩，尤其是寫uni-app自定義模板主要還是開發工具完成的，這時為什么不自己做一款自己的uni-app工具箱，每次用直接從商城匯入就行了，不用那么費心，而且還可以追加新函式更新上以后的專案也會受益，本期就帶大家從創建到開發再到發布，一條龍服務來去實作一個專屬于自己的uni-app工具箱，還等什么呢？帶好扳手我們這就要出發啦~
開發
創建插件
先創建 uni_modules 檔案夾，然后點擊右鍵選擇 新建uni modules插件 然后，可以自己選擇型別，起好名字就自動創建出所需檔案夾和檔案了，
此時我們在里面創建一個index.js檔案，作為其入口檔案，再創建一個utils檔案夾，以后我們所有想要完成的工具函式都要放在里面，
入口檔案
// 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中，然后匯出來提供給<span ><span >mt，再把mt，再把<span ><span ><span ><span >m<span >t<span >，<span >再<span >把mt掛載到uni物件上，
然后我們還要寫一個install函式，這里可以接收到Vue物件，這樣可以在Vue.prototype同樣掛載上，但是注意，這里要判斷環境是否是nvue，如果不是nvue我們才可以在Vue.prototype上掛載，因為在nvue中，全域Vue.prototype和Vue.mixin是無效的，而這里只有掛載到Vue.prototype才有意義，所以加了一層判斷，
這里查個知識點關于uni-app的條件編譯：
- #ifdef：if defined 僅在某平臺存在
- #ifndef：if not defined 除了某平臺均存在
工具函式
我既然要寫屬于自己的一個小工具箱，那么就根據自己以往的經驗需求去完成了，相信每個人都有很多函式要實作，這里就先寫幾個常見的實用的函式吧，還有很多這里就不一一實作了，
// 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在線檔案的時候尤為重要，當然如果不怕麻煩的話還可以寫的更詳細一些，
測驗使用
剛才寫了很多工具函式方法，但是我們還不知道能不能用起來，此時我們先在main.js 引入這個工具箱吧，
// main.js // #ifndef VUE3 import Vue from 'vue' import mTools from '@/uni_modules/m-tools' Vue.use(mTools) // ... // #endif
然后我們就隨便到一個頁面里嘗試一下剛才寫的 uni.$mt 是否能正確使用，
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}}}
發現跟期望相同，整理的差不多然后我們就可以去做插件發布了，
發布
編輯readme
發布之前我們當然需要在里面的 readme.md 檔案，需要寫寫你去說說開發這款插件是什么？怎么用？這些這些至少說明白，不然別說別人，過段時間連自己都忘了怎么用了，方便別人也方便自己吧，
執行發布
最后我們在 uni_modules 的檔案夾中，找的我們剛剛寫的 m-tools ，在這個檔案夾上點擊右鍵選擇 發布到插件市場 （此前，必須要在Dcloud注冊為開發者并且實名認證），等待成功后，就會輸出一個插件商城的鏈接，點開它，就可以看到，我們自己專屬的小工具箱就完成發布了，
本文轉載于：
https://juejin.cn/post/7106295707434221582
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/540174.html
標籤：其他
上一篇：IDEA沒有新建jsp檔案按鈕