uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力。
uniapp官网地址
uniapp官网地址：https://uniapp.dcloud.io/
uniapp的优势
开发者/案例数量更多
平台能力不受限 支持原生代码混写和原生sdk集成
性能体验优秀 体验更好的Hybrid框架，加载新页面速度更快
周边生态丰富 支持NPM、支持小程序组件和SDK、兼容mpvue组件和项目、兼容weex组件
学习成本低 采用vue语法+微信小程序api
开发成本低 开发成本，招聘、管理、测试各方面成本都大幅下降
uinapp特色
条件编译
#ifdef APP-PLUS需要条件编译的代码
仅出现在App平台下的代码
#endif#ifndef H5需要条件编译的代码
除了H5平台,其他平台均存在的代码#endif#ifdef H5 || MP-WEIXIN需要条件编译的代码
在H5平台或微信小程序平台存在的代码#endif
条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用 // #ifdef、css 使用 /* #ifdef */、vue/nvue 模板里使用
App端的Nvue开发
HTML5+
uniapp开发环境搭建
通过 HBuilderX 可视化界面 快速上手，创建项目，可参考官方文档，非常详细！
官方文档快速上手：https://uniapp.dcloud.io/quickstart
运行uni-app 第一次使用，需要配置开发工具的相关路径。
配置相应小程序开发者工具的路径
点击工具栏的运行 ==>> 运行到小程序模拟器 ==>>运行设置
在微信开发者工具打开时,需要先在微信开发者工具中开启服务端口
设置 ==>>安全 ==>> 开启服务端口
通过vue-cli命令行
// 全局安装vue-cli npm install -g @vue/cli// 创建uni-app vue create -p dcloudio/uni-preset-vue my-project// 运行、发布uni-appnpm run dev:%PLATFORM%npm run build:%PLATFORM%%PLATFORM% 取值 app-plus(app平台)、h5、mp-alipay(支付宝)、mp-baidu(百度)、mp-weixin(微信)mp-toutiao(头条)、mp-qq(qq)、mp-360(360)、quickapp-webview(快应用通用)、quickapp-webview-huawei(快应用华为)、quickapp-webview-union(快应用联盟)
uniapp生命周期
生命周期
应用生命周期 只能在App.vue中使用
// onLaunch 应用初始化完成 全局只触发一次// onShow 应用启动的时候 或者从后台进入前台会触发// onHide 应用从前台进入后台
页面生命周期
// onload 监听页面加载 可以获取页面传参// onReady 监听页面的初次渲染完成// onShow 监听页面显示 包括从下级页面点返回露出当前页面// onHide 监听页面隐藏// onUnload 监听页面卸载// onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新// onReachBottom 页面滚动到底部的事件 一般用于上拉加载// onTabItemTap 点击 tabbar 触发// onShareAppMessage 用户点击右上角分享
组件生命周期(即vue的生命周期)uni-app 组件支持的生命周期，与vue标准组件的生命周期相同！
常用生命周期执行顺序
// App Launch// APP Show// Page Onload// Page onShow// component beforeCreate// component created// component beforeMounted// component Mounted// Page onReady// component beforeDestroy// component destroyed// Page onUnload
uniapp默认模板目录
文件目录说明
components 自定义组件的目录
pages 页面存放目录
static 静态文件资源目录
unpackage 编译后的文件存放目录
app.vue 全局公用的状态数据等
main.js 应用入口
manifest.json 项目基础配置
pages.json 页面相关配置 注册页面 设置页面名称等
uni.scss 公用的scss变量 无需import这个文件
uniapp配置启动模式 condition
uniapp使用中其他问题
屏蔽自定义导航栏 仅支持 default/custom，custom即取消默认的原生导航栏 注意事项
"globalStyle": { "navigationStyle": "custom"
}自动导入自定义组件 无需import
// components/navbar/navbar.vue// index.vue 中 直接使用// import navbar from '../components/navbar/navbar.vue'// components: {// navbar// }在非H5 app mp-alipay中胶囊的位置
// 获取胶囊位置const menuButtonInfo = uni.getMenuButtonBoundingClientRect()console.log(menuButtonInfo)// wx {width: 87, height: 32, left: 278, right: 365, top: 26, bottom: 58}
