Uni-app的学习Ⅱ（全局配置和页面配置、配置tabbar、condition、组件、样式、数据绑定、mustache）

一、全局配置和页面配置

通过globalStyle进行全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色（同状态栏背景色）
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面生命周期。
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期

页面配置

创建新的message页面

右键pages新建message目录，在message目录下右键新建.vue文件,并选择基本模板

<template>
	<view>
		messages
	</view>
</template>

<script>
</script>

<style>
</style>

通过pages来配置页面

属性	类型	默认值	描述
path	String		配置页面路径
style	Object		配置页面窗口表现，配置项参考 pageStyle

pages数组数组中第一项表示应用启动页

"pages": [ 、
		{
			"path":"pages/message/message"					// 页面的指向
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"			// 导航条的内容
			}
		}
	]

通过style修改页面的标题和导航栏背景色，并且设置h5下拉刷新的特有样式

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path":"pages/message/message",
			"style": {
				"navigationBarBackgroundColor": "#007AFF",				// 导航条背景颜色
				"navigationBarTextStyle": "white",						// 导航条的字体颜色
				"enablePullDownRefresh": true,							// 是否可以下拉刷新
				"disableScroll": true,				// 是否可以滚动
				"h5": {								// 在html5下的配置
					"pullToRefresh": {				// 下拉刷新的颜色
						"color": "#007AFF"			
					}
				}
			}
		}
	]

二、配置tabbar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

Tips

• 当设置 position 为 top 时，将不会显示 icon
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

属性说明：

属性	类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar 上边框的颜色，仅支持 black/white	App 2.3.4+ 支持其他颜色值
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top	top 值仅微信小程序支持

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

案例代码：

"tabBar": {
		"list": [
			{								// 第一个
				"text": "首页",
				"pagePath":"pages/index/index",				// 页面路径
				"iconPath":"static/tabs/home.png",			// 未选中时图标
				"selectedIconPath":"static/tabs/home-active.png"	// 选中时图标
			},
			{								// 第二个
				"text": "信息",
				"pagePath":"pages/message/message",
				"iconPath":"static/tabs/message.png",
				"selectedIconPath":"static/tabs/message-active.png"
			},
			{								// 第三个
				"text": "我们",
				"pagePath":"pages/contact/contact",
				"iconPath":"static/tabs/contact.png",
				"selectedIconPath":"static/tabs/contact-active.png"
			}
		]
	}

三、condition启动模式配置

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

属性说明：

属性	类型	是否必填	描述
current	Number	是	当前激活的模式，list节点的索引值
list	Array	是	启动模式列表

list说明：

属性	类型	是否必填	描述
name	String	是	启动模式名称
path	String	是	启动页面路径
query	String	否	启动参数，可在页面的 onLoad 函数里获得

四、组件的基本使用

uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接称自己的应用

uni-app中的组件，就像 HTML 中的 div 、p、span 等标签的作用一样，用于搭建页面的基础结构

text文本组件的用法

官网传送门

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选
space	string	.	否	显示连续空格，可选参数：ensp、emsp、nbsp
decode	boolean	true	否	是否解码

space 值说明：

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

• text 组件相当于行内标签、在同一行显示
• 除了文本节点以外的其他节点都无法长按选中

view视图容器组件的用法

• View 视图容器， 类似于 HTML 中的 div

官网传送门

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态(类似于冒泡)
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

button按钮组件的用法

官网传送门

属性名	类型	默认值	说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否按钮
loading	Boolean	false	名称是否带 loading t图标

• button 组件默认独占一行，设置 size 为 mini 时可以在一行显示多个

image组件的使用

官网传输门

属性名	类型	默认值	说明	平台差异说明
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪、缩放的模式
lazy-load	String	false	图片懒加载。只针对page与scroll-view下的image有效 微信小程序、App、百度小程序、字节跳动小程序
fade-show	Boolean	true	图片显示动画效果
@error	HandleEvent		当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:‘图片高度px’, width:‘图片宽度px’}
@load	HandleEvent		当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:‘图片高度px’, width:‘图片宽度px’}

Tips

• <image> 组件默认宽度 300px、高度 225px；
• src 仅支持相对路径、绝对路径，支持 base64 码；
• 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。

五、uni-app中的样式

• rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。

• 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束

• 支持基本常用的选择器class、id、element、伪类选择器、伪元素选择器、属性选择器都可以

• 在 uni-app 中不能使用 * 选择器。

• page 相当于 body 节点

• 定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。

• uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：

  • 字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；

  • 字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；

  • 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

     @font-face {
         font-family: test1-icon;
         src: url('~@/static/iconfont.ttf');
     }
    

• 如何使用scss或者less(安装插件即可)

六、数据绑定

在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可

export default {
  data () {
    return {
      msg: 'hello-uni'
    }
  }
}

七、v-bind动态属性绑定

在data中定义了一张图片，我们希望把这张图片渲染到页面上

<template>
	<image :src="img"></image> // 可以使用v-bind
</template>

<script>
	export default {
	  data () {
	    return {
	      img: 'http://destiny001.gitee.io/image/monkey_02.jpg'
	    }
	  }
	}
</script>

<style>
</style>

八、插值表达式

• 利用插值表达式渲染基本数据

  <view>{{msg}}</view>
  

• 在插值表达式中使用三元运算

  <view>{{ flag ? '我是真的':'我是假的' }}</view>
  

• 基本运算

  <view>{{1+1}}</view>				// 结果为2
  

九、v-for

data中定以一个数组，最终将数组渲染到页面上

<view v-for="(item,i) in arr" :key="i">名字：{{item.name}}---年龄：{{item.age}}</view>		// 这里建议使用key来提高效率