广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

本篇文章中给大家简单的介绍了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

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跳转。

页面栈 框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：

平台判断有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;}

如有必要，也可以在条件编译里自己定义一个变量，赋不同值。在后续运行代码中动态判断环境。

其他环境变量 其他环境变量的定义方式参考 环境变量。

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）选择器 目前支持的选择器有：

注意：

<!-- 设置页面背景颜色，使用 scoped 会导致失效 -->page {  background-color:#ccc;}

（5）背景图片 和 字体图标

/* 背景图片 */ .bgImg {     background-image: url('~@/static/logo.png'); }/* 字体图标 */ @iconImg {     font-family: test1-icon;     src: url('~@/static/iconfont.ttf'); }

常见问题大家可以去官网查看

这篇简单的介绍了一下uni-app，让大家先认识一下，希望大家能够喜欢。

推荐：《uniapp教程》

以上就是总结分享uni-app的简单介绍的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~