本篇文章中給大家簡單的介紹了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
**注意：**如果是第一次使用，需要先配置小程式ide的相關路徑，才能運行成功。如下圖，需在輸入框輸入微信開發者工具的安裝路徑。若HBuilderX無法正常啟動微信開發者工具，需要開發者手動啟動，然後將uni-app生成小程式工程的路徑拷貝到微信開發者工具裡面，在HBuilderX裡面開發，在微信開發者工具裡面就可看到即時的效果。 
其他支付寶小程式、百度小程式、位元組跳動小程式、360等運作方式都是差不多的，有興趣的話可以去官網查看
┌─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 有兩種頁面路由跳轉方式：使用navigator元件跳轉、呼叫API跳轉。
頁面堆疊
框架以堆疊的形式管理目前所有頁面， 當發生路由切換的時候，頁面堆疊的表現如下：
| 路由方式 | 頁面堆疊表現 | 觸發時機 |
|---|---|---|
| 初始化 | 新頁面入棧 | uni-app 開啟的第一個頁面 |
| 開啟新頁面 | 新頁面入堆疊 | 呼叫API uni. navigateTo 、使用元件<navigator open-type="navigate"></navigator>
|
| 頁面重定向 | 目前頁面出棧，新頁面入棧 | 呼叫API uni.redirectTo 、使用元件<navigator open-type="redirectTo"></navigator>
|
| 頁面返回 | 頁面不斷出棧，直到目標回傳頁 | 呼叫API uni.navigateBack 、使用元件<navigator open-type="navigateBack"></navigator> 、用戶按左上角返回按鈕、安卓使用者點擊實體back按鍵 |
| Tab 切換 | #頁面全部出棧，只留下新的Tab 頁面 | 呼叫API uni.switchTab 、使用元件<navigator open-type="switchTab"></navigator> 、使用者切換Tab |
| #重載入 | 頁面全部出棧，只留下新的頁面 | 呼叫API uni.reLaunch 、使用元件<navigator open-type="reLaunch"></navigator>
|
平台判断有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></view>
class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<view></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 中不能使用 * 在这里插入代码片选择器。page 相当于 body 节点，例如：<!-- 设置页面背景颜色，使用 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的簡單介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
