uni-app介绍

环境

使用VUE语法，参考微信小程序标签和API，借鉴了美团点评mpvue、网易考拉Megalo；内置了vuex；

创建：vue create -p dcloudio/uni-preset-vue my-project
本地服务器：npm run serve
运行：npm run dev:<h5/mp-alipay/mp-baidu/mp-weixin/mp-toutiao>，除了H5在缓存中，其他在/dist/dev目录下
发布：npm run build:<h5/mp-alipay/mp-baidu/mp-weixin/mp-toutiao>，在/dist/build/目录下

cli和HBuilderX的差异：cli创建后编译器在项目下，内置d.ts，但是发布APP时，任然需要HBuilderx(只需要下载标准版)；
目录结构：静态资源只能放在static文件夹(内部es6 js/less/sass文件不会被编译，放新建common文件夹下)，manifest.json配置应用打包信息，pages.json配置页面路由信息，不支持vue-router；
uni-app插件市场获取插件和npm包；

生命周期（事件）

• 应用生命周期：仅可在app.vue中监听有效
  1. onLaunch：初始化(全局只触发一次) ，例如重定向页面跳转功能
  2. onShow：启动，或后台进入前台
  3. onHide：前台进入后台
  4. onUniNViewMessage：页面数据监听
• 页面生命周期
  1. onLoad：页面加载，上个页面传参
  2. onShow：页面显示
  3. onReady：初次渲染
  4. onHide：页面隐藏
  5. onUnload：页面卸载
  6. onResize：窗口尺寸变化
  7. onPullDownRefresh：下拉(例如下拉刷新)
  8. onReachBottom：页面上拉触底
  9. onTabltemTap：点击TAB触发，参数：index：被点击的序号；pagePath：被点击的页面路径；text：被点击的内部文字
  10. onShareAppMessage：点击分享
  11. onPageScroll：页面滚动，参数：scrollTop:垂直方向已滚动距离px；
  12. onNavigationBarButtonTap：‘原生标题栏按钮’点击事件，参数：index：下标
  13. onBackPress：页面返回（回调判断触发来源）：参数：from：行为来源=>“backbutton”左上角自带返回键，“navigateBack”函数uni.navigateBack()
  14. onNavigationBarSearchInputChanged：‘原生标题栏搜索框’输入变化事件
  15. onNavigationBarSearchInputConfirmed：‘原生标题栏搜索框’ 提交事件
  16. onNavigationBarSearchInputClicked：‘原生标题栏搜索框’ 点击事件

APP端点击Tabitem不跳转页面，不使用onTabitemTap，使用plus.nativeObj.view覆盖点击的Tabitem，拦截点击事件；

路由

• navigator组件跳转

	<navigator url="" redirect hover-class="">
		<button type=""></button>
	</navigator>

属性：url不加.vue后缀；hover-class="none"没有点击效果；open-type跳转方式（navigate：uni.navigateTo；redirect：uni.redirectTo；switchTab：uni.switchTab；reLaunch：uni.reLaunch；navigateBack：uni.navigateBack；）

• 调用API跳转：
  uni.navigateTo({url:""})保留当前跳转，可以使用uni.navigateBack返回；
  uni.redirectTo({url:""})关闭当前跳转；
  uni.reLaunch({url:""})关闭所有跳转；
  uni.switchTab({url:""})关闭非tabBar页面跳转到其他tabBar，且url不能传参；
  uni.navigateBack()关闭当前返回上级页面，默认1；

路由API页面必须是pages.json注册的vue页面；
tabBar页面必须是pages.json定义的页面；
打开web-url需APP:plus.runtime.openURL或web-view组件,H5:window.open,小程序:web-view组件(且联网白名单)；
url可传参：path?key=value&key2=value2；
navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
不能在 App.vue 里面进行页面跳转。

窗口动画
页面栈

样式与布局

• 建议使用flex布局；
• 支持px,vh,和upx（uni-app定义的动态单位：750宽为基准）；
• H5支持rem，微信支持rpx；
• 动态绑定数据不支持直接使用upx；函数uni.upx2px(num)转换为px；
• import导入相对外联样式表，以;结尾；
• 内联:style="{color:color}"一般用于动态绑定，静态卸载class中；
• 样式支持的选择器：.class、#id、element、多选逗号隔开、(::after、:;before仅微信小程序和5+APP生效；不能使用*选择器；page相当于body)；
• 定义在app.vue中全局；定义在子页面为局部，并覆盖app.vue中的样式；
• 内置CSS变量：--status-bar-height系统状态栏、--window-top内容距离顶部距离、--window-bottom内容距离底部距离；例如：.bar{height:var(--status-bar-height;)}、.toTop:{bottom:calc(var(--window-bottom)+10px);}
• 内置组件高度固定：NavigateBar，TabBar；
• 背景图支持base64转码（小于40kb）;本地不支持相对路径，只支持~@开头路径；支持web-url；字体图标web-url必须加https；
• <template></template>和<block></block>可以作为包装元素嵌套在vue的template里，不渲染，只作为条件控制的容器；

支持小程序自定义组件

基于vue的注意事项

• 选项属性或回调上不使用箭头函数；
• uni-app的onReady代替vue的mounted；
• uni-app的onLoad代替vue的created；
• data必须是返回对象函数，否则关闭页面数据不会销毁；
• 全局变量的实现；
• class属性和style属性支持的语法：静态class=".."或动态:class="{active:...}"或:class="{active:...,'text-danger':...}"或简写:class="[...,...]"或混合写法:class="[{active:...},...]"；只适合动态:style="{color:isColor,fontSize:itSize+'px'}"或:style="[{color:isColor,fontSize:itSize+'px'}]",其中不能用upx单位；或者编译后传入即可；
• click事件=>tap事件；使用VUE @绑定事件；
• 事件修饰符：.stop阻止事件冒泡(仅H5支持：.prevent、.self、.once、.capture、.passive)
• 禁止蒙版下的页面滚动：@touchmove.stop.prevent="moveHandle"，moveHandle可以为空函数或处理事件；
• 不支持按键修饰符；
• 表单组件：H5select标签用picker代替；radio用radio-group代替
• 不支持v-html指令(H5不支持dom和普通html元素)；
• 有且只能使用单文件(.vue)组件；(组件是整个vue.js最复杂的部分)

条件编译

借鉴C语言的#ifdef、#ifndef，以#ifdef或#ifndef加%platform%开头，#endif结尾；(if defined仅在某平台、if not defined除了某平台)；例如：#ifdef H5 || MP-WEIXIN仅在H5或微信小程序平台

平台：APP-PLUS(html5+规范)、APP-PLUS-NVUE(weex规范)、H5、MP-WEIXIN、MP-ALIPAY、MP-BAIDU、MP-TOUTIAO、MP-QQ(仅cli支持)、MP

条件编译通过注释实现：JS//、CSS/* */、vue/nvue html<!-- -->、JSON//

static静态目录下分目保存，名称为平台小写，实现条件编译；static根目录下或其他文件夹通用；

Android和iOS平台不支持条件编译，uni.getSystemInfo需要自行编写判断；

跨端组件

优化建议：自定义组件模式；避免使用大图，多尺寸适配；uni-app中data数据变化会驱动页面重新渲染，其他数据可不写在data里；懒加载，分批加载；减少嵌套层；减少事件通信；降低动画效果；全局样式的使用减少样式闪屏；使用nvue代替vue；

官方跨端开发注意事项

uni-app组件

扩展组件uni-ui

colorUI

使用Weex/nvue注意事项

使用html5+注意事项