鏈接：https://ke.qq.com/course/343370
一、框架簡介基礎知識點
uniapp生命周期
onLaunch 當uniapp初始化完成時進行觸發，全局只觸發一次
onShow 當uniapp啟動或者從后台進入前台顯示
onHide 當uniapp從前台進入后台
onUniNViewMessage 對nvue頁面發送數據進行監聽
uniapp頁面生命周期
https://uniapp.dcloud.io/frame
參看文檔
路由
uni-app 有兩種路由跳轉方式：使用navigator組件跳轉、調用API跳轉。
1.打開新頁面，頁面重定向===》 調用 API uni.navigateTo 、使用組件 <navigator open-type="navigateTo"/>
2.頁面返回 調用 API uni.navigateBack 、使用組件 <navigator open-type="navigateBack"/> 、用戶按左上角返回按鈕、安卓用戶點擊物理back按鍵
3.Tab 切換 調用 API uni.switchTab 、使用組件 <navigator open-type="switchTab"/> 、用戶切換 Tab
4.重加載 調用 API uni.reLaunch 、使用組件 <navigator open-type="reLaunch"/>
Tips：
-
navigateTo,redirectTo只能打開非 tabBar 頁面。 -
switchTab只能打開tabBar頁面。 -
reLaunch可以打開任意頁面。 - 頁面底部的
tabBar由頁面決定，即只要是定義為tabBar的頁面，底部都有tabBar。 - 不能在
App.vue里面進行頁面跳轉。
頁面樣式與布局
uni-app支持的通用css單位包括px、upx、vh。
upx 是相對於基准寬度的單位，可以根據屏幕寬度進行自適應。uni-app 規定屏幕基准寬度750upx。
upx2px
因為upx是編譯器處理的，動態綁定upx不生效
可使用 uni.upx2px(Number) 轉換為 px 后再賦值。
例如
return uni.upx2px(750 / 2) + 'px'; 樣式導入
使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。
@import "../../common/uni.css"; 內聯樣式
1.style：靜態的樣式統一寫到 class 中。
<view :style="{color:color}" /> - class：用於指定樣式規則，其屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。
<view class="normal_view" /> 選擇器
1 .class
2 #id
3 element 選擇所有 view 組件
全局樣式與局部樣式
定義在 App.vue 中的樣式為全局樣式，作用於每一個頁面。在 pages 目錄下 的 vue 文件中定義的樣式為局部樣式，只作用在對應的頁面，並會覆蓋 App.vue 中相同的選擇器。
注意： App.vue 中通過 @import 語句可以導入外聯樣式，一樣作用於每一個頁面。
CSS變量
| CSS變量 | 描述 | 5+App | 小程序 | H5 |
|---|---|---|---|---|
| --status-bar-height | 系統狀態欄高度 | 系統狀態欄高度 | 25px | 0 |
| --window-top | 內容區域距離頂部的距離 | 0 | 0 | NavigationBar 的高度 |
| --window-bottom | 內容區域距離底部的距離 | 0 | 0 | TabBar 的高度 |
固定值
uni-app 中以下組件的高度是固定的，不可修改：
| 組件 | 描述 | 5+App | H5 |
|---|---|---|---|
| NavigationBar | 導航欄 | 44px | 44px |
| TabBar | 底部選項卡 | 56px | 50px |
Flex布局
為支持跨平台，框架建議使用Flex布局
背景圖片
uni-app 支持使用在 css 里設置背景圖片，使用方式與普通 web 項目相同，需要注意以下幾點：
- 支持 base64 格式圖片。
- 支持網絡路徑圖片。
- 使用本地路徑背景圖片需注意：
-
圖片小於 40kb，
uni-app會自動將其轉化為 base64 格式； -
圖片大於等於 40kb， 需開發者自己將其轉換為base64格式使用，或將其挪到服務器上，從網絡地址引用。
-
本地背景圖片的引用路徑僅支持以 ~@ 開頭的絕對路徑（不支持相對路徑）。
.test2 { background-image: url('~@/static/logo.png'); }
-
字體圖標
uni-app 支持使用字體圖標，使用方式與普通 web 項目相同，需要注意以下幾點：
- 支持 base64 格式字體圖標。
- 支持網絡路徑字體圖標。
- 網絡路徑必須加協議頭
https。 - 從 http://www.iconfont.cn 上拷貝的代碼，默認是沒加協議頭的。
uni-app本地路徑圖標字體支持情況：-
字體文件小於 40kb，
uni-app會自動將其轉化為 base64 格式； -
字體文件大於等於 40kb， 需開發者自己轉換，否則使用將不生效；
-
字體文件的引用路徑僅支持以 ~@ 開頭的絕對路徑（不支持相對路徑）。
@font-face { font-family: test1-icon; src: url('~@/static/iconfont.ttf'); }
-
<template/>和 <block/>
uni-app 支持在 template 模板中嵌套 <template/> 和 <block/>，用來進行 列表渲染 和 條件渲染。
<template/> 和 <block/> 並不是一個組件，它們僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。
代碼示例
<template> <view> <template v-if="test"> <view>test 為 true 時顯示</view> </template> <template v-else> <view>test 為 false 時顯示</view> </template> </view> </template> <template> <view> <block v-for="(item,index) in list" :key="index"> <view>{{item}} - {{index}}</view> </block> </view> </template> ES6 支持
uni-app 在支持絕大部分 ES6 API 的同時，也支持了 ES7 的 await/async。
NPM支持
uni-app支持使用npm安裝第三方包。
TypeScript 支持
在 uni-app 中使用 ts 開發
小程序組件支持
uni-app 支持在 5+App 和小程序中使用小程序組件。
平台差異說明
| 平台 | 支持情況 | 小程序組件存放目錄 |
|---|---|---|
| H5 | 不支持 | |
| 5+App | 支持微信小程序組件 | wxcomponents |
| 微信小程序 | 支持微信小程序組件 | wxcomponents |
| 支付寶小程序 | 支持支付寶小程序組件 | mycomponents |
| 百度小程序 | 支持百度小程序組件 | swancomponents |
二、vue使用注意事項
uni-app 在發布到H5時支持所有vue的語法；發布到App和小程序時，由於平台限制，無法實現全部vue語法，但uni-app仍是是對vue語法支持度最高的跨端框架。本文將詳細講解差異。
生命周期
uni-app 完整支持 Vue 實例的生命周期，同時還新增 應用生命周期 及 頁面生命周期。
詳見Vue官方文檔：生命周期鈎子。
注意
- 不要在選項屬性或回調上使用箭頭函數，比如
created: () => console.log(this.a)或vm.$watch('a', newValue => this.myMethod())。因為箭頭函數是和父級上下文綁定在一起的，this不會是如你做預期的Vue實例，且this.a或this.myMethod也會是未定義的。 - 建議使用
uni-app的onReady代替vue的mounted。 - 建議使用
uni-app的onLoad代替vue的created。
模板語法
uni-app 完整支持 Vue 模板語法。
詳見Vue官方文檔：模板語法。
注意 如果使用老版的非自定義組件模式，即manifest中"usingComponents":false，部分模版語法不支持，但此模式已不再推薦使用，詳見。
老版非自定義組件模式不支持情況：
- 不支持純 HTML
- 不支持部分復雜的 JavaScript 渲染表達式
- 不支持過濾器
data 屬性
data 必須聲明為返回一個初始數據對象的函數；否則頁面關閉時，數據不會自動銷毀，再次打開該頁面時，會顯示上次數據。
//正確用法，使用函數返回對象 data() { return { title: 'Hello' } } //錯誤寫法，會導致再次打開頁面時，顯示上次數據 data: { title: 'Hello' } 全局變量
實現全局變量的方式需要遵循 Vue 單文件模式的開發規范。詳細參考：uni-app全局變量的幾種實現方式
lass 支持的語法:
<view :class="{ active: isActive }">111</view> <view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view> <view class="static" :class="[activeClass, errorClass]">333</view> <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view> <view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view> style 支持的語法:
<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view> <view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view> 非H5端不支持 Vue官方文檔：Class 與 Style 綁定 中的 classObject 和 styleObject 語法。
不支持示例：
<template> <view :class="[activeClass]" :style="[baseStyles,overridingStyles]"></view> </template> <script> export default { data() { return { activeClass: { 'active': true, 'text-danger': false }, baseStyles: { color: 'green', fontSize: '30px' }, overridingStyles: { 'font-weight': 'bold' } } } } </script> 注意：以:style=""這樣的方式設置px像素值，其值為實際像素，不會被編譯器轉換。
此外還可以用 computed 方法生成 class 或者 style 字符串，插入到頁面中，舉例說明：
<template> <!-- 支持 --> <view class="container" :class="computedClassStr"></view> <view class="container" :class="{active: isActive}"></view> <!-- 不支持 --> <view class="container" :class="computedClassObject"></view> </template> <script> export default { data () { return { isActive: true } }, computed: { computedClassStr () { return this.isActive ? 'active' : '' }, computedClassObject () { return { active: this.isActive } } } } </script> 用在組件上
非H5端暫不支持在自定義組件上使用 Class 與 Style 綁定
計算屬性
完整支持 Vue官方文檔：計算屬性。
條件渲染
完整支持 Vue官方文檔：條件渲染
列表渲染
完整vue列表渲染 Vue官方文檔：列表渲染
key
如果列表中項目的位置會動態改變或者有新的項目添加到列表中，並且希望列表中的項目保持自己的特征和狀態（如 <input> 中的輸入內容，<switch> 的選中狀態），需要使用 :key 來指定列表中項目的唯一的標識符。
:key 的值以兩種形式提供
- 使用
v-for循環array中item的某個property，該property的值需要是列表中唯一的字符串或數字，且不能動態改變。 - 使用
v-for循環中item本身，這時需要item本身是一個唯一的字符串或者數字
當數據改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，並且提高列表渲染時的效率。
如不提供 :key，會報一個 warning， 如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。
注意：
事件映射表中沒有的原生事件也可以使用，例如map組件的regionchange 事件直接在組件上寫成 @regionchange,同時這個事件也非常特殊，它的 event type 有 begin 和 end 兩個，導致我們無法在handleProxy 中區分到底是什么事件，所以你在監聽此類事件的時候同時監聽事件名和事件類型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>。
為兼容各端，事件需使用 v-on 或 @ 的方式綁定，請勿使用小程序端的bind 和 catch 進行事件綁定。
事件修飾符
.stop：各平台均支持， 使用時會阻止事件冒泡，在非 H5 端同時也會阻止事件的默認行為
.prevent 僅在 H5 平台支持
.self：僅在 H5 平台支持
.once：僅在 H5 平台支持
.capture：僅在 H5 平台支持
.passive：僅在 H5 平台支持
若需要禁止蒙版下的頁面滾動，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用來處理 touchmove 的事件，也可以是一個空函數。
<view class="mask" @touchmove.stop.prevent="moveHandle"></view>
按鍵修飾符：uni-app運行在手機端，沒有鍵盤事件，所以不支持按鍵修飾符。
表單控件綁定
支持 Vue官方文檔：表單控件綁定。
建議開發過程中直接使用 uni-app：表單組件。
組件
Vue 組件
組件是整個 Vue.js 中最復雜的部分，支持 Vue官方文檔：組件 。
有且只能使用單文件組件（.vue 組件）的形式進行支持。其他的諸如：動態組件，自定義 render，和<script type="text/x-template"> 字符串模版等非H5端都不支持。
uni-app組件
uni-app 提供了豐富的UI組件，比如： picker,map 等，需要注意的是原生組件上的事件綁定，需要以 vue 的事件綁定語法來綁定，如 bindchange="eventName" 事件，需要寫成 @change="eventName"
示例
<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange"> <view class="picker"> 當前選擇: {{date}} </view> </picker> 全局組件
uni-app 支持配置全局組件，需在 main.js 里進行全局注冊，注冊后就可在所有頁面里使用該組件。
注意：Vue.component 的第一個參數必須是靜態的字符串。
示例
main.js 里進行全局注冊
import Vue from 'vue' import pageHead from './components/page-head.vue' Vue.component('page-head',pageHead) index.vue 里可直接使用組件
<template> <view> <page-head></page-head> </view> </template> 常見問題
- 如何獲取上個頁面傳遞的數據
- 如何設置全局的數據和全局的方法
- 如何捕獲 app 的 onError
- 組件屬性設置不生效解決辦法
使用nvue Weex注意事項
使用HTML5+注意事項
條件編譯
條件編譯是里用特殊的注釋作為標記，在編譯時根據這些特殊的注釋，將注釋里面的代碼編譯到不同平台。
寫法：以 #ifdef 或 #ifndef 加** %PLATFORM%** 開頭，以 #endif 結尾。
API 的條件編譯
// #ifdef %PLATFORM%
平台特有的API實現
// #endif
組件的條件編譯
pages.json 的條件編譯
static 目錄的條件編譯
+性能優化建議
+uni-app跨端開發注意事項
+高效開發技巧
- 使用代碼塊直接創建組件模板
為提升開發效率，HBuilderX將 uni-app 常用代碼封裝成了以 u 開頭的代碼塊，如在 template 標簽內輸入 ulist 回車，會自動生成如下代碼：
<view class="uni-list"> <view class="uni-list-cell"> <view class="uni-list-cell-navigate uni-navigate-right" v-for="(item,index) in list" :key="index"> {{item.value}} </view> </view> </view> 代碼塊分為Tag代碼塊、JS代碼塊，如在 script 標簽內輸入 uShowToast 回車，會自動生成如下代碼：
uni.showToast({ title: '', mask: false duration: 1500 }); uni-app已支持代碼塊見下方列表。
Tag代碼塊
uButton
uCheckbox
uGrid
uList
uListMedia
uRadio
uSwiper
JS代碼塊
uRequest
uGetLocation
uShowToast
uShowLoading
uHideLoading
uShowModal
uShowActionSheet
uNavigateTo
uNavigateBack
uRedirectTo
uStartPullDownRefresh
uStopPullDownRefresh
uLogin
uShare
uPay
- 使用 Chrome 調試
- 使用各家小程序開發工具調試
- 關於 App 的調試
+常見問題
uni-app 中可使用的 UI 框架：http://ask.dcloud.net.cn/article/35489
uni-app App整包升級檢測： https://ask.dcloud.net.cn/article/34972
uni-app 資源熱更新： https://ask.dcloud.net.cn/article/35667
uni-app 導航欄開發指南： https://ask.dcloud.net.cn/article/34921
uni-app 實現全局變量： https://ask.dcloud.net.cn/article/35021
微信小程序轉換uni-app指南：https://ask.dcloud.net.cn/article/35786
mpvue 項目（組件）遷移指南、示例及資源匯總： https://ask.dcloud.net.cn/article/34945
uni-app 引用 npm 第三方庫： https://ask.dcloud.net.cn/article/19727
uni-app 中使用微信小程序第三方 SDK 及資源匯總：https://ask.dcloud.net.cn/article/35070
uni-app 中使用 5+ 的原生界面控件（包括map、video、livepusher、barcode、nview）：https://ask.dcloud.net.cn/article/35036
uni-app 的 H5 版使用注意事項：https://ask.dcloud.net.cn/article/35232
uni-app各環節（HBuilderX、cli、自定義基座、本地sdk、雲打包引擎）版本兼容性說明：https://ask.dcloud.net.cn/article/35845
uni-app 中選擇和上傳非圖像、視頻文件：https://ask.dcloud.net.cn/article/35547
=============================================
模版語法和數據綁定
實例
1.請求數據，把數據data存儲入news數組，頁面模版自動刷新列表
uni.request({ url: 'https://unidemo.dcloud.net.cn/api/news', method: 'GET', data: {}, success: res => { console.log(res); this.news = res.data; }, fail: () => {}, complete: () => {} }); 2.點擊傳入文章id，通過uni.navigateTo url+id 打開文章頁
@tap="tapnews" :data-newsid="item.post_id" tapnews(e){ console.log(e); var newsids= e.currentTarget.dataset.newsid; console.log(newsids); uni.navigateTo({ url: '../info/info?newsid='+ newsids }); } 3.顯示文章頁面
uni.request({ url: 'https://unidemo.dcloud.net.cn/api/news/36kr/'+ e.newsid, method: 'GET', data: {}, success: res => { this.title = res.data.title; this.strings = res.data.content; console.log(strings); uni.hideLoading(); }, fail: () => {}, complete: () => {} }); 4. 根目錄的pages.json嚴格模式可以跳轉自定義頁面測試
"condition": { //模式配置，僅開發期間生效 "current": 0, //當前激活的模式（list 的索引項） "list": [{ "name": "news", //模式名稱 "path": "pages/info/info", //啟動頁面，必選 "query": "newsid=5196737" //啟動參數，在頁面的onLoad函數里面得到。 } ] }
作者：Neyo_涼
鏈接：https://www.jianshu.com/p/132a3de98238