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

• 2019 年 10 月 10 日
• 筆記

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轉換公式如下：

file

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

file

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

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

file

內聯樣式 框架組件上支援使用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 支付寶小程式特有配置

file

manifest.json文件的配置

mp-weixin 屬性 類型 說明

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