Java全棧必備之Uni-App


 

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM