基本知识
.目录分析
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.当作为父元素 子元素超出 父元素 是否允许滚动