轉(zhuǎn)載于： http://www.reibang.com/p/132a3de98238?
uni-app跨平臺框架官方教程
鏈接：https://ke.qq.com/course/343370
一、框架簡介基礎(chǔ)知識點
uniapp生命周期
onLaunch 當(dāng)uniapp初始化完成時進(jìn)行觸發(fā)，全局只觸發(fā)一次
onShow? 當(dāng)uniapp啟動或者從后臺進(jìn)入前臺顯示
onHide? 當(dāng)uniapp從前臺進(jìn)入后臺
onUniNViewMessage? 對nvue頁面發(fā)送數(shù)據(jù)進(jìn)行監(jiān)聽
uniapp頁面生命周期
https://uniapp.dcloud.io/frame
參看文檔
路由
uni-app有兩種路由跳轉(zhuǎn)方式：使用navigator組件跳轉(zhuǎn)、調(diào)用API跳轉(zhuǎn)。
1.打開新頁面结笨，頁面重定向===》 調(diào)用 API? uni.navigateTo? 、使用組件?
2.頁面返回? 調(diào)用 APIuni.navigateBack、使用組件<navigator open-type="navigateBack"/>气忠、用戶按左上角返回按鈕邻储、安卓用戶點擊物理back按鍵
3.Tab 切換? ? 調(diào)用 APIuni.switchTab、使用組件<navigator open-type="switchTab"/>旧噪、用戶切換 Tab
4.重加載? 調(diào)用 APIuni.reLaunch吨娜、使用組件<navigator open-type="reLaunch"/>
Tips：
navigateTo,redirectTo只能打開非 tabBar 頁面。
switchTab只能打開tabBar頁面舌菜。
reLaunch可以打開任意頁面萌壳。
頁面底部的tabBar由頁面決定，即只要是定義為tabBar的頁面日月，底部都有tabBar袱瓮。
不能在App.vue里面進(jìn)行頁面跳轉(zhuǎn)。
頁面樣式與布局
uni-app支持的通用css單位包括px爱咬、upx尺借、vh。
upx 是相對于基準(zhǔn)寬度的單位精拟，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)燎斩。uni-app 規(guī)定屏幕基準(zhǔn)寬度750upx。
因為upx是編譯器處理的蜂绎，動態(tài)綁定upx不生效
可使用 uni.upx2px(Number) 轉(zhuǎn)換為 px 后再賦值栅表。
例如
returnuni.upx2px(750/2)+'px';
使用@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑师枣，用;表示語句結(jié)束怪瓶。
@import"../../common/uni.css";
1.style：靜態(tài)的樣式統(tǒng)一寫到 class 中。
<view:style="{color:color}"/>
class：用于指定樣式規(guī)則践美，其屬性值是樣式規(guī)則中類選擇器名(樣式類名)的集合洗贰，樣式類名不需要帶上.，樣式類名之間用空格分隔陨倡。
<viewclass="normal_view"/>
1? ? .class
2? ? #id
3? ? element? 選擇所有 view 組件
定義在 App.vue 中的樣式為全局樣式敛滋，作用于每一個頁面。在 pages 目錄下 的 vue 文件中定義的樣式為局部樣式兴革，只作用在對應(yīng)的頁面绎晃，并會覆蓋 App.vue 中相同的選擇器。
注意： App.vue 中通過 @import 語句可以導(dǎo)入外聯(lián)樣式杂曲，一樣作用于每一個頁面箕昭。
CSS變量描述5+App小程序H5
--status-bar-height系統(tǒng)狀態(tài)欄高度系統(tǒng)狀態(tài)欄高度25px0
--window-top內(nèi)容區(qū)域距離頂部的距離00NavigationBar 的高度
--window-bottom內(nèi)容區(qū)域距離底部的距離00TabBar 的高度
uni-app中以下組件的高度是固定的，不可修改：
組件描述5+AppH5
NavigationBar導(dǎo)航欄44px44px
TabBar底部選項卡56px50px
為支持跨平臺解阅，框架建議使用Flex布局
uni-app支持使用在 css 里設(shè)置背景圖片落竹，使用方式與普通web項目相同，需要注意以下幾點：
支持 base64 格式圖片货抄。
支持網(wǎng)絡(luò)路徑圖片述召。
使用本地路徑背景圖片需注意：
圖片小于 40kb朱转，uni-app會自動將其轉(zhuǎn)化為 base64 格式；
圖片大于等于 40kb积暖， 需開發(fā)者自己將其轉(zhuǎn)換為base64格式使用藤为，或?qū)⑵渑驳椒?wù)器上，從網(wǎng)絡(luò)地址引用夺刑。
本地背景圖片的引用路徑僅支持以 ~@ 開頭的絕對路徑（不支持相對路徑）缅疟。
.test2{background-image:url('~@/static/logo.png');}
uni-app支持使用字體圖標(biāo)，使用方式與普通web項目相同遍愿，需要注意以下幾點：
支持 base64 格式字體圖標(biāo)存淫。
支持網(wǎng)絡(luò)路徑字體圖標(biāo)。
網(wǎng)絡(luò)路徑必須加協(xié)議頭https沼填。
從http://www.iconfont.cn上拷貝的代碼桅咆，默認(rèn)是沒加協(xié)議頭的。
uni-app本地路徑圖標(biāo)字體支持情況：
字體文件小于 40kb坞笙，uni-app會自動將其轉(zhuǎn)化為 base64 格式岩饼；
字體文件大于等于 40kb， 需開發(fā)者自己轉(zhuǎn)換薛夜，否則使用將不生效籍茧；
字體文件的引用路徑僅支持以 ~@ 開頭的絕對路徑（不支持相對路徑）。
@font-face{font-family:test1-icon;src:url('~@/static/iconfont.ttf');}
uni-app支持在 template 模板中嵌套<template/>和<block/>梯澜，用來進(jìn)行列表渲染和條件渲染寞冯。
<template/>和<block/>并不是一個組件，它們僅僅是一個包裝元素腊徙，不會在頁面中做任何渲染简十，只接受控制屬性檬某。
代碼示例
<template><view><templatev-if="test"><view>test 為 true 時顯示</view></template><templatev-else><view>test 為 false 時顯示</view></template></view></template>
<template><view><blockv-for="(item,index) in list":key="index"><view>{{item}} - {{index}}</view></block></view></template>
uni-app 在支持絕大部分 ES6 API 的同時撬腾，也支持了 ES7 的 await/async。
uni-app支持使用npm安裝第三方包恢恼。
在 uni-app 中使用 ts 開發(fā)
uni-app支持在 5+App 和小程序中使用小程序組件民傻。
平臺差異說明
平臺支持情況小程序組件存放目錄
H5不支持
5+App支持微信小程序組件wxcomponents
微信小程序支持微信小程序組件wxcomponents
支付寶小程序支持支付寶小程序組件mycomponents
百度小程序支持百度小程序組件swancomponents
二、vue使用注意事項
uni-app 在發(fā)布到H5時支持所有vue的語法场斑；發(fā)布到App和小程序時漓踢，由于平臺限制，無法實現(xiàn)全部vue語法漏隐，但uni-app仍是是對vue語法支持度最高的跨端框架喧半。本文將詳細(xì)講解差異。
uni-app完整支持Vue實例的生命周期青责，同時還新增應(yīng)用生命周期及頁面生命周期挺据。
詳見Vue官方文檔：生命周期鉤子取具。
注意
不要在選項屬性或回調(diào)上使用箭頭函數(shù)，比如created: () => console.log(this.a)或vm.$watch('a', newValue => this.myMethod())扁耐。因為箭頭函數(shù)是和父級上下文綁定在一起的暇检，this不會是如你做預(yù)期的Vue實例，且this.a或this.myMethod也會是未定義的婉称。
建議使用uni-app的onReady代替vue的mounted块仆。
建議使用uni-app的onLoad代替vue的created。
uni-app完整支持Vue模板語法王暗。
詳見Vue官方文檔：模板語法悔据。
注意如果使用老版的非自定義組件模式，即manifest中"usingComponents":false瘫筐，部分模版語法不支持蜜暑，但此模式已不再推薦使用，詳見策肝。
老版非自定義組件模式不支持情況：
不支持純 HTML
不支持部分復(fù)雜的 JavaScript 渲染表達(dá)式
不支持過濾器
data必須聲明為返回一個初始數(shù)據(jù)對象的函數(shù)肛捍；否則頁面關(guān)閉時，數(shù)據(jù)不會自動銷毀之众，再次打開該頁面時拙毫，會顯示上次數(shù)據(jù)。
//正確用法棺禾，使用函數(shù)返回對象data(){return{title:'Hello'}}//錯誤寫法缀蹄，會導(dǎo)致再次打開頁面時，顯示上次數(shù)據(jù)data:{title:'Hello'}
實現(xiàn)全局變量的方式需要遵循 Vue 單文件模式的開發(fā)規(guī)范膘婶。詳細(xì)參考：uni-app全局變量的幾種實現(xiàn)方式
lass 支持的語法:
<view:class="{ active: isActive }">111</view><viewclass="static"v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view><viewclass="static":class="[activeClass, errorClass]">333</view><viewclass="static"v-bind:class="[isActive ? activeClass : '', errorClass]">444</view><viewclass="static"v-bind:class="[{ active: isActive }, errorClass]">555</view>
style 支持的語法:
<viewv-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view><viewv-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=""這樣的方式設(shè)置px像素值，其值為實際像素悬襟，不會被編譯器轉(zhuǎn)換衅码。
此外還可以用computed方法生成class或者style字符串，插入到頁面中脊岳，舉例說明：
<template><!-- 支持 --><viewclass="container":class="computedClassStr"></view><viewclass="container":class="{active: isActive}"></view><!-- 不支持 --><viewclass="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官方文檔：列表渲染
如果列表中項目的位置會動態(tài)改變或者有新的項目添加到列表中，并且希望列表中的項目保持自己的特征和狀態(tài)（如<input>中的輸入內(nèi)容割捅，<switch>的選中狀態(tài)）奶躯，需要使用:key來指定列表中項目的唯一的標(biāo)識符。
:key的值以兩種形式提供
使用v-for循環(huán)array中item的某個property亿驾，該property的值需要是列表中唯一的字符串或數(shù)字嘹黔，且不能動態(tài)改變。
使用v-for循環(huán)中item本身莫瞬，這時需要item本身是一個唯一的字符串或者數(shù)字
當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時候儡蔓，會校正帶有key的組件醉锄，框架會確保他們被重新排序，而不是重新創(chuàng)建浙值，以確保使組件保持自身的狀態(tài)恳不，并且提高列表渲染時的效率。
如不提供:key开呐，會報一個warning烟勋， 如果明確知道該列表是靜態(tài)，或者不必關(guān)注其順序筐付，可以選擇忽略卵惦。
注意：
事件映射表中沒有的原生事件也可以使用，例如map組件的regionchange 事件直接在組件上寫成 @regionchange,同時這個事件也非常特殊瓦戚，它的 event type 有 begin 和 end 兩個沮尿，導(dǎo)致我們無法在handleProxy 中區(qū)分到底是什么事件，所以你在監(jiān)聽此類事件的時候同時監(jiān)聽事件名和事件類型既? 较解。
為兼容各端畜疾，事件需使用 v-on 或 @ 的方式綁定，請勿使用小程序端的bind 和 catch 進(jìn)行事件綁定印衔。
事件修飾符
.stop：各平臺均支持啡捶， 使用時會阻止事件冒泡，在非 H5 端同時也會阻止事件的默認(rèn)行為
.prevent 僅在 H5 平臺支持
.self：僅在 H5 平臺支持
.once：僅在 H5 平臺支持
.capture：僅在 H5 平臺支持
.passive：僅在 H5 平臺支持
若需要禁止蒙版下的頁面滾動奸焙，可使用 @touchmove.stop.prevent="moveHandle"瞎暑，moveHandle 可以用來處理 touchmove 的事件，也可以是一個空函數(shù)与帆。
按鍵修飾符：uni-app運行在手機(jī)端了赌，沒有鍵盤事件，所以不支持按鍵修飾符玄糟。
支持Vue官方文檔：表單控件綁定勿她。
建議開發(fā)過程中直接使用uni-app：表單組件。
組件是整個Vue.js中最復(fù)雜的部分茶凳，支持Vue官方文檔：組件嫂拴。
有且只能使用單文件組件（.vue 組件）的形式進(jìn)行支持播揪。其他的諸如：動態(tài)組件贮喧，自定義render，和<script type="text/x-template">字符串模版等非H5端都不支持猪狈。
uni-app提供了豐富的UI組件箱沦，比如：picker,map等，需要注意的是原生組件上的事件綁定雇庙，需要以vue的事件綁定語法來綁定谓形，如bindchange="eventName"事件灶伊，需要寫成@change="eventName"
示例
<pickermode="date":value="date"start="2015-09-01"end="2017-09-01"@change="bindDateChange"><viewclass="picker">當(dāng)前選擇: {{date}}</view></picker>
uni-app支持配置全局組件，需在main.js里進(jìn)行全局注冊寒跳，注冊后就可在所有頁面里使用該組件聘萨。
注意：Vue.component的第一個參數(shù)必須是靜態(tài)的字符串。
示例
main.js 里進(jìn)行全局注冊
importVuefrom'vue'importpageHeadfrom'./components/page-head.vue'Vue.component('page-head',pageHead)
index.vue 里可直接使用組件
<template><view><page-head></page-head></view></template>
如何獲取上個頁面?zhèn)鬟f的數(shù)據(jù)
如何設(shè)置全局的數(shù)據(jù)和全局的方法
如何捕獲 app 的 onError
組件屬性設(shè)置不生效解決辦法
條件編譯是里用特殊的注釋作為標(biāo)記童太，在編譯時根據(jù)這些特殊的注釋米辐，將注釋里面的代碼編譯到不同平臺。
寫法：以 #ifdef 或 #ifndef 加** %PLATFORM%** 開頭书释，以 #endif 結(jié)尾翘贮。
// #ifdef? %PLATFORM%平臺特有的API實現(xiàn)// #endif
為提升開發(fā)效率，HBuilderX將 uni-app 常用代碼封裝成了以 u 開頭的代碼塊爆惧，如在 template 標(biāo)簽內(nèi)輸入 ulist 回車狸页，會自動生成如下代碼：
<viewclass="uni-list"><viewclass="uni-list-cell"><viewclass="uni-list-cell-navigate uni-navigate-right"v-for="(item,index) in list":key="index">{{item.value}}</view></view></view>
代碼塊分為Tag代碼塊、JS代碼塊扯再，如在 script 標(biāo)簽內(nèi)輸入 uShowToast 回車芍耘，會自動生成如下代碼：
uni.showToast({title:'',mask:falseduration:1500});
uni-app已支持代碼塊見下方列表。
Tag代碼塊
uButtonuCheckboxuGriduListuListMediauRadiouSwiper
JS代碼塊
uRequestuGetLocationuShowToastuShowLoadinguHideLoadinguShowModaluShowActionSheetuNavigateTouNavigateBackuRedirectTouStartPullDownRefreshuStopPullDownRefreshuLoginuShareuPay
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 導(dǎo)航欄開發(fā)指南：https://ask.dcloud.net.cn/article/34921
uni-app 實現(xiàn)全局變量：https://ask.dcloud.net.cn/article/35021
微信小程序轉(zhuǎn)換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各環(huán)節(jié)（HBuilderX、cli复濒、自定義基座脖卖、本地sdk、云打包引擎）版本兼容性說明：https://ask.dcloud.net.cn/article/35845
uni-app 中選擇和上傳非圖像巧颈、視頻文件：https://ask.dcloud.net.cn/article/35547
=============================================
模版語法和數(shù)據(jù)綁定
實例
1.請求數(shù)據(jù)畦木，把數(shù)據(jù)data存儲入news數(shù)組，頁面模版自動刷新列表
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嚴(yán)格模式可以跳轉(zhuǎn)自定義頁面測試
"condition":{//模式配置十籍，僅開發(fā)期間生效"current":0,//當(dāng)前激活的模式（list 的索引項）"list":[{"name":"news",//模式名稱"path":"pages/info/info",//啟動頁面，必選"query":"newsid=5196737"http://啟動參數(shù)唇礁，在頁面的onLoad函數(shù)里面得到勾栗。}]}
鏈接：http://www.reibang.com/p/132a3de98238
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)盏筐，非商業(yè)轉(zhuǎn)載請注明出處围俘。
