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 組件 控件 標簽