uni-app 使用vue的语法+小程序的标签和API。
一、开发规范
- 页面文件遵循 Vue 单文件组件 (SFC) 规范
.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 template、script 和 style，还允许添加可选的自定义块。
- 组件标签靠近小程序规范，详见uni-app 组件规范
虽然不推荐使用HTML标签，但实际上如果开发者写了div等标签，在编译到非H5平台时也会被编译器转换为view标签。但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。基于内置的基础组件，可以开发各种扩展组件，组件规范与vue组件相同。
- 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
- 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
- 为兼容多端运行，建议使用flex布局进行开发
二、目录结构
Tips:
- static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
- css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。
- HbuilderX 1.9.0+ 支持在根目录创建 ext.json sitemap.json 文件。
三、生命周期
1、应用生命周期
Tips:
- 应用生命周期仅可在App.vue中监听，在其它页面监听无效。
2、页面生命周期
Tips:
- 避免在 onShow 里使用需要权限的 API（比如 setScreenBrightness() 等需要手机权限）, 可能会再次触发onShow造成死循环。
四、路由
开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。
Tips:
- 两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。
- 页面栈
五、运行环境判断
1、开发环境和生产环境
通过 process.env.NODE_ENV判断，如果你需要自定义更多环境，可以 package.json 中配置，在HBuilderX的运行和发行菜单里会多一个出来。
if(process.env.NODE_ENV === 'development'){
console.log('开发环境')
}else{
console.log('生产环境')
}
2、判断平台
场景1：编译期判断——即条件编译，不同平台在编译出包后已经是不同的代码
// #ifdef H5
alert("只有h5平台才有alert方法")
// #endif
场景2：运行期判断——可使用 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具
switch(uni.getSystemInfoSync().platform){
case 'android':
console.log('运行Android上')
break;
case 'ios':
console.log('运行iOS上')
break;
default:
console.log('运行在开发者工具上')
break;
}
六、页面样式与布局
uni-app 支持的通用 css 单位包括 px、rpx
Tips:
- 注意 rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位。
七、<template/> 和 <block/>
uni-app 支持在 template 模板中嵌套 <template/> 和 <block/>，用来进行列表渲染和条件渲染。
<template/> 和 <block/> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
<block/> 在不同的平台表现存在一定差异，推荐统一使用 <template/>。
<template>
<view>
<template v-if="test">
<view>test 为 true 时显示</view>
</template>
<template v-else>
<view>test 为 false 时显示</view>
</template>
</view>
</template>
<template>
<view>
<block v-for="(item,index) in list" :key="index">
<view>{{item}} - {{index}}</view>
</block>
</view>
</template>
