1、簡介

1.1 概述

uni-app 是一個(gè)使用 Vue.js 開發(fā)跨平臺(tái)應(yīng)用的前端框架，開發(fā)者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個(gè)平臺(tái)

1.2為什么使用Uni-App

1.3 Uni-App功能

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

2、快速上手

1、安裝HbuildX 開發(fā)工具

2、創(chuàng)建項(xiàng)目

3、命名

選擇uni-app，輸入工程名，如：hello-uniapp，點(diǎn)擊創(chuàng)建，即可成功創(chuàng)建 uni-app。點(diǎn)擊模板里的 Hello uni-app 即可體驗(yàn)官方示例。

4、運(yùn)行項(xiàng)目

目前只支持谷歌瀏覽器運(yùn)行uni-app項(xiàng)目 也可以在真機(jī)、模擬器

運(yùn)行成功，自動(dòng)打開瀏覽器

http://10.8.165.87:8080/h5/

3、詳細(xì)教程

3.1 項(xiàng)目結(jié)構(gòu)

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

內(nèi)部都是文件夾 名稱 就是頁面名稱

文件夾內(nèi)部就是頁面名稱 以.vue 基于Vue開發(fā)

static:靜態(tài)資源

圖片、音頻、視頻等

App.vue 應(yīng)用配置，用來配置App全局樣式以及監(jiān)聽

main.js Vue初始化入口文件

manifest.json 配置應(yīng)用名稱、appid、logo、版本等打包信息

pages.json

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

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

3.2 詳細(xì)教程

3.2.1 頁面跳轉(zhuǎn) 路由

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

uni-app 有兩種路由跳轉(zhuǎn)方式：使用navigator組件跳轉(zhuǎn)、調(diào)用API跳轉(zhuǎn)

3.2.2 頁面尺寸

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

px 即屏幕像素

upx 是uni-app提供的一種根據(jù)屏幕寬度自適應(yīng)的動(dòng)態(tài)單位。以750寬的屏幕為基準(zhǔn)，屏幕變寬，upx實(shí)際顯示效果會(huì)等比放大。

vh 是視窗高度的百分比

3.2.3 樣式

目前支持的選擇器有：

樣式導(dǎo)入的方式：

1、外部css文件

使用@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語句結(jié)束

2、內(nèi)聯(lián)樣式

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

style：靜態(tài)的樣式統(tǒng)一寫到 class 中。style 接收動(dòng)態(tài)的樣式，在運(yùn)行時(shí)會(huì)進(jìn)行解析，請(qǐng)盡量避免將靜態(tài)的樣式寫進(jìn) style 中，以免影響渲染速度。

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

3.2.4 組件 控件 標(biāo)簽

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。