Uni-app组件：如何使用基础组件

步骤1：登陆官网，查看常用属性

uni-app基础组件：https://uniapp.dcloud.net.cn/component/README?id=%e5%9f%ba%e7%a1%80%e7%bb%84%e4%bb%b6

以button 按钮为例。

属性说明

属性名 	类型 	默认值 	说明 	生效时机 	平台差异说明
size 	String 	default 	按钮的大小 		
type 	String 	default 	按钮的样式类型 		
plain 	Boolean 	false 	按钮是否镂空，背景色透明 		
disabled 	Boolean 	false 	是否禁用 		
loading 	Boolean 	false 	名称前是否带 loading 图标 		H5、App(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)
form-type 	String 		用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 		
open-type 	String 		开放能力 		
hover-class 	String 	button-hover 	指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 		App-nvue 平台暂不支持
hover-start-time 	Number 	20 	按住后多久出现点击态，单位毫秒 		
hover-stay-time 	Number 	70 	手指松开后点击态保留时间，单位毫秒 		
app-parameter 	String 		打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 		微信小程序、QQ小程序
hover-stop-propagation 	boolean 	false 	指定是否阻止本节点的祖先节点出现点击态 		微信小程序
lang 	string 	'en' 	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 		微信小程序
session-from 	string 		会话来源，open-type="contact"时有效 		微信小程序
send-message-title 	string 	当前标题 	会话内消息卡片标题，open-type="contact"时有效 		微信小程序
send-message-path 	string 	当前分享路径 	会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 		微信小程序
send-message-img 	string 	截图 	会话内消息卡片图片，open-type="contact"时有效 		微信小程序
show-message-card 	boolean 	false 	是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 		微信小程序
@getphonenumber 	Handler 		获取用户手机号回调 	open-type="getPhoneNumber" 	微信小程序
@getuserinfo 	Handler 		用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo 	open-type="getUserInfo" 	微信小程序
@error 	Handler 		当使用开放能力时，发生错误的回调 	open-type="launchApp" 	微信小程序
@opensetting 	Handler 		在打开授权设置页并关闭后回调 	open-type="openSetting" 	微信小程序
@launchapp 	Handler 		从小程序打开 App 成功的回调 	open-type="launchApp" 	微信小程序

    注1：button-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
    open-type="launchApp"时需要调起的APP接入微信OpenSDK

步骤2：仿写示例代码

<template>
	<view>
		<navigator url="/pages/about/about"><button type="default">通过navigator组件跳转到about页面</button></navigator>
		<button type="default" @click="goto('/pages/about/about')">通过方法跳转到about页面</button>
		</view>
</template>
<script>
	export default {
		methods: {
			goto(url) {
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>
<style>
</style>

步骤3：查看效果图

参考代码

uni-app基础组件：https://uniapp.dcloud.net.cn/component/README?id=%e5%9f%ba%e7%a1%80%e7%bb%84%e4%bb%b6