uni-ui简单入门教程

这篇具有很好参考价值的文章主要介绍了uni-ui简单入门教程 - 如何用HBuilderX为uni-app项目启用uni-ui扩展组件？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

须知

uni-app是一个前端框架
简单来说，uni-app的组件，类似HTML的标签，例如a转navigation、span转text等
uni-app的组件包括 基础组件 (自带免安装) + 扩展组件 (可选装，官方出品uni-ui或者第三方)
uni-app出品的uni-ui官方手册很坑爹，组件代码是一个文档，效果展示是另一个文档！
【uni-ui效果展示】 https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge
【uni-ui组件代码】 https://uniapp.dcloud.io/component/uniui/uni-ui
注意：手册【uni-ui组件代码】是官方组件手册的一小部分
uni-ui开箱即用，无需配置（HBuilderX版本3.3.5.20211229或以上）

uni-ui安装

1）没有项目
在HBuilderX新建项目，选择uni-app类别的uni-ui项目，如图
uni-ui简单入门教程 - 如何用HBuilderX为uni-app项目启用uni-ui扩展组件？

2）已有项目的情况

打开https://ext.dcloud.net.cn/plugin?id=55
点击“使用HBuilderX导入插件”，在编辑器中选择项目并确定即可
uni-ui简单入门教程 - 如何用HBuilderX为uni-app项目启用uni-ui扩展组件？

文章来源地址https://www.toymoban.com/news/detail-400767.html

在效果展示手册中，找到想要的效果，例如底部工具栏
https://hellouniapp.dcloud.net.cn/pages/extUI/goods-nav/goods-nav
在组件代码手册中，找到对应的组件代码
https://uniapp.dcloud.io/component/uniui/uni-goods-nav
获取到组件代码的代码
1) template代码（写在标签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: '购物车',
info: 2
}],
buttonGroup: [{
text: '加入购物车',
backgroundColor: '#ff0000',
color: '#fff'
},
{
text: '立即购买',
backgroundColor: '#ffa200',
color: '#fff'
}
]
}
},
methods: {
onClick (e) {
uni.showToast({
title: `点击${e.content.text}`,
icon: 'none'
})
},
buttonClick (e) {
console.log(e)
this.options[2].info++
}
}
}

打开项目的视图文件\pages\index\index.vue
uni-ui简单入门教程 - 如何用HBuilderX为uni-app项目启用uni-ui扩展组件？

原代码：

<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>

修改为：

<template>
	<view>
		<uni-nav-bar left-icon="back" left-text="返回" right-text="菜单" title="导航栏组件"></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: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			onClick(e) {
				uni.showToast({
					title: `点击${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>

注意：
我用一个view标签把uni-goods-nav包起来了，加了个类名.myFixedBottom
定义css为：
.myFixedBottom {
       width: 100%;
       position: fixed;
       bottom: 0;
       left: 0;
}
另外，把<view class="content">的类清空了，以免影响底部导航栏。