uni app 零基礎小白到項目實戰-1

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
屬性 類型 說明

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。

---

請點贊！由於大家的贊同/鼓勵是我寫做的最大動力！

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

這是一個有質量，有態度的博客