1、簡介

1.1 概述

uni-app 是一個使用 Vue.js 開發跨平臺應用的前端框架，開發者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個平臺

1.2為什么使用Uni-App

1.3 Uni-App功能

開發功能，參考，借鑒 插件市場：https://ext.dcloud.net.cn/

2、快速上手

1、安裝HbuildX 開發工具

2、創建項目

3、命名

選擇uni-app，輸入工程名，如：hello-uniapp，點擊創建，即可成功創建 uni-app。點擊模板里的 Hello uni-app 即可體驗官方示例。

4、運行項目

目前只支持谷歌瀏覽器運行uni-app項目 也可以在真機、模擬器

運行成功，自動打開瀏覽器

http://10.8.165.87:8080/h5/

3、詳細教程

3.1 項目結構

pages:頁面我們app的頁面都在這個文件夾中

內部都是文件夾 名稱 就是頁面名稱

文件夾內部就是頁面名稱 以.vue 基于Vue開發

static:靜態資源

圖片、音頻、視頻等

App.vue 應用配置，用來配置App全局樣式以及監聽

main.js Vue初始化入口文件

manifest.json 配置應用名稱、appid、logo、版本等打包信息

pages.json

Vue初始化入口文件 ├─App.vue 應用生命周期 ├─manifest.json 配置應用名稱、appid、logo、版本等打包信息，詳見 └─pages.json 配置頁面路由、導航條、選項卡等頁面類信息

https://element.eleme.cn/#/zh-CN 餓了么UI 基于Vue2.0開發的VUE組件

3.2 詳細教程

3.2.1 頁面跳轉 路由

uni-app路由全部交給框架統一管理，開發者需要在pages.json里配置每個路由頁面的路徑及頁面樣式，不支持 Vue Router

uni-app 有兩種路由跳轉方式：使用navigator組件跳轉、調用API跳轉

3.2.2 頁面尺寸

uni-app支持的通用css單位包括px、upx、vh。

px 即屏幕像素

upx 是uni-app提供的一種根據屏幕寬度自適應的動態單位。以750寬的屏幕為基準，屏幕變寬，upx實際顯示效果會等比放大。

vh 是視窗高度的百分比

3.2.3 樣式

目前支持的選擇器有：

樣式導入的方式：

1、外部css文件

使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束

2、內聯樣式

框架組件上支持使用 style、class 屬性來控制組件的樣式。

style：靜態的樣式統一寫到 class 中。style 接收動態的樣式，在運行時會進行解析，請盡量避免將靜態的樣式寫進 style 中，以免影響渲染速度。

class：用于指定樣式規則，其屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。

3.2.4 組件 控件 標簽

總結

以上是生活随笔為你收集整理的Uni-Java_Java全栈必备之Uni-App的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。