uni-app语法与组件

uni-app语法与组件

一、语法简介
1、uni-app使用小程序的相关组件

view、text、input、image

组件中没有div，div会被默认转化为view
2、语法
css样式推荐使用单位rpx
95%等同于vue的语法
二、pages.json页面配置
1、globalStyle全局配置
导航栏文字颜色：white或black

"navigationBarTextStyle": "white",

导航栏标题

"navigationBarTitleText": "uni-app",

导航栏背景颜色（同状态栏背景色）

"navigationBarBackgroundColor": "#ffa7a1",

窗口的背景颜色

"backgroundColor": "#F8F8F8"

2、单个页面配置
path路径
style样式会覆盖全局的globalStyle
mp-weixin微信配置
h5网页端配置

"h5":{
"titleNView":{
"backgroundColor":"#00aaff"
	}
},
//  修改导航栏背景色

app-plusapp端配置
3、条件编译
模板条件

<!-- #ifdef APP-PLUS -->
<view>app独享 优惠</view>
<!-- #endif -->

css条件

/* #ifdef APP-PLUS */
	.lovely{
		color:pink
	}
/* #endif */

配置条件

pages/style

三、组件的使用
1、自定义组件
自动导入模式components/stepper/stepper.vue
在页面中使用<stepper></stepper>
手动导入
在页面中

<script>
//手动导入组件
import stepper from '../../components/stepper/stepper.vue'
export default{
components:{stepper}
}
</script>
<stepper></stepper>

2、微信组件

1.配置
"mp-weixin":{
"navigationBarBackgroundColor": "#48d9ae",
"usingComponents":{
"item":"/wxcomponents/item/index"
}
}

2.使用
<!-- #ifdef MP -->
<item title="我是标准行" url="/pages/about/about"></item>
<!-- #endif -->

3、内置组件

view、text、input、image

跳转组件 navigate

//  url跳转的地址
open-type  //  打开方式
navigate  跳转
switchTab   切换底部栏
redirect   重定向
reLunch   重启
navigateBak   返回
exit   退出