uni-app总结

单位

1.换算规则：

	1 px = 2 rpx
	1 px = 0.75 pt = 3 / 4 pt
	1 pt = 1.33 px =  4 / 3 px = 8 / 3 rpx
	1 em = 16 px
	1 em = 12 pt
	1px = 1pt * 图像分辨率/72

rpx是基于 当前屏幕宽度与750的比值 算出来的，属于动态的。会根据不同屏幕进行换算。所以做响应式比较好用。

uni-app的条件编译

APP手机 MP小程序 H5网页 MP-WEXIN 小程序 APP-PLUS

条件
<! #ifdef H5 || MP–>

如果是

<!#endif -->

<!-#ifndef H5 -->

如果不是

<! #endif -->

CSS

 this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
 var(--status-bar-height) 此变量在微信小程序环境为固定 25px，在 App 里为手机实际状态栏高度。

2.介绍项⽬⽬录和⽂件作⽤
pages.json ⽂件⽤来对 uni-app 进⾏全局配置，决定页⾯⽂件的路径、窗⼝样式、原⽣的导航栏、底部的原⽣tabbar 等
manifest.json⽂件是应⽤的配置⽂件，⽤于指定应⽤的名称、图标、权限等。
App.vue是我们的跟组件，所有页⾯都是在App.vue下进⾏切换的，是页⾯⼊⼝⽂件，可以调⽤应⽤的⽣命周期函数。
main.js是我们的项⽬⼊⼝⽂件，主要作⽤是初始化vue实例并使⽤需要的插件。
uni.scss⽂件的⽤途是为了⽅便整体控制应⽤的风格。⽐如按钮颜⾊、边框风格，uni.scss⽂件⾥预置了⼀批scss变量预置。
unpackage 就是打包⽬录，在这⾥有各个平台的打包⽂件
pages所有的页⾯存放⽬录
static 静态资源⽬录，例如图⽚等
components 组件存放⽬录
pages数组数组中第⼀项表⽰应⽤启动页

“pages”: [ 、
{
“path”:“pages/message/message”
},
{
“path”: “pages/index/index”,
“style”: {
“navigationBarTitleText”: “uni-app”
}
}
]；

tabBar

{
“color”: “#999”,
“selectedColor”: “选中文字颜色”,
list:[
{“text”:“文本”,
“pagePath”:“页面地址”，
“iconPath”: “图标”,
“selectedIconPath”: “选中图标”
}
]
}

globalStyle

“globalStyle”: {
“navigationBarTextStyle”: “black”,
“navigationBarTitleText”: “uni-app”,
“navigationBarBackgroundColor”: “#f30”,
“backgroundColor”: “#F8F8F8”
},

4.uni-app中路由跳转和传参