uni-app是一個使用vue.js開發跨平臺應用的前端框架。 開發者通過編寫vue.js程式碼，uni-app將其編譯到Ios,android,微信小程式等多個平臺，保證其正確並達到優秀體驗。 Uni-app繼承自vue.js，提供了完整的vue.js開發體驗。

uni-app元件規範和擴充套件api與微信小程式基本相同。 有一定vue.js和微信小程式開發經驗的開發者可快速上手uni-app，開發出相容多端的應用。

uni-app提供了條件編譯優化 pages.json: 配置頁面路由，導航條，選項卡等頁面類資訊。

manifest.json: 配置應用名稱，appid，Logo，版本 app.vue 應用配置，用來配置app全域性樣式以及監聽應用的生命週期。

main.js: vue初始化入口檔案

static目錄：存放應用引用靜態資源 pages目錄：業務頁面檔案存放目錄 components目錄：元件檔案存放目錄

uni-app頁面樣式與佈局 重要說明 請刪除app.vue中的全域性樣式，view{display:flex;} 在需要flex的時候使用flex即可。

尺寸單位 uni-app框架目前僅支援長度單位px和%，與傳統web頁面不同，px是相對於基準寬度的單位，已經適配了移動端螢幕，其原理類似於rem。

uni-app的基準寬度為750px 開發者只需要按照設計稿樣式中的px值即可，設計稿1px與框架樣式1px轉換公式如下：

uni-app的基準寬度為750px 開發者只需要按照設計稿確定框架樣式中的px值即可。

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

<style>
 @import "../../common/uni.css";
 .uni-card {
  box-shadow: none;
 }
</style>

內聯樣式 框架元件上支援使用style，class屬性來控制組件的樣式

style:靜態的樣式統一寫到class中，style接收動態的樣式，在執行解析，請儘量避免將靜態樣式寫進style中，以免影響渲染速度。
<view style="color:{{color}};"/>

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

<view class="normal_view"/>
 

選擇器 目前支援的選擇器有：

.class .intro 選擇所有擁有 class="intro" 的元件
#id #firstname 選擇擁有 id="firstname" 的元件
element view 選擇所有view 元件
element, element view, checkbox 選擇所有文件的view 元件和所有的checkbox 元件

::after view::after在view元件後邊插入內容，僅微信小程式和5+app生效
::before view::before在view元件前邊插入內容，僅微信小程式和5+app生效

全域性樣式與區域性樣式 定義在app.vue中的樣式為全域性樣式，作用於每一個頁面。在pages目錄下的vue檔案中定義的樣式為區域性樣式，只作用在對應的頁面，並會覆蓋app.vue中相同的選擇器。

注意： app.vue中通過@import語句可以匯入外聯樣式，一樣作用於每一個頁面。

flex佈局 為支撐跨平臺，框架建議使用flex佈局

重要說明

請刪除app.vue中的全域性樣式

view{display:flex;}
在需要flex的時候使用flex即可

尺寸單位 uni-app框架目前支援長度單位px和%，與傳統weeb頁面不同，px是相對於基準寬度的單位，已經適配了移動端螢幕，其原理類似於rem。

uni-app的基準寬度為750px。

.content {
 flex: 1;
 justify-content: center;
 align-items: center;
}
.title {
 font-size: 36px;
 color: #8f8f94;
}

pages.json pages.json檔案用來對uni-app進行全域性配置，決定頁面檔案的路徑，視窗表現，設定多tab等。 pages.json配置項列表

globalStyle Object 否 設定預設頁面的視窗表現 pages Object Array 是 設定頁面路徑以及視窗表現 tabBar object 否 設定底部 tab的表現 condition Object 否 啟動模式配置

"globalStyle": {
"navigationBarTextStyle":"white",

globalStyle 用於設定應用的狀態列，導航條，標題，視窗背景色等。

navigationBarBackgroundColor
導航欄背景顏色

navigationBarTextStyle
導航欄標題顏色

navigationBarTitleText 
導航欄標題文字內容

navigationStyle
導航欄樣式

backgroundColor
視窗的背景色

navigationStyle只有在pages.json->globalStyle中設定生效，開啟custom後，所有視窗均無導航欄。

pages 接收一個數組，來指定應用由哪些頁面組成。 每一項代表對應頁面的資訊，應用中新增/減少頁面，都需要對Pages陣列進行修改。

weui框架 weui是一套小程式的ui框架，所謂ui框架就是一套介面設計方案，有了元件，我們可以用它來拼接出一個內容豐富的小程式，而有了一個Ui框架，就能讓我們的小程式變得更加美觀。

體驗weui小程式 weui是微信官方設計團隊設計的一套同微信原生視覺體驗一致的基礎樣式庫，在手機微信裡搜尋weui小程式或掃描，即可在手機裡體驗。

我們還可以下載weui小程式的原始碼在開發者工具裡檢視它具體是怎麼做的。

下載解壓壓縮包之後可以看到weui-wxss-master資料夾，點選開發者工具工具欄裡的專案選單選擇匯入專案，之後就可以在開發者工具檢視到weui的原始碼了。

專案名稱，可以自己命名。 下拉選擇appid。

小任務：為什麼是weui-wxss-master下的dist資料夾，而不是weui-wxss-master？

結合weui在開發者工具模擬器的實際體驗以及weui的原始碼，找到weui基礎元件裡的article，flex，grid，panel，表單元件裡的button，list與之對應的pages資料夾下的頁面檔案，並檢視該頁面檔案的wxml，wxss程式碼，瞭解他們是如何寫的。

小任務，點選開發者工具類欄裡的預覽，用手機微信掃描二維碼體驗，看看與官方的weui小程式有什麼不同。

weui的介面雖然非常簡單，但是背後卻包含著非常多的設計理念，這一點我們可以閱讀。

weui的使用

pages
image
style
weui.wxss
app.js
app.json
app.wxss

使用開發者工具開啟模板小程式的app.wxss檔案的第二行新增如下程式碼：

@import 'style/weui.wxss';

flex佈局 如何給wxml檔案新增文字，連結，圖片等元素和元件，我們希望給這些元素和元件的排版更加結構化，不再是單純的上下關係，還有左右關係，以及左右上下巢狀的關係。

佈局也是一種樣式，也屬於css方面的知識哦。 小程式的佈局採用的是flex佈局，flex是彈性佈局，用來為盒狀模型提供最大的靈活性。

<view class="flex-box">
 <view class="list-item">Python</view>
 <view class="list-item">小程式</view>
 <view class="list-item">網站建設</view>
</view>

.list-item {
 background-color: #82c2f7;
 height: 100px;
 text-align: center;
 border: 1px solid #bdd2f8;
}

讓元件變成左右關係

.flex-box {
  display: flex;
}

tabBar 如果應用時一個多tab應用，可以通過tabBar配置指定tab欄的表現，以及tab切換顯示的對應頁。

當設定position為top時，將不會顯示icon

屬性說明： name String 應用名稱 appid String 應用標識

description 應用描述 versionName 版本名稱 versionCode 版本號

app-plus 特有配置

quickapp 快應用特有配置 mp-weixion 微信小程式特有配置 mp-baidu 百度特有配置 mp-alipay 支付寶小程式特有配置

manifest.json檔案的配置

mp-weixin 屬性 型別 說明

若本號內容有做得不到位的地方（比如：涉及版權或其他問題），請及時聯絡我們進行整改即可，會在第一時間進行處理。

---

請點贊！因為你們的贊同/鼓勵是我寫作的最大動力！

歡迎關注達叔小生的簡書！

這是一個有質量，有態度的部落格

相關推薦