uni-app 之建立和釋出uni-modules外掛
阿新 • • 發佈：2021-07-13
目錄
背景
最近在用uni-app做專案，根據專案的需要，用上了很多外掛。真不錯，可以站在巨人肩膀上摘蘋果。
不過，在實際應用的時候，會有一些不盡人意。比如，在用到uni-search-bar外掛時，發現取消按鈕不能改變顏色。有的時候，頁面上顯得不那麼符合期待。
我的期待自然是將“取消”按鈕的文字改為白色。
題外話：本來本人對美也沒有什麼的追求（比如，我就告訴我的女朋友，我喜歡上她，絕對與她的顏值無關，然後，她就生氣了，為什麼？）。如果是自己用的系統，絕對略過這個問題。然後，本人一個小團隊，沒有美工、沒有前端。做專案時，領導告訴我可以不管UI。然後，在階段性彙報的時候，我就被批評的體無完膚，從能力到個人的遠見，到為人處世……後來、後來，才聽出畫外音：你做的東西太醜了，看得我心情不好，所以，看你也不順眼。
也許UI不重要，但是不重要的事情都做不好，怎麼做重要的事？(⊙o⊙)…，似乎有道理。
所以，雖然本人審美不行。為了領導和自己的身體，不動怒，不委屈，還是儘量做好吧。
所以，根據我的實際情況。我找了半天，很多真沒有找到合適的。於是，我想著自己開發，初次看官方文件，我似乎理解錯了（https://nativesupport.dcloud.net.cn/NativePlugin/README）╮(╯▽╰)╭
以為要額外安裝Android或IOS的開發環境，還要會……這簡直是一個系列啊，哪有時間？
好在，時間總會有的。（這裡是本人釋出的搜尋欄外掛：https://ext.dcloud.net.cn/plugin?id=5617
前提條件
- 已安裝HBuider X
- 用於測試的uni-app 專案
- 執行或測試的環境（這裡使用了微信開發者工具和手機）
步驟
新建uni-modules外掛
1. 右擊專案的uni_modules資料夾，點選uni-modules外掛。
2. 彈出對話方塊，填寫外掛id和地址和分類，點選【建立】。
3. 這裡建立了本地uni_modules外掛資料夾。
uni-modules的目錄結構請參考https://uniapp.dcloud.io/uni_modules?id=%e7%9b%ae%e5%bd%95%e7%bb%93%e6%9e%84。
編寫外掛內容
現在，可以在外掛的components目錄下編輯外掛內容了。這裡luyj-search-bar.vue直接複製了外掛 https://ext.dcloud.net.cn/plugin?id=866的uni-search-bar資料夾的內容，然後做了修改。具體程式碼如下：
1 <template> 2 <view class="uni-searchbar"> 3 <view :style="{borderRadius:radius+'px',backgroundColor: bgColor}" class="uni-searchbar__box" @click="searchClick"> 4 <view class="uni-searchbar__box-icon-search"> 5 <slot name="searchIcon"> 6 <uni-icons color="#999999" size="18" type="search" /> 7 </slot> 8 </view> 9 <input v-if="show || searchVal" :focus="showSync" :placeholder="placeholder" :maxlength="maxlength" class="uni-searchbar__box-search-input" 10 confirm-type="search" type="text" v-model="searchVal" @confirm="confirm" @blur="blur" @focus="emitFocus" /> 11 <text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text> 12 <view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='')" class="uni-searchbar__box-icon-clear" 13 @click="clear"> 14 <slot name="clearIcon"> 15 <uni-icons color="#c0c4cc" size="15" type="clear" /> 16 </slot> 17 </view> 18 </view> 19 <text @click="cancel" class="uni-searchbar__cancel" v-if="cancelButton ==='always' || show && cancelButton ==='auto'" 20 :style="{color: cancelColor}">{{cancelText}}</text> 21 </view> 22 </template> 23 24 <script> 25 /** 26 * SearchBar 搜尋欄 27 * @description 搜尋欄元件，通常用於搜尋商品、文章等 28 * @tutorial https://ext.dcloud.net.cn/plugin?id=5617 29 * @property {Number} radius 搜尋欄圓角 30 * @property {Number} maxlength 輸入最大長度 31 * @property {String} placeholder 搜尋欄Placeholder 32 * @property {String} clearButton = [always|auto|none] 是否顯示清除按鈕 33 * @value always 一直顯示 34 * @value auto 輸入框不為空時顯示 35 * @value none 一直不顯示 36 * @property {String} cancelButton = [always|auto|none] 是否顯示取消按鈕 37 * @value always 一直顯示 38 * @value auto 輸入框不為空時顯示 39 * @value none 一直不顯示 40 * @property {String} cancelText 取消按鈕的文字 41 * @property {String} cancelColor 取消按鈕的顏色 42 * @property {String} bgColor 輸入框背景顏色 43 * @property {Boolean} focus 是否自動聚焦 44 * @event {Function} confirm uniSearchBar 的輸入框 confirm 事件，返回引數為uniSearchBar的value，e={value:Number} 45 * @event {Function} input uniSearchBar 的 value 改變時觸發事件，返回引數為uniSearchBar的value，e=value 46 * @event {Function} cancel 點選取消按鈕時觸發事件，返回引數為uniSearchBar的value，e={value:Number} 47 * @event {Function} clear 點選清除按鈕時觸發事件，返回引數為uniSearchBar的value，e={value:Number} 48 * @event {Function} blur input失去焦點時觸發事件，返回引數為uniSearchBar的value，e={value:Number} 49 */ 50 51 export default { 52 name: "LuyjSearchBar", 53 props: { 54 placeholder: { 55 type: String, 56 default: "請輸入搜尋內容" 57 }, 58 radius: { 59 type: [Number, String], 60 default: 5 61 }, 62 clearButton: { 63 type: String, 64 default: "auto" 65 }, 66 cancelButton: { 67 type: String, 68 default: "auto" 69 }, 70 cancelText: { 71 type: String, 72 default: '取消' 73 }, 74 // 取消按鈕的顏色 75 cancelColor: { 76 type: String, 77 default: "#333333" 78 }, 79 bgColor: { 80 type: String, 81 default: "#F8F8F8" 82 }, 83 maxlength: { 84 type: [Number, String], 85 default: 100 86 }, 87 value: { 88 type: [Number, String], 89 default: "" 90 }, 91 focus: { 92 type: Boolean, 93 default: false 94 } 95 }, 96 data() { 97 return { 98 show: false, 99 showSync: false, 100 searchVal: '' 101 } 102 }, 103 watch: { 104 value: { 105 immediate: true, 106 handler(newVal) { 107 this.searchVal = newVal 108 if (newVal) { 109 this.show = true 110 } 111 } 112 }, 113 focus: { 114 immediate: true, 115 handler(newVal) { 116 if (newVal) { 117 this.show = true; 118 this.$nextTick(() => { 119 this.showSync = true 120 }) 121 } 122 } 123 }, 124 searchVal(newVal, oldVal) { 125 this.$emit("input", newVal) 126 } 127 }, 128 methods: { 129 searchClick() { 130 if (this.show) { 131 return 132 } 133 this.show = true; 134 this.$nextTick(() => { 135 this.showSync = true 136 }) 137 }, 138 clear() { 139 this.$emit("clear", { 140 value: this.searchVal 141 }) 142 this.searchVal = "" 143 }, 144 cancel() { 145 this.$emit("cancel", { 146 value: this.searchVal 147 }); 148 this.searchVal = "" 149 this.show = false 150 this.showSync = false 151 // #ifndef APP-PLUS 152 uni.hideKeyboard() 153 // #endif 154 // #ifdef APP-PLUS 155 plus.key.hideSoftKeybord() 156 // #endif 157 }, 158 confirm() { 159 // #ifndef APP-PLUS 160 uni.hideKeyboard(); 161 // #endif 162 // #ifdef APP-PLUS 163 plus.key.hideSoftKeybord() 164 // #endif 165 this.$emit("confirm", { 166 value: this.searchVal 167 }) 168 }, 169 blur() { 170 // #ifndef APP-PLUS 171 uni.hideKeyboard(); 172 // #endif 173 // #ifdef APP-PLUS 174 plus.key.hideSoftKeybord() 175 // #endif 176 this.$emit("blur", { 177 value: this.searchVal 178 }) 179 }, 180 emitFocus(e) { 181 this.$emit("focus", e.detail) 182 } 183 } 184 }; 185 </script> 186 187 <style lang="scss" scoped> 188 $uni-searchbar-height: 36px; 189 190 .uni-searchbar { 191 /* #ifndef APP-NVUE */ 192 display: flex; 193 /* #endif */ 194 flex-direction: row; 195 position: relative; 196 padding: $uni-spacing-col-base; 197 // background-color: $uni-bg-color; 198 } 199 200 .uni-searchbar__box { 201 /* #ifndef APP-NVUE */ 202 display: flex; 203 box-sizing: border-box; 204 /* #endif */ 205 overflow: hidden; 206 position: relative; 207 flex: 1; 208 justify-content: center; 209 flex-direction: row; 210 align-items: center; 211 height: $uni-searchbar-height; 212 padding: 5px 8px 5px 0px; 213 border-width: 0.5px; 214 border-style: solid; 215 border-color: $uni-border-color; 216 } 217 218 .uni-searchbar__box-icon-search { 219 /* #ifndef APP-NVUE */ 220 display: flex; 221 /* #endif */ 222 flex-direction: row; 223 // width: 32px; 224 padding: 0 8px; 225 justify-content: center; 226 align-items: center; 227 color: $uni-text-color-placeholder; 228 } 229 230 .uni-searchbar__box-search-input { 231 flex: 1; 232 font-size: $uni-font-size-base; 233 color: $uni-text-color; 234 } 235 236 .uni-searchbar__box-icon-clear { 237 align-items: center; 238 line-height: 24px; 239 padding-left: 8px; 240 /* #ifdef H5 */ 241 cursor: pointer; 242 /* #endif */ 243 } 244 245 .uni-searchbar__text-placeholder { 246 font-size: $uni-font-size-base; 247 color: $uni-text-color-placeholder; 248 margin-left: 5px; 249 } 250 251 .uni-searchbar__cancel { 252 padding-left: 10px; 253 line-height: $uni-searchbar-height; 254 font-size: 14px; 255 color: $uni-text-color; 256 /* #ifdef H5 */ 257 cursor: pointer; 258 /* #endif */ 259 } 260 </style>luyj-search-bar.vue
編寫外掛文件
- 開啟檔案readme.md 編寫外掛文件。
- 右擊編寫的外掛，點選“釋出到外掛市場”。
釋出到外掛市場
1. 彈出釋出到市場對話方塊。填寫釋出資訊，包括分類、外掛顯示名稱等。
2. 彈出釋出到市場對話方塊。填寫釋出資訊，包括分類、外掛顯示名稱等。
注：外掛釋出的內容對應pack.json配置檔案，可以編寫外掛配置。配置的詳細說明請參考：https://uniapp.dcloud.io/uni_modules?id=%e9%85%8d%e7%bd%ae
3.更新日誌為必填項。新增的更新日誌，會與檔案changelog.md同步。