uniapp-项目文件解析及部分组件

样式

1.全局样式
App.vue中style为全局样式，这里的style设置scoped不会生效。
App.vue中可以通过 @import倒入外部样式：@import “/test/a.scss”
uni.scss文件也可以用来编写全局的样式，通常用来定义一些全局的变量。
uni.scss也可以通过 @import来导入外部的样式。
2.局部样式
page目录下的vue文件中的style编写的就是局部样式，会覆盖全局样式。
style中也不需要写scoped，它默认就是局部的，同时也支持scss

一些全局变量可以定义在uni.scss中，

这些样式可以在组件中直接使用：

page.json 页面路由

用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

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

"globalStyle": {
		"navigationBarTextStyle": "white",            //导航栏标题颜色及状态栏前景颜色，仅支持 black/white
		"navigationBarTitleText": "uni-app",         //导航栏标题文字内容
		"navigationBarBackgroundColor": "#100c43",  //导航栏背景颜色
		"backgroundColor": "#F8F8F8" ,             // 下拉显示出来的窗口的背景色
		"enablePullDownRefresh":true ,            // 是否开启下拉刷新
	    "onReachBottomDistance": 100             //页面上拉触底事件触发时距页面底部距离，单位只支持px,默认值50
	},

pages:通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象。

目录：

pages.json ：

style具体的属性跟globalStyle相同，style中的配置会覆盖globalStyle中的配置。

tabBar:通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。

"tabBar": {
		    "color": "#7A7E83",
			"selectedColor": "#3cc51f",
			"borderStyle": "black",
			"backgroundColor": "#ffffff",
			"list":[
				{
					"pagePath": "pages/index/index",
					//"iconPath":
					//"selectedIconPath"
					"text": "index"
				},
				{
					"pagePath": "pages/login/login",
					"text": "login"
				}
			]
	}

一些常用组件

1.view 类似于div与div相比它支持跨平台。
2.text 文本组件
3.button,在小程序端与其他端的颜色不同，
<button type="primary"></button>primary是系统的颜色，不同的端颜色可能不同。
4.img 图片， 默认宽度是320px,高度240px
支持相对路径、绝对路径，支持导入,base64
在小程序端本地图片要放到static的根目录下，低于30kb的图片才会转成base64的格式，而网络资源没有这个问题。

//会生效
.scroll-view_H {
	background-image: url("@/static/logo.png");
}
//不会生效
.scroll-view_H {
	background-image: url("@/static/test/logo.png");
}

5. scrollview 可滚动的区域，在竖向滚动时需要给一个height,横向需要给width.
   隐藏滚动条：

<style>
// 解决h5端的问题，其他端也生效
 :deep(uni-scroll-view .uni-scroll-view::-webkit-scrollbar) {
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	display: none;
    width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
	color: transparent;         
 }
 // :global也行
:global(uni-scroll-view .uni-scroll-view::-webkit-scrollbar) {
   /* 隐藏滚动条，但依旧具备可以滚动的功能 */
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
	color: transparent;         
  }
</style>

字体图标

引入

使用：

使用组件库 以 uni-ui为例

安装方式：

修改组件样式
要想在app,h5，小程序都生效可以使用:deep或

:deep(.uni-swipe_text--center) {
 		background-color: red !important;
 	}
:global(.uni-swipe_text--center) {
 		background-color: red !important;
 	}

定制 主题
在uni.scss中导入uni-ui库的variable.scss变量文件，再修改对应的scss变量。

重写组件的样式：