哈嘍啥寇，大家好，我是指北君懒鉴。
WeUI是微信官方設(shè)計團隊為微信 Web 開發(fā)量身打造的一個UI框架爬虱。能夠和微信很好的融合在一起，簡直是小程序開發(fā)新手的良師秉溉。只需要你有一個微信開發(fā)者工具就足夠了力惯。其使用方式官方文檔都有詳細(xì)的說明。沖就完事了召嘶！
??? 難道今天指北君就是帶你來領(lǐng)略WeUI的“美麗”嗎夯膀？
啊這不太好吧......
當(dāng)然不是咯！你還記得指北君說的是HBuilder X用戶吧苍蔬？
那對HBuilder X用戶而言又有什么好消息呢诱建？
肯定是因為uni-app啦。因為uni-app在HBuilder X上比在其他編譯器上兼容更強碟绑、更高效的有利條件俺猿，對小程序開發(fā)人員而言茎匠，絕對是個爆贊的好消息。
目前市面上有不少的UI框架押袍，但uni-app生態(tài)專用的uView UI框架相對更全面更成熟诵冒。
想必你也猜到了，指北君此次介紹的是基于uni-app的uView UI框架谊惭。
開發(fā)小程序汽馋，需要用uView UI的組件代碼下進行項目的整合使用，或者利用HBuilder X工具圈盔，直接下載使用uView UI插件模塊豹芯。
uView UI提供了各種界面上用到的組件，幾乎封裝了我們常見到的各種界面元素驱敲，極大的方便了我們小程序界面的開發(fā)工作铁蹈，如果有些特殊的功能界面，也可以從UniApp官網(wǎng)的插件列表中尋找進行整合众眨。
雖然其他編輯器也可以使用nni-app+uView UI框架握牧，但HBuilder X和uni-app，同屬DCloud公司娩梨，因而HBuilder X團隊為uni-app做了大量的優(yōu)化和定制沿腰。也即相較其他編輯器，技術(shù)上uni-app與HBuilder X的匹配度最高狈定，容錯率更強矫俺。
uView：
uView2.02.0已全面兼容nvue。uView是uni-app生態(tài)專用的UI框架掸冤，uni-app是一個使用Vue.js開發(fā)所有前端應(yīng)用的框架厘托，開發(fā)者編寫一套代碼， 可發(fā)布到iOS稿湿、Android铅匹、H5、以及各種小程序(微信/支付寶/百度/頭條/QQ/釘釘)等多個平臺,這也是它主要特點饺藤。
并且需要開發(fā)者具備基本的vue和小程序的知識包斑，使用起來才能得心應(yīng)手哦。
安裝：
安裝方式有兩種：
1.Hbuilder X方式
在官網(wǎng)下載HBuilder X涕俗，如下操作：
2.npm方式
在項目根目錄執(zhí)行如下命令：
npm install uview-ui
修改uView內(nèi)置配置方案:
uView版本為2.0.25以上的罗丰，可以通過setCofig方法配置uView內(nèi)部的各項內(nèi)置配置，目前可配置的有config再姑、props萌抵、zIndex、color屬性，目前只建議修改config绍填、props屬性霎桅， 除非你清楚知道自己的修改所帶來的影響。
// main.jsimport uView from 'uview-ui'
Vue.use(uView)
// 調(diào)用setConfig方法讨永，方法內(nèi)部會進行對象屬性深度合并滔驶，可以放心嵌套配置// 需要在Vue.use(uView)之后執(zhí)行
uni.$u.setConfig({
// 修改$u.config對象的屬性
config: {
// 修改默認(rèn)單位為rpx，相當(dāng)于執(zhí)行 uni.$u.config.unit = 'rpx'
unit: 'rpx'
},
// 修改$u.props對象的屬性
props: {
// 修改radio組件的size參數(shù)的默認(rèn)值卿闹，相當(dāng)于執(zhí)行 uni.$u.props.radio.size = 30
radio: {
size: 15
}
// 其他組件屬性配置
// ......
}})
使用
通過npm或下載方式的配置之后揭糕，在某個頁面可以直接使用組件，無需通過import引入組件锻霎。
<template>
<u-action-sheet :list="list" v-model="show"></u-action-sheet>
</template>
<script>
export default {
data() {
return {
list: [{
text: '點贊',
color: 'blue',
fontSize: 28
}, {
text: '分享'
}, {
text: '評論'
}],
show: true
}
}
}
</script>
注意事項：
由于微信小程序預(yù)覽和發(fā)布的主包大小都不能超過2M著角，否則無法真機預(yù)覽和上傳發(fā)布，故uView是按需引入的量窘，在發(fā)行時，HX會自動剔除您沒有使用組件氢拥，即使您使用了uViwe的全部組件蚌铜，整個uView的大小也只有500K左右，但是有如下兩點前提：
1. 調(diào)試
在調(diào)試階段嫩海，HX默認(rèn)是沒有對JS進行壓縮和去除注釋冬殃，也沒有進行組件按需引入的，因此會導(dǎo)致JS文件都很大叁怪，需要在 HBuilder X進行如下操作审葬，再重新編譯即可：
HBuilder X 運行->運行到小程序模擬器->勾選 運行時是否壓縮代碼
2. 發(fā)布
在HX中進行發(fā)布時，uView的組件會按需引入(使用uView所有組件的情況下奕谭，占用空間500k左右)涣觉，如果主包依然超出2M，需要從多個方面著手：
1.小程序分包
2.將靜態(tài)資源放到服務(wù)器進行引用
3.取消"ES6轉(zhuǎn)ES5"設(shè)置
組件樣式
uView有著豐富的組件和樣式血柳，這里指北君只展示如下的Keyboard鍵盤組件代碼及其效果圖官册，其他的就等著大家去探索~~~
<template>
<view>
<u-keyboard ref="uKeyboard" mode="car" :show="show"></u-keyboard>
<u-button @click="show = true">打開</u-button>
</view>
</template>
<script>
export default {
data() {
return {
show: false
}
}
}
</script>
指北君有話說
利用uView UI+uni-app開發(fā)微信小程序，實際本身還是對官方小程序接口的封裝處理难捌，需要我們對其中相關(guān)的生命周期膝宁、底層函數(shù)等有一定的了解，才能更好的理解微信小程序的各種機制和處理方式根吁。uView是uni-app生態(tài)最優(yōu)秀的UI框架员淫，全面的組件和便捷的工具會讓你信手拈來，得心應(yīng)手击敌。故這里指北君還是推薦使用HBuilderX來開發(fā)小程序介返，相對通用的VS Code來說，它的處理更特性化，使用更流暢映皆。已有不少小程序開發(fā)者也在使用這套框架挤聘。
所以，你也趕緊來玩玩看吧~~~
開源指北捅彻，立志做最好的開源分享平臺组去，分享有趣實用的開源項目。
歡迎加入交流群步淹，你可以摸魚从隆、劃水、吐槽缭裆、咨詢键闺。
還有簡歷模板、各種技術(shù)面試資料等100G的資源等著你領(lǐng)取哦澈驼。
公眾號回復(fù)888馬上加入辛燥，快來一起來聊一聊吧！
開源指北公眾號回復(fù)UI框架獲取資源缝其。
以上就是本次推薦的全部內(nèi)容挎塌，我是指北君，感謝各位的觀看内边。
