碼文不易啊，轉載請帶上本文鏈接呀，感謝感謝 https://www.cnblogs.com/echoyya/p/14427845.html
環境搭建
官網文檔解釋：uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS、Android、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平台。
需要下載開發工具：HBuilderX是通用的前端開發工具，但為uni-app做了特別強化。下載App開發版，可開箱即用；
創建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 |
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的組件，其余建議參考官網詳細文檔
-
view：視圖容器。類似於傳統html中的div，用於包裹各種元素內容。
-
text：文本組件。類似於傳統html中的span，用於包裹文本內容。
-
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>