uni-app 基础

tomorrow9527 / 2023-07-17 / 原文

基本知识

.目录分析

1.基本目录如下
	┌─uniCloud              云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud)
	│─components            符合vue组件规范的uni-app组件目录
	│  └─comp-a.vue         可复用的a组件
	├─utssdk                存放uts文件
	├─pages                 业务页面文件存放的目录
	│  ├─index
	│  │  └─index.vue       index页面
	│  └─list
	│     └─list.vue        list页面
	├─static                存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
	├─uni_modules           存放[uni_module](/uni_modules)。
	├─platforms             存放各平台专用页面的目录,详见
	├─nativeplugins         App原生语言插件 详见
	├─nativeResources       App端原生资源目录
	│  ├─android            Android原生资源目录 详见
	|  └─ios                iOS原生资源目录 详见
	├─hybrid                App端存放本地html文件的目录,详见
	├─wxcomponents          存放小程序组件的目录,详见
	├─unpackage             非工程代码,一般存放运行或发行的编译结果
	├─AndroidManifest.xml   Android原生应用清单文件 详见
	├─Info.plist            iOS原生应用配置文件 详见
	├─main.js               Vue初始化入口文件
	├─App.vue               应用配置,用来配置App全局样式以及监听 应用生命周期
	├─manifest.json         配置应用名称、appid、logo、版本等打包信息,详见
	├─pages.json            配置页面路由、导航条、选项卡等页面类信息,详见
	└─uni.scss              这里是uni-app内置的常用样式变量
2.补充说明
	1.manifest.json 各种配置和打包信息
		1.含窗口模式 和 代码模式 [最后一项 源码视图]
3.pages.json
	1.新建页面后 选择 创建同名目录 和 在 pages.json 中注册 就可以将新建的 页面添加的 配置里面
	2.app 启动后的 第一个页面  默认是 配置项的第一个 为了测试页面 可以随意移动

.杂项

1.H5 支持 html 的标签 比如 i strong 之类的 但是微信小程序不支持 所以为了 代码的打包的平台扩展性 避免使用
	1.所谓不支持 是指 原本有的样式丢了 不是不显示
	2.这是不是反而更好的 完全用css控制 避免原生标签效果的影响

关于单位

1.rpx 响应式单位 整个屏幕宽度 750rpx 你设置 20rpx 无论换到任何的设备 屏幕如何变化 都会按照响应的比例 来算出来
	1.真实的屏幕分辨率 133.4 * 750 [这个不重要 了解而已]

常见标签

1.view [block]
	1.所有的视图组件,包括view、swiper等,本身不显示任何可视化元素。它们的用途都是为了包裹其他真正显示的组件
	2.它类似于传统html中的div,用于包裹各种元素内容
	3.有关属性
			hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时,没有点击态效果
			hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态,
				1.App、H5、支付宝小程序、百度小程序不支持(支付宝小程序、百度小程序文档中都有此属性,实测未支持)
			hover-start-time	Number	50	按住后多久出现点击态,单位毫秒
			hover-stay-time	Number	400	手指松开后点击态保留时间,单位毫秒
2.icon [inline-block]
	1.<icon :type="value" size="26"/>
	2.value 的 值有:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
		1.types:["success", "success_no_circle", "info", "warn", "waiting", "cancel", "download", "search", "clear"]
	3.可以通过 css 设置 width height 只能控制占位 无法控制 图标大小 图标大小需要用 属性 size 来控制
	4.可以设置默认的颜色
			type	String		icon的类型
			size	Number	23	icon的大小,单位px
			color	Color		icon的颜色,同css的color
3.text [inline]
	1.selectable	Boolean	false	文本是否可选
	2.类似span
3.scroll-view [block]
	1.属性
		scroll-x	Boolean	false	允许横向滚动
		scroll-y	Boolean	false	允许纵向滚动
	2.当作为父元素 子元素超出 父元素 是否允许滚动