一、什么是uni-app？uni-app 是一个使用 vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到ios、android、web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/qq/快手/钉钉/淘宝）、快应用等多个平台。
uni-app的优点
跨平台发行，运行体验更好
与小程序的组件、api一致；
兼容weex原生渲染，增加了开发效率高，但是由于weex坑比较多，建议还是使用局部渲染优化；
通用前端技术栈,学习成本更低
支持vue语法，微信小程序api
内嵌mpvue
开发生态,组件更丰富
支持通过npm安装第三方包
支持微信小程序自定义组件及js sdk
兼容mpvue组件及项目(内嵌mpvue开源框架)
app端支持和原生混合编码
插件丰富,dcloud将发布插件到市场
二、功能框架
三、创建项目在点击工具栏里的文件 -> 新建 -> 项目：
选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。
uni-app自带的模板有 hello uni-app ，是官方的组件和api示例。还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。
运行uni-app
浏览器运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 h5 版。
真机运行：连接手机，开启usb调试，进入hello-uniapp项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。
在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。
**注意：**如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。 若hbuilderx不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在hbuilderx里面开发，在微信开发者工具里面就可看到实时的效果。uni-app默认把项目编译到根目录的unpackage目录。
其他支付宝小程序、百度小程序、字节跳动小程序、360等运行方式都是差不多的，感兴趣的话可以去官网查看
四、目录结构一个uni-app工程，默认包含如下目录及文件：
┌─unicloud 云空间目录，阿里云为unicloud-aliyun,腾讯云为unicloud-tcb（详见unicloud）│─components 符合vue组件规范的uni-app组件目录│ └─comp-a.vue 可复用的a组件├─hybrid app端存放本地html文件的目录，详见├─platforms 存放各平台专用页面的目录，详见├─pages 业务页面文件存放的目录│ ├─index│ │ └─index.vue index页面│ └─list│ └─list.vue list页面├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此├─uni_modules 存放[uni_module](/uni_modules)规范的插件。├─wxcomponents 存放小程序组件的目录，详见├─main.js vue初始化入口文件├─app.vue 应用配置，用来配置app全局样式以及监听 应用生命周期├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见└─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见
五、生命周期应用生命周期
uni-app 支持 onlaunch、onshow、onhide 等应用生命周期函数
页面生命周期
uni-app 支持 onload、onshow、onready 等生命周期函数
组件生命周期
uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onload等生命周期
六、路由uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。所以 uni-app 的路由用法与 vue router 不同，如仍希望采用 vue router 方式管理路由，可在插件市场搜索 vue-router。
路由跳转
uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用api跳转。
页面栈
框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：
路由方式页面栈表现触发时机
初始化 新页面入栈 uni-app 打开的第一个页面
打开新页面 新页面入栈 调用 api uni.navigateto 、使用组件 <navigator open-type="navigate"/>
页面重定向 当前页面出栈，新页面入栈 调用 api uni.redirectto 、使用组件 <navigator open-type="redirectto"/>
页面返回 页面不断出栈，直到目标返回页 调用 api uni.navigateback 、使用组件 <navigator open-type="navigateback"/> 、用户按左上角返回按钮、安卓用户点击物理back按键
tab 切换 页面全部出栈，只留下新的 tab 页面 调用 api uni.switchtab 、使用组件 <navigator open-type="switchtab"/> 、用户切换 tab
重加载 页面全部出栈，只留下新的页面 调用 api uni.relaunch 、使用组件 <navigator open-type="relaunch"/>
七、判断平台平台判断有2种场景，一种是在编译期判断，一种是在运行期判断。
编译期判断 编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码。详见：
条件编译
// #ifdef h5 alert(只有h5平台才有alert方法)// #endif
如上代码只会编译到h5的发行包里，其他平台的包不会包含如上代码。
运行期判断 运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用uni.getsysteminfosync().platform判断客户端环境是 android、ios 还是小程序开发工具（在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用uni.getsysteminfosync().platform返回值均为 devtools）。
switch(uni.getsysteminfosync().platform){ case 'android': console.log('运行android上') break; case 'ios': console.log('运行ios上') break; default: console.log('运行在开发者工具上') break;}
如有必要，也可以在条件编译里自己定义一个变量，赋不同值。在后续运行代码中动态判断环境。
其他环境变量
其他环境变量的定义方式参考 环境变量。
八、uni-app 开发的注意事项html标签
uni-app的tag同小程序的tag，和html的tag不一样，比如p要改成view，span要改成text、a要改成navigator。
css
推荐使用flex布局模型
单位方面，uni-app 支持的通用 css 单位包括 px、rpx
(早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx 了)
js
只有h5端可使用浏览器内置对象，比如document、window、localstorage、cookie等，以及jquery等依赖。
九、页面样式与布局（1）尺寸单位
uni-app支持以下css单位：
注意问题： 动态绑定的 style 不支持使用 upx，因为upx是编译器处理的，在手机端动态修改样式赋值时，无法直接使用 upx。
解决方案： 使用 uni.upx2px(number) 转换为 px 后再赋值。
this.cwidth = uni.upx2px(750);
（2）样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
示例代码：
<style> @import ../../common/uni.css; .uni-card { box-shadow: none; }</style>
（3）内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view :style="{color:color}" />
class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<view class="normal_view" />
（4）选择器
目前支持的选择器有：
选择器样例样例描述
.class .intro 选择所有拥有 class=“intro” 的组件
#id #firstname 选择拥有 id=“firstname” 的组件
element view 选择所有 view 组件
element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
::after view::after 在 view 组件后边插入内容，仅 vue 页面生效
::before view::before 在 view 组件前边插入内容，仅 vue 页面生效
注意：
在 uni-app 中不能使用 * 在这里插入代码片选择器。微信小程序自定义组件中仅支持 class 选择器page 相当于 body 节点，例如：<!-- 设置页面背景颜色，使用 scoped 会导致失效 -->page { background-color:#ccc;}
（5）背景图片 和 字体图标
支持 base64 格式图片。支持网络路径图片。使用本地图片或字体图标需注意：
图片小于 40kb，uni-app 会自动将其转化为 base64 格式；
图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
本地引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。/* 背景图片 */ .bgimg { background-image: url('~@/static/logo.png'); }/* 字体图标 */ @iconimg { font-family: test1-icon; src: url('~@/static/iconfont.ttf'); }
十、常见问题常见问题大家可以去官网查看
这篇简单的介绍了一下uni-app，让大家先认识一下，希望大家能够喜欢。
推荐：《uniapp教程》
以上就是总结分享uni-app的简单介绍的详细内容。