uni-app是一个使用 Vue.js 开发所有后端应用的框架，开发者编撰一套代码，可发布到iOS、Android、H5、以及各类小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
即使不跨端，uni-app同时也是更好的小程序开发框架。
具有vue和陌陌小程序的开发经验，可快速上手uni-app
为什么要去学习uni-app？
相对开发者来说，减少了学习成本，因为只学会uni-app以后，即可开发出iOS、Android、H5、以及各类小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大降低了开发成本。
环境搭建
安装编辑器HbuilderX下载地址
HBuilderX是通用的后端开发工具，但为uni-app做了非常加强。
下载App开发版，可开箱即用
安装陌陌开发者工具 下载地址
利用HbuilderX初始化项目
运行项目
在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行
在陌陌开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在陌陌开发者工具上面体验uni-app
在陌陌开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择音阶的手机
注意：
介绍项目目录和文件作用
pages.json文件拿来对uni-app进行全局配置，决定页面文件的路径、窗口式样、原生的导航栏、底部的原生tabbar 等
manifest.json文件是应用的配置文件，用于指定应用的名称、图标、权限等。
App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
main.js是我们的项目入口文件，主要作用是初始化vue实例并使用须要的插件。
uni.scss文件的用途是为了便捷整体控制应用的风格。比如按键颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
unpackage就是打包目录，在这儿有各个平台的打包文件
pages所有的页面储存目录
为了实现多端兼容，综合考虑编译速率、运行性能等诱因，uni-app约定了如下开发规范：
全局配置和页面配置通过globalStyle进行全局配置
用于设置应用的状态栏、导航条、标题、窗口背景色等。
创建新的message页面
右键pages新建message目录，在message目录下右键新建.vue文件,并选择基本模板
通过pages来配置页面
pages字段字段中第一项表示应用启动页
通过style更改页面的标题和导航栏背景色，并且设置h5下拉刷新的特有款式
配置tabbar
如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。
Tips
属性说明：
其中 list 接收一个链表，数组中的每位项都是一个对象，其属性值如下：
案例代码：
condition启动模式配置
启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。
属性说明：
组件的基本使用
uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各类组件拼接称自己的应用
uni-app中的组件，就像HTML中的div、p、span等标签的作用一样，用于搭建页面的基础结构
text文本组件的用法001 - text 组件的属性
属性
类型
默认值
必填
说明
selectable
boolean
false
否
文本是否可选
space
string
.
否
显示连续空格，可选参数：ensp、emsp、nbsp
decode
boolean
false
否
是否解码
002 - 代码案例
view视图容器组件的用法
View 视图容器， 类似于 HTML 中的 div
001 - 组件的属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存出来直接上传(img-vlodNeKi-1591618225468)(./images/2view.png)]
002 - 代码案例
button按键组件的用法001 - 组件的属性
002 - 案例代码
Tips
组件默认长度 300px、高度 225px；
src 仅支持相对路径、绝对路径，支持 base64 码；
页面结构复杂，css样式太多的情况，使用 image 可能造成款式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。
uni-app中的款式
rpx 即响应式px，一种依据屏幕长度自适应的动态单位。以750宽的屏幕为基准，750rpx正好为屏幕间距。屏幕变宽，rpx 实际显示疗效会等差放大。
使用@import句子可以导出外联样式表，@import后跟须要导出的外联款式表的相对路径，用;表示句子结束
支持基本常用的选择器class、id、element等
在 uni-app 中不能使用 * 选择器。
page 相当于 body 节点
定义在 App.vue 中的款式为全局款式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的款式为局部款式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
uni-app 支持使用字体图标，使用方法与普通 web 项目相同，需要注意以下几点：
uni-app中的数据绑定
在页面中须要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可
插值表达式的使用
{{msg}}
{{ flag ? '我是真的':'我是假的' }}
{{1+1}}
v-bind动态绑定属性
在data中定义一张图片，我们希望把这张图片渲染到页面上
利用v-bind进行渲染
还可以简写成:
v-for的使用
data中定以一个链表，最终将链表渲染到页面上
利用v-for进行循环
名字：{{item.name}}---年龄：{{item.age}}
uni中的风波
事件绑定
在uni中风波绑定和vue中是一样的，通过v-on进行风波的绑定，也可以缩写为@
点我啊
事件函数定义在methods中
事件传参
uni的生命周期
应用的生命周期
生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。
生命周期函数：在生命周期中每位阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数
uni-app 支持如下应用生命周期函数：
函数名
说明
onLaunch
当uni-app 初始化完成时触发（全局只触发一次）
onShow
当 uni-app 启动，或从后台步入前台显示
onHide
当 uni-app 从前台步入后台
onError
当 uni-app 报错时触发
页面的生命周期
uni-app 支持如下页面生命周期函数：
下拉刷新 开启下拉刷新
在uni-app中有两种形式开启下拉刷新
通过配置文件开启
创建list页面进行演示
通过pages.json文件中找到当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
通过API开启
uni.startPullDownRefresh()
监听下拉刷新
通过onPullDownRefresh可以窃听到下拉刷新的动作
关闭下拉刷新
uni.stopPullDownRefresh()
停止当前页面下拉刷新。
案例演示
上拉加载
通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离顶部开启加载的距离，默认为50px
通过onReachBottom窃听到触底的行为
网络恳求
在uni中可以调用uni.request方式进行恳求网路恳求
需要注意的是：在小程序中网路相关的 API 在使用前须要配置域名白名单。
发送get恳求
发送post恳求 数据缓存
uni.setStorage
将数据储存在本地缓存中指定的 key 中，会覆盖掉原先该 key 对应的内容，这是一个异步插口。
代码演示
uni.setStorageSync
将 data 存储在本地缓存中指定的 key 中，会覆盖掉原先该 key 对应的内容，这是一个同步插口。
代码演示
uni.getStorage
从本地缓存中异步获取指定 key 对应的内容。
代码演示
uni.getStorageSync
从本地缓存中同步获取指定 key 对应的内容。
代码演示
uni.removeStorage
从本地缓存中异步移除指定 key。
代码演示
uni.removeStorageSync
从本地缓存中同步移除指定 key。
代码演示
上传图片、预览图片
上传图片
uni.chooseImage方式从本地相册选择图片或使用单反照相。
案例代码
预览图片
结构
预览图片的方式
条件注释实现跨段兼容
条件编译是用特殊的注释作为标记，在编译时按照这种特殊的注释，将注释上面的代码编译到不同平台。
**写法：**以 #ifdef 加平台标示 开头，以 #endif 结尾。
平台标示
组件的条件注释
代码演示
api的条件注释
代码演示
样式的条件注释
代码演示
uni中的导航跳转
利用navigator进行跳转
跳转到普通页面
跳转到tabbar页面
利用编程式导航进行跳转
导航跳转文档
利用navigateTo进行导航跳转
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
通过navigateTo方式进行跳转到普通页面
通过switchTab跳转到tabbar页面
跳转到tabbar页面
通过switchTab方式进行跳转
redirectTo进行跳转
关闭当前页面，跳转到应用内的某个页面。
通过onUnload测试当前组件确实卸载
导航跳转传递参数
在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收
传递参数的页面
接收参数的页面
uni-app中组件的创建
在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方法导出，在通过components进行注册即可
组件的生命周期函数
组件的通信 父组件给子组件传值
通过props来接受外界传递到组件内部的值
其他组件在使用login组件的时侯传递值
子组件给父组件传值
通过$emit触发风波进行传递参数
父组件定义自定义事件并接收参数
uni-ui的使用
1、进入Grid宫格组件
2、使用HBuilderX导出该组件
3、导入该组件
4、注册组件
components: {uniGrid,uniGridItem}
5、使用组件
最后，总结一下用uni-app开发小程序的优点：
