在公司做的一個項目是微信小程序，因為小程序的ui圖樣式很簡單，所以一開始是打算自己寫的，但是后面發(fā)現(xiàn)有一些功能實現(xiàn)起來很冗雜，所以最終選擇了使用微信小程序的ui組件庫。

一開始是使用的是VantUi，但是不知道為什么在我的小程序里面跑不起來，所以后來選擇使用uView2.x來進行小程序的開發(fā)。

具體步驟記錄一下！

一、在HBuilder里面新建一個項目

選好存放的位置以及文件命名即可，也可以自己在下面選擇vue的的版本，我是用的是vue2

二、配置tabBar和簡單的全局樣式

打開page.json文件，在里面配置tabBar，底部導航欄

"tabBar": {
		"color": "black",//tab上文字默認的顏色
		"selectedColor": "#1191ab",//選中后的文字顏色
		"borderStyle": "black",//tabBar邊框的顏色，僅支持black和white
		"backgroundColor": "#ffffff",//tabBar的背景顏色
		"list": [{//tabBar的列表
			"pagePath": "pages/index/index",//跳轉(zhuǎn)頁面的路徑
			"iconPath": "",//圖標路徑
			"selectedIconPath": "",//選中后的圖標路徑
			"text": "首頁"http://文字
		}]
	}

配置一個簡單的全局樣式

"globalStyle": {
	"navigationBarTextStyle": "black",//導航欄標題顏色
	"navigationBarTitleText": "uni-app",//導航欄標題文字內(nèi)容
	"navigationBarBackgroundColor": "#F8F8F8",//導航欄背景顏色
	"backgroundColor": "#F8F8F8"http://導航欄背景顏色
}

三、引入組件庫（uViewUI為示例）

介紹 | uView 2.0 - 全面兼容 nvue 的 uni-app 生態(tài)框架 - uni-app UI 框架

在HBuilder里直接下載uView 2.0X的插件，方便快捷

下載地址：uView2.0重磅發(fā)布，利劍出鞘，一統(tǒng)江湖 - DCloud 插件市場

安裝好了以后，你的項目目錄里面會有一個uni_modules的文件，里面就是下載好的所有的組件

然后根據(jù)官網(wǎng)文檔進行配置

1.安裝sass

uView依賴SCSS，您必須要安裝此插件，否則無法正常運行。

• 如果您的項目是由HBuilder X創(chuàng)建的，相信已經(jīng)安裝scss插件，如果沒有，請在HX菜單的 工具->插件安裝中找到"scss/sass編譯"插件進行安裝， 如不生效，重啟HX即可
• 如果您的項目是由vue-cli創(chuàng)建的，請通過以下命令安裝對sass(scss)的支持，如果已安裝，請略過。

// 安裝sass
npm i sass -D

// 安裝sass-loader
npm i sass-loader -D

2.引入uView主JS庫

在項目根目錄中的main.js中，引入并使用uView的JS庫。

3.在引入uView的全局SCSS主題文件

在項目根目錄的uni.scss中引入此文件。

4.引入uView基礎(chǔ)樣式

在App.vue中首行的位置引入，注意給style標簽加入lang="scss"屬性

配置完成！

但是官方說明還有最后一步，就是配置easycom組件模式

我們是uni_modules模式引入的組件庫，所以不用去配置這一條。

四、具體使用

直接復制官網(wǎng)的代碼就好啦！

文章來源地址http://www.zghlxwxcb.cn/news/detail-806044.html

到了這里，關(guān)于微信小程序使用uView組件庫的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！