定义
uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
开发工具
HbuilderX
项目结构
┌─uniCloud 云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid App端存放本地html文件的目录，详见
├─platforms 存放各平台专用页面的目录，详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules 存放[uni_module](/uni_modules)。
├─wxcomponents 存放小程序组件的目录，详见
├─nativeplugins App原生插件 详见
├─unpackage 非工程代码，一般存放运行或发行的编译结果
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss 这里是uni-app内置的常用样式变量
开发规范
页面文件遵循 Vue 单文件组件 (SFC) 规范组件标签靠近小程序规范，详见uni-app 组件规范接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期为兼容多端运行，建议使用flex布局进行开发
生命周期
页面生命周期（通用）
onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面onReady监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发onHide监听页面隐藏onUnload监听页面卸载onPullDownRefresh监听用户下拉动作，一般用于下拉刷新，参考示例onReachBottom页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
组件生命周期（通用）
beforeCreate在实例初始化之前被调用。created在实例创建完成后被立即调用。beforeMount在挂载开始之前被调用。mounted挂载到实例上去之后调用。注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档beforeDestroy实例销毁之前调用。在这一步，实例仍然完全可用。destroyedVue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
状态管理
使用vuex
CSS尺寸单位
需要根据设备自适应，使用rpx
CSS变量
CSS 变量
描述
App
小程序
H5
--status-bar-height
系统状态栏高度
[系统状态栏高度
(opens new window)](www.html5plus.org/doc/zh_cn/n… 注意见下
25px
0
--window-top
内容区域距离顶部的距离
0
0
NavigationBar 的高度
--window-bottom
内容区域距离底部的距离
0
0
TabBar 的高度
条件渲染
背景：
uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。
但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。
大量写 if else，会造成代码执行性能低下和管理混乱。编译到不同的工程后二次修改，会让后续升级变的很麻烦。
定义：
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
**写法：**以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
- #ifdef：if defined 仅在某平台存在
- #ifndef：if not defined 除了某平台均存在
- %PLATFORM%：平台名称
%PLATFORM% 可取值如下：
值
生效条件
VUE3
HBuilderX 3.2.0+ [详情
(opens new window)](ask.dcloud.net.cn/article/378…)
APP-PLUS
App
APP-PLUS-NVUE或APP-NVUE
App nvue
H5
H5
MP-WEIXIN
微信小程序
MP-ALIPAY
支付宝小程序
MP-BAIDU
百度小程序
MP-TOUTIAO
字节跳动小程序
MP-LARK
飞书小程序
MP-QQ
QQ小程序
MP-KUAISHOU
快手小程序
MP-JD
京东小程序
MP-360
360小程序
MP
微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW
快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION
快应用联盟
QUICKAPP-WEBVIEW-HUAWEI
快应用华为
支持的文件
- .vue
- .js
- .css
- pages.json
- 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug
