49.uni-app学习笔记（介绍）
前言：
uni-app是一个使用vue.js开发所有前端应用的框架；开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
1.创建运行uni-app项目的两种方法：
（1）通过HBuliderX可视化界面
首先需要下载HBuliderX
然后就是创建uni-app：
新建--项目--选择uni-app--输入项目名称--点击创建
然后就是运行项目uni-app：
这个运行前得看你下载的HBuliderX是什么版本的，下载开发板可以直接运行，下载标准版，在运行uni-app时，会提示安装uni-app插件（运行时自动安装）
点击工具栏运行---运行到浏览器---选择你电脑里的对应浏览器
（2）.通过vue-cli命令行
环境安装（全局安装vue-cli）
npm install -g @vue/cli
创建uni-app（使用正式版 对应HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-project
运行并发布uni-app
npm run dev:%PLATFORM%
npm run build:%PLATFORM%
%PLATFORM% 可取值如下：
| 值 | 平台 |
|---|---|
| h5 | H5 |
| mp-alipay | 支付宝小程序 |
| mp-baidu | 百度小程序 |
| mp-weixin | 微信小程序 |
| mp-toutiao | 头条小程序 |
| mp-qq | qq 小程序 |
2.生命周期
（1）应用生命周期
uni-app支持如下应用生命周期函数：
onLaunch （当uni-app初始化完成时触发 全局只触发一次）
onShow（当uni-app启动，或从后台进入前台显示）
onHide（当uni-app从前台进入后台）
onError（当uni-app报错时触发）
onUniNViewMessage（对nvue页面发送的数据进行监听）
注意：应用生命周期仅可在App.vue中监听，在其他页面监听无效；onlaunch里进行页面跳转
（2）页面生命周期
uni-app支持如下页面生命周期函数：
onload （监听页面加载，参数为上个页面传递的数据，参数类型为object）
onShow（监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面）
onReady（监听页面初次渲染完成，如果渲染速度快，会在页面进入动画完成前触发 ）
onHide（监听页面隐藏）
onUnload（监听页面卸载）
onResize（监听窗口尺寸变化）
onPullDownRefresh（监听用户下拉动作，一般用于下拉刷新）
onReachBotton（页面上拉触底事件的处理函数）
onTabItemTab（点击tab时触发，参数为object）
onShareAppMessage（用户点击右上角分享）
onPageScroll（监听页面滚动，参数为object）
onNavigationBarButtonTab（监听原生标题栏按钮点击事件，参数为object）
onBackPress（监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ）
onNavigationBarSearchInputChanged（监听原生标题栏搜索输入框输入内容变化事件）
onNavigationBarSearchInputConfirmed（监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的搜索按钮时触发）
onNavigationBarSearchInputClicked（监听原生标题栏搜索输入框点击事件）
3.路由
uni-app路由为框架统一管理，开发者需要在pages.json里配置好每个路由页面的路径及页面样式。
有两种页面路由跳转方式：使用navigator组件跳转，调用API跳转。
4.运行环境判断
uni-app可以通过process.env.NODE_ENV判断当前环境是开发环境还是生产环境
在HBuilderX中，点击运行编译的代码是开发环境，点击发行编译的代码是生产环境；
cli模式下，是通行的编译环境处理方式：
if(process.env.NODE_ENV === 'development'){
console.log('开发环境')
}else{
console.log('生产环境')
}5.页面样式与布局
（1）尺寸单位
uni-app支持的通用css单位包括px rpx：
px 即屏幕像素； rpx即响应式px，一种根据屏幕宽度自适应的动态单位。
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx
即页面元素宽度在uni-app中的宽度：750 * 元素在设计稿中的宽度 / 设计稿基准宽度
（2）样式导入
使用@import语句可以导入外联样式表