uni-app是基于Vue.js开发的前端应用框架

1. vue的语法+小程序的标签和API

• 页面文件遵循 Vue 单文件组件 规范
• 组件标签靠近小程序规范，详见uni-app 组件规范
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
• 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发

2.学习过程

• 官网有如何学习uni-app的介绍
• 框架简介： 学习框架
• 使用vue的注意事项
• 使用weex的注意事项
• 使用H5+的注意事项(只能在app端用)

3.uni-app运行原理

uni-app在非H5端采用逻辑层和视图层分离
逻辑层：执行逻辑
视图层：渲染页面
逻辑层是运行在一个独立的jscore里的，它不依赖于本机的webview，所以一方面它没有浏览器兼容问题，可以在Android4.4上跑es6代码，另一方面，它无法运行window、document、navigator、localstorage等浏览器专用的js API。
两层分离的利与弊
uni-app采用去dom的操作，采用vue的MVVM的方式

4.uni-app的组件

uni-app的内置组件+扩展组件可以满足大部分的业务需求
要想组件全端通用，必须是基于vue且无dom操作的库、组件

5.API

要明白标准js与浏览器js的区别

6.注意

• MVVM模式 双向绑定
• 页面路由 页面的配置 标题的配置
• 宏观讲解配置文件
• 应用生命周期
• 页面生命周期
• 标签的背景图片：必须使用在线图片
• 固定像素 响应像素 （有些需要写死为固定像素）
• 标签外部使用{ {表达式}} 标签内部使用 指令
• 事件 使用 @作为开头
• click事件 tap事件 同时监听两个事件的话，web端只发生tap，手机端两个都发生
• longpress(长时间按压)与longtap(长时间触摸) longtap 推荐使用longpress
• touchcancel事件是被动触发的 比如来电提醒
• v-if 与 v-show 的 区别 (v-if为false时，会从dom移除;v-show为false时，是display为none)
• 指令 v-for v-bind:key的作用（就像for循环嵌套时用ijk一样）
• Flex布局：沿主轴的排列方式，换行方式，对齐方式
• 反横向排列时,元素靠左；反纵向排列时，元素没有靠底部，是因为外部的view没有设置高度，但是是有宽度的，就像div一样,默认占据一行
• 子元素没有高度时，默认会拉伸至父元素高度
• 没有设置宽高时，宽度为一行,高度由内容撑开
• 横向、纵向均可以为主轴、交叉轴，没有设置数值时，交叉轴可以拉伸
• 先确立主轴、副轴，再确定两轴的对齐方式，多轴时将轴作为元素排列
• flex的元素还可通过属性控制大小、顺序
• flex的元素缩小、放大时，0是不缩放，负数无效，按照正数的比例进行缩放
• app.vue里面书写适用于全局的样式
• 在app端可以不用导航栏 全部的小程序都必须用 导航栏
• 每个页面均可以配置样式 分为 小程序、H5、app-plus，例如可以显示原生导航栏的禁用，另外H5在不设置样式的情况下，会采用app-plus的样式。
• 在common文件夹下创建js文件，通过import导入再使用
• 对于全局变量，可以放在组件文件里，也可以在main.js里，挂载在全局对象上
• 对于"组件",可以暂时理解为 自定义 一种标签
• 对于自定义组件的使用，可以在main.js里通过Vue.use注册，也可以在单个的vue页面里注册components
• 在vue的用法里面，生命周期很重要的呀，用于写一些函数
• 对于循环渲染的标签，索引值的在dataset下存储，且属性名称全部为小写
• 通过对form里的类似于input添加name属性，来使用sumbit方法