須知

• uni-app是一個(gè)前端框架
• 簡(jiǎn)單來說，uni-app的組件，類似HTML的標(biāo)簽，例如a轉(zhuǎn)navigation、span轉(zhuǎn)text等
• uni-app的組件包括 基礎(chǔ)組件?(自帶免安裝) + 擴(kuò)展組件 (可選裝，官方出品uni-ui或者第三方)
• uni-app出品的uni-ui官方手冊(cè)很坑爹，組件代碼是一個(gè)文檔，效果展示是另一個(gè)文檔！
  【uni-ui效果展示】?https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge
  【uni-ui組件代碼】?https://uniapp.dcloud.io/component/uniui/uni-ui
• 注意：手冊(cè)【uni-ui組件代碼】是官方組件手冊(cè)的一小部分
• uni-ui開箱即用，無需配置 （HBuilderX版本3.3.5.20211229或以上）

uni-ui安裝

1）沒有項(xiàng)目
在HBuilderX新建項(xiàng)目，選擇uni-app類別的uni-ui項(xiàng)目，如圖

?2）已有項(xiàng)目的情況

打開https://ext.dcloud.net.cn/plugin?id=55
點(diǎn)擊“使用HBuilderX導(dǎo)入插件”，在編輯器中選擇項(xiàng)目并確定即可

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

uni-ui簡(jiǎn)單入門教程

1. 在效果展示手冊(cè)中，找到想要的效果，例如底部工具欄
   https://hellouniapp.dcloud.net.cn/pages/extUI/goods-nav/goods-nav
2. 在組件代碼手冊(cè)中，找到對(duì)應(yīng)的組件代碼
   https://uniapp.dcloud.io/component/uniui/uni-goods-nav
   
3. 獲取到組件代碼的代碼
   1) template代碼（寫在標(biāo)簽template里面的唯一的view里面，代碼如下）
   <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
   2) script代碼
   export default {
   ? ? data () {
   ? ? ? return {
   ? ? ? ? options: [{
   ? ? ? ? ? ? icon: 'headphones',
   ? ? ? ? ? ? text: '客服'
   ? ? ? ? }, {
   ? ? ? ? ? ? icon: 'shop',
   ? ? ? ? ? ? text: '店鋪',
   ? ? ? ? ? ? info: 2,
   ? ? ? ? ? ? infoBackgroundColor:'#007aff',
   ? ? ? ? ? ? infoColor:"red"
   ? ? ? ? }, {
   ? ? ? ? ? ? icon: 'cart',
   ? ? ? ? ? ? text: '購(gòu)物車',
   ? ? ? ? ? ? info: 2
   ? ? ? ? }],
   ? ? ? ? buttonGroup: [{
   ? ? ? ? ? text: '加入購(gòu)物車',
   ? ? ? ? ? backgroundColor: '#ff0000',
   ? ? ? ? ? color: '#fff'
   ? ? ? ? },
   ? ? ? ? {
   ? ? ? ? ? text: '立即購(gòu)買',
   ? ? ? ? ? backgroundColor: '#ffa200',
   ? ? ? ? ? color: '#fff'
   ? ? ? ? }
   ? ? ? ? ]
   ? ? ? }
   ? ? },
   ? ? methods: {
   ? ? ? onClick (e) {
   ? ? ? ? uni.showToast({
   ? ? ? ? ? title: `點(diǎn)擊${e.content.text}`,
   ? ? ? ? ? icon: 'none'
   ? ? ? ? })
   ? ? ? },
   ? ? ? buttonClick (e) {
   ? ? ? ? console.log(e)
   ? ? ? ? this.options[2].info++
   ? ? ? }
   ? ? }
   }
4. 打開項(xiàng)目的視圖文件\pages\index\index.vue
   
   原代碼：

   <template>
   	<view class="content">
   		<image class="logo" src="/static/logo.png"></image>
   		<view class="text-area">
   			<text class="title">{{title}}</text>
   		</view>
   	</view>
   </template>
   
   <script>
   	export default {
   		data() {
   			return {
   				title: 'Hello'
   			}
   		},
   		onLoad() {
   
   		},
   		methods: {
   
   		}
   	}
   </script>
   
   <style>
   	.content {
   		display: flex;
   		flex-direction: column;
   		align-items: center;
   		justify-content: center;
   	}
   
   	.logo {
   		height: 200rpx;
   		width: 200rpx;
   		margin-top: 200rpx;
   		margin-left: auto;
   		margin-right: auto;
   		margin-bottom: 50rpx;
   	}
   
   	.text-area {
   		display: flex;
   		justify-content: center;
   	}
   
   	.title {
   		font-size: 36rpx;
   		color: #8f8f94;
   	}
   </style>
   

5. 修改為：

   <template>
   	<view>
   		<uni-nav-bar left-icon="back" left-text="返回" right-text="菜單" title="導(dǎo)航欄組件"></uni-nav-bar>
   		
   		<view class="content">
   			<image class="logo" src="/static/logo.png"></image>
   			<view class="text-area">
   				<text class="title">{{title}}</text>
   			</view>
   		</view>
   		
   		<view class="myFixedBottom">
   			<uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
   		</view>
   		
   		
   	</view>
   </template>
   
   <script>
   	export default {
   		data() {
   			return {
   				title: 'Hello',
   				options: [{
   					icon: 'headphones',
   					text: '客服'
   				}, {
   					icon: 'shop',
   					text: '店鋪',
   					info: 2,
   					infoBackgroundColor: '#007aff',
   					infoColor: "red"
   				}, {
   					icon: 'cart',
   					text: '購(gòu)物車',
   					info: 2
   				}],
   				buttonGroup: [{
   						text: '加入購(gòu)物車',
   						backgroundColor: '#ff0000',
   						color: '#fff'
   					},
   					{
   						text: '立即購(gòu)買',
   						backgroundColor: '#ffa200',
   						color: '#fff'
   					}
   				]
   			}
   		},
   		onLoad() {
   
   		},
   		methods: {
   			onClick(e) {
   				uni.showToast({
   					title: `點(diǎn)擊${e.content.text}`,
   					icon: 'none'
   				})
   			},
   			buttonClick(e) {
   				console.log(e)
   				this.options[2].info++
   			}
   		}
   	}
   </script>
   
   <style>
   	.content {
   		display: flex;
   		flex-direction: column;
   		align-items: center;
   		justify-content: center;
   	}
   
   	.logo {
   		height: 200rpx;
   		width: 200rpx;
   		margin-top: 200rpx;
   		margin-left: auto;
   		margin-right: auto;
   		margin-bottom: 50rpx;
   	}
   
   	.text-area {
   		display: flex;
   		justify-content: center;
   	}
   
   	.title {
   		font-size: 36rpx;
   		color: #8f8f94;
   	}
   	
   	.myFixedBottom {
   		width: 100%;
   		position: fixed;
   		bottom: 0;
   		left: 0;
   	}
   </style>
   

   注意：
   我用一個(gè)view標(biāo)簽把uni-goods-nav包起來了，加了個(gè)類名.myFixedBottom?
   定義css為：
   .myFixedBottom {
   ?? ??? ?width: 100%;
   ?? ??? ?position: fixed;
   ?? ??? ?bottom: 0;
   ?? ??? ?left: 0;
   }
   另外，把<view class="content">的類清空了，以免影響底部導(dǎo)航欄。
   ?
6. ok！保存并且查看效果即可

?

更多的請(qǐng)按照以上順序來：
1）先看效果，找到自己喜歡的uni-ui組件
2）再找代碼，html代碼寫在template標(biāo)簽里面，css寫在style標(biāo)簽里面，js代碼注意和原來的script代碼合并，不要漏了或者格式錯(cuò)誤即可

刷新，預(yù)覽，搞定！

?

?

到了這里，關(guān)于uni-ui簡(jiǎn)單入門教程 - 如何用HBuilderX為uni-app項(xiàng)目啟用uni-ui擴(kuò)展組件？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！