Java全棧必備之Uni-App

 

　　一、簡介

　　1.1 概述

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

　　

 

　　1.2爲何使用Uni-App

　　1.3 Uni-App功能

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

　　二、快速上手

　　一、安裝HbuildX 開發工具

　　二、建立項目

　　三、命名

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

　　四、運行項目

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

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

　　http://10.8.165.87:8080/h5/

　　三、詳細教程

　　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 樣式

　　目前支持的選擇器有：

　　樣式導入的方式：

　　一、外部css文件

　　使用@import語句能夠導入外聯樣式表，@import後跟須要導入的外聯樣式表的相對路徑，用;表示語句結束

　　二、內聯樣式

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

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

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

 

　

 

　3.2.4 組件 控件 標籤