uni-app是啥？

Uni-app 是一个使用Vue.js 开发跨平台应用的前端框架。

对技术人员来说而且：不用学那么多的平台开发技术、研究那么多的前端框架，学会基于vue的uni-app就够了。

对公司而言：更低成本，覆盖更多用户，uni-app 是高效利器。

组件标签靠近微信小程序规范

uni-app 使用vue的语法+小程序的标签和API。

注意：不能使用HTML标签，也不能用js对dom进行操作

接口能力（JS API）靠近微信小程序规范，但需将前缀wx替换为uni。

数据绑定及时间处理靠近vue.js 规范，同时补充了App及页面的生命周期。

为兼容多端运行，建议使用flex布局进行开发。

目录结构
一个uni-app工程，默认包含如下目录及文件：

pages.json：文件用来对uni-app进行全局配置，决定页面文件的路径、窗口表现、设置多tab等。
manifest.json：配置应用名称、appid、logo、版本等打包信息。
App.vue：应用配置，用来配置App全局样式以及监听应用的生命周期。
main.js：Vue初始化入口文件
static目录：存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
pages目录：业务页面文件存放目录
components目录：组件文件存放目录

编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。

static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。

css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。

尺寸单位

uni-app支持通用css 单位包括：px、rpx。

响应式单位upx和rpx是动态宽度单位。

很多开发者对响应式单位太依赖了，其实按需使用吧。一般情况下高度和字体大小不应该根据屏幕宽度变动的，除非你需要。

只有当你需要某元素的单位要根据屏幕宽度大小变化时，才需要rpx 这类的动态宽度单位。

开发环境和生产环境

process.env.NODE_ENV === 'production' 表示生产环境。

判断平台

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

• #ifdef：if defined 仅在某平台存在
• #ifndef：if not defined 除了某平台均存在
• %PLATFORM%：平台名称

路由

Uni-app 页面路由为框架统一管理，开发者需要在pages.json 里配置每个路由的路径及页面样式。类似小程序在app.json 中配置页面路由一样。

页面生命周期

不论是app 还是小程序，生命周期是非常重要的知识。

uni-app支持如下页面生命周期函数：

onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为object（用于页面传参）
onShow 监听页面显示
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载
onPullDownRefresh 监听用户下拉动作
onReachBottom 页面上拉触底事件的处理函数
onShareAppMessage 用户点击右上角分享 微信小程序
onPageScroll 监听页面滚动
onTabItemTap 当前是 tab 页时，点击 tab 时触发。