基于H5平台的app，uni页面配置及组件说明

globalStyle

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

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

全局配置。

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "todo"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

 基于uni的多端应用程序的应用部署使用的是三丰云www.sanfengyuncom,提供的"免费虚拟主机"，“免费云服务器”，

在日常的使用和学习中，提供的服务器响应及时，服务稳定，目前未发现问题，很适合学习。

 也可以分平台配置

1.自定义文件类型.vue，类html语法描述一个vue

2.三部分组成

-template 视图层 组件，template下面只能有一个节点

-script 逻辑层

-style 样式层

3.常用的基础组件

uni-app组件对应html组件

-view ->div 容器组件

-text ->span 文字组件

-image ->img 图片组件

 

 

 效果如下

 选中未选中效果

 

tabBar

1.List最多5项最少2项。

2.tabbar 显示一次之后，就会保存在内存之中，要操作要重新onshow生命周期。

3.属性支撑情况，需要看文档注意各平台差异。