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
屬性 類型 說明
若本號內容有做得不到位的地方（比如：涉及版權或其他問題），請及時聯系我們進行整改即可，會在第一時間進行處理。
請點贊！因為你們的贊同/鼓勵是我寫作的最大動力！
歡迎關注達叔小生的簡書！
這是一個有質量，有態度的博客
