uni-app小白入門自學筆記（一）

碼文不易啊，轉載請帶上本文連接呀，感謝感謝 https://www.cnblogs.com/echoyya/p/14427845.html

目錄

• 碼文不易啊，轉載請帶上本文連接呀，感謝感謝 https://www.cnblogs.com/echoyya/p/14427845.html
• 環境搭建
  • 建立uni-app
  • 運行uni-app
• 介紹項目目錄，文件做用
• 頁面外觀設置
• 頁面底部 tabBar
• 啓動模式配置 condition
• 數據及事件綁定
• 組件使用
• uni-app中的樣式
• 條件註釋實現跨端兼容
  • 跨端兼容
  • 條件編譯

環境搭建

官網文檔解釋：uni-app 是一個使用 Vue.js 開發全部前端應用的框架，開發者編寫一套代碼，可發佈到iOS、Android、Web（響應式）、以及各類小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平臺。

須要下載開發工具：HBuilderX是通用的前端開發工具，但爲uni-app作了特別強化。下載App開發版，可開箱即用；

• HBuilderX：下載地址

• 微信開發者工具：下載地址

建立uni-app

打開開發工具，HBuilderX，點擊工具欄裏的文件 -> 新建 -> 項目-> 選擇uni-app，輸入項目名，選擇模板，點擊建立

運行uni-app

• 瀏覽器運行：進入項目，點擊工具欄的運行 -> 運行到瀏覽器 -> 選擇瀏覽器

• 微信開發者工具裏運行：進入項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 微信開發者工具，

  • 若是是第一次使用，須要先配置小程序ide的相關路徑，才能運行成功。需在輸入框中輸入微信開發者工具的安裝路徑。

  • 微信開發者工具 -> 設置 -> 安全設置 -> 安全 -> 開啓服務端口

介紹項目目錄，文件做用

• pages.json ：對 uni-app 進行全局配置，決定頁面文件的路徑、窗口樣式、原生的導航欄、底部的原生tabbar 等。

• manifest.json ：是應用的配置文件，用於指定應用的名稱、圖標、權限等

• App.vue：是uni-app的主組件，全部頁面都是在App.vue下進行切換的，是頁面入口文件。但其自己不是頁面，這裏不能編寫視圖元素。能夠調用應用生命週期函數、配置全局樣式、配置全局的存儲globalData

• main.js：是uni-app的入口文件，主要做用是初始化vue實例、定義全局組件、插件等。

• uni.scss：爲了方便總體控制應用的風格。如按鈕顏色、邊框風格，uni.scss文件裏預置了一批scss變量預置。

• unpackage：項目打包目錄，存在各個平臺的打包文件

• pages：全部的頁面存放目錄

• static：靜態資源目錄，圖片等

• comonents：組件存放目錄

頁面外觀設置

全局配置 globalstyle :用於設置應用的狀態欄、導航條、標題、窗口背景色等。列舉如下經常使用

屬性	類型	默認值	描述
navigationBarBackgroundColor	HexColor	#F7F7F7	導航欄背景顏色（同狀態欄背景色）
navigationBarTextStyle	String	white	導航欄標題顏色及狀態欄前景顏色，僅支持 black/white
navigationBarTitleText	String		導航欄標題文字內容
backgroundColor	HexColor	#ffffff	下拉顯示出來的窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的樣式，僅支持 dark / light
enablePullDownRefresh	Boolean	false	是否開啓下拉刷新
onReachBottomDistance	Number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位只支持px

頁面配置 pageStyle

uni-app 經過 pages 節點配置應用由哪些頁面組成，pages 節點接收一個數組，數組每一個項都是一個對象

• pages節點的第一項爲應用入口頁（即首頁）

• 應用中新增/減小頁面，都須要對 pages 數組進行修改，且不需寫後綴，框架會自動尋找路徑下的頁面資源

屬性	類型	描述
path	String	配置頁面路徑
style	Object	配置頁面窗口表現，配置項參考 pageStyle

頁面底部 tabBar

若應用是一個多 tab 應用，能夠經過 tabBar 配置項指定一級導航欄，以及 tab 切換時顯示的對應頁。

在 pages.json 中提供 tabBar 配置，不只方便快速開發導航，更重要的是在App和小程序端提高性能。

• 當設置 position 爲 top 時，將不會顯示 icon

• tabBar 中的 list 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。

• tabbar 的頁面展示過一次後就保留在內存中，再次切換 tabbar 頁面，只會觸發每一個頁面的onShow，不會再觸發onLoad。

屬性說明：

屬性	類型	必填	默認值	描述
color	HexColor	是		tab 上的文字默認顏色
selectedColor	HexColor	是		tab 上的文字選中時的顏色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar 上邊框的顏色，可選值 black/white
list	Array	是		tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab
position	String	否	bottom	可選值 bottom、top

其中 list 接收一個數組，數組中的每一個項都是一個對象，其屬性值以下：

屬性	類型	必填	說明
pagePath	String	是	頁面路徑，必須在 pages 中先定義
text	String	是	tab 上按鈕文字，在 App 和 H5 平臺爲非必填。
iconPath	String	否	圖片路徑，當 postion 爲 top 時，此參數無效，不支持網絡圖片和字體圖標
selectedIconPath	String	否	選中時的圖片路徑，當 postion 爲 top 時，此參數無效

啓動模式配置 condition

僅開發期間生效，用於模擬直達頁面的場景，如：小程序轉發後，用戶點擊所打開的頁面。

屬性說明：

屬性	類型	是否必填	描述
current	Number	是	當前激活的模式，list節點的索引值
list	Array	是	啓動模式列表

list說明：

屬性	類型	是否必填	描述
name	String	是	啓動模式名稱
path	String	是	啓動頁面路徑
query	String	否	啓動參數，可在頁面的 onLoad 函數裏得到

// pages.json
"condition":{ //模式配置，僅開發期間生效
    "current":"0", //當前激活的模式（list 的索引項）
    "list":[
        {
            "name":"詳情", //模式名稱
            "query":"id=80", //啓動頁面，必選
            "path":"pages/detail/detail" //啓動參數，在頁面的onLoad函數裏面獲得。
        }
    ]
}

數據及事件綁定

• 數據綁定：在頁面中須要定義數據，和Vue如出一轍，能夠直接在data中定義數據便可，再利用插值表達式渲染，在插值表達式中支持三元運算和一些基本運算

• 動態綁定屬性：同Vue，v-bind綁定，簡寫:

• 事件綁定及傳參：同Vue，v-on綁定，簡寫@

組件使用

uni-app提供了一系列基礎組件，相似HTML裏的基礎標籤元素。但uni-app的組件與HTML不一樣，而是與小程序相同，更適合手機端使用。

雖然不推薦使用HTML標籤，但實際上若是開發者寫了div等標籤，在編譯到非H5平臺時也會被編譯器轉換爲view標籤，相似的還有span轉text、a轉navigator等，包括css裏的元素選擇器也會轉。

• 全部組件與屬性名都是小寫，單詞之間以連字符-鏈接。

• 根節點爲 <template>，這個 <template> 下只能且必須有一個根<view>組件。這是vue單文件組件規範。

• 全部組件都有的屬性：id，class，style，hidden，data-*，@EventHandler

列舉幾個經常使用的，但不一樣於傳統html的組件，其他建議參考官網詳細文檔

1. view：視圖容器。相似於傳統html中的div，用於包裹各類元素內容。

2. text：文本組件。相似於傳統html中的span，用於包裹文本內容。

3. image：圖片。相似於傳統html中的span，用於顯示圖片元素。

uni-app中的樣式

• rpx 即響應式px，根據屏幕寬度自適應的單位，以750寬的屏幕爲基準。750rpx剛好爲屏幕寬度，屏幕變寬，rpx實際顯示效果會等比放大。
• 支持基本經常使用選擇器，class，id，element，但不能使用* 通配符選擇器
• page至關於body節點
• 定義在App.vue中的樣式爲全局樣式，做用於每個頁面，在pages目錄下的vue文件中定義的樣式爲局部樣式，只做用對應的頁面，並會覆蓋App.vue中相同的選擇器
• 一樣支持 Less 和 Scss，不過須要下載對應的插件
• 可經過@import導入外聯樣式表，並引用相對路徑，用;表示語句結束
• uni-app支持使用字體圖標，使用方法與普通web項目相同，但須要注意：
  • 字體文件小於40kb，uni-app會自動將其轉化爲base64格式，反之需開發者手動轉換，不然將不生效
  • 字體圖標的引用路徑推薦使用以~@開頭的絕對路徑

// App.vue 樣式部分
<style>
	/*每一個頁面公共css */
	@import url("./static/font/iconfont.css");
</style>

// iconfont.css
@font-face {font-family: "iconfont";
  src: url('~@/static/font/iconfont.eot'); 
}

條件註釋實現跨端兼容

跨端兼容

uni-app 已將經常使用的組件、JS API 封裝到框架中，開發者按照 uni-app 規範開發便可保證多平臺兼容，大部分業務都可直接知足。但每一個平臺有本身的一些特性，所以會存在一些沒法跨平臺的狀況。

• 大量寫 if else，會形成代碼執行性能低下和管理混亂。
• 編譯到不一樣的工程後二次修改，會讓後續升級變的很麻煩。

在 C 語言中，經過 #ifdef、#ifndef 的方式，爲 windows、mac 等不一樣 os 編譯不一樣的代碼。 uni-app 參考這個思路，爲 uni-app 提供了條件編譯手段，在一個工程裏優雅的完成了平臺個性化實現。

條件編譯

條件編譯是用特殊的註釋做爲標記，在編譯時根據這些特殊的註釋，將註釋裏面的代碼編譯到不一樣平臺。

支持的文件：·vue，.js，.css，pages.json，各預編譯語言文件，：.scss、.less、.stylus、.ts、.pug

注意：：條件編譯是利用註釋實現的，在不一樣語法裏註釋寫法不同

寫法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開頭，以 #endif 結尾。

• #ifdef：if defined 僅在某平臺存在
• #ifndef：if not defined 除了某平臺均存在
• %PLATFORM%：平臺名稱

條件編譯寫法	說明
#ifdef APP-PLUS 需條件編譯的代碼 #endif	僅出如今 App 平臺下的代碼
#ifndef H5 需條件編譯的代碼 #endif	除了 H5 平臺，其它平臺均存在的代碼
#ifdef H5 || MP-WEIXIN 需條件編譯的代碼 #endif	在 H5 平臺或微信小程序平臺存在的代碼（這裏只有||，不可能出現&&，由於沒有交集）

%PLATFORM% 可取值以下：所有取值可參考官方文檔

值	平臺
APP-PLUS	App
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付寶小程序

<template>
	<view>
		<!-- #ifdef H5 -->
		<view>僅展現在H5中 </view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view>僅展現在微信小程序中</view>
		<!-- #endif -->
		<text>{{msg}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg: 'hello,'
			}
		},
		onLoad() {
			// #ifdef H5
			this.msg += 'H5'
			// #endif
			// #ifdef MP-WEIXIN
			this.msg += '微信小程序'
			//  #endif
		}
	}
</script>

<style>
	/* 第一種寫法，針對樣式作註釋 */
	text {
		/* #ifdef H5 */
		color: #8470FF;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		color: #8DEEEE;
		/* #endif */
	}
	
	/* 第二種寫法，針對選擇器作註釋 */
	/* #ifdef MP-WEIXIN */
	text {
		color: #8DEEEE;
	}
	/* #endif */
</style>