uni-app介紹

環境

使用VUE語法，參考微信小程序標籤和API，借鑑了美團點評mpvue、網易考拉Megalo；內置了vuex；

創建：vue create -p dcloudio/uni-preset-vue my-project
本地服務器：npm run serve
運行：npm run dev:<h5/mp-alipay/mp-baidu/mp-weixin/mp-toutiao>，除了H5在緩存中，其他在/dist/dev目錄下
發佈：npm run build:<h5/mp-alipay/mp-baidu/mp-weixin/mp-toutiao>，在/dist/build/目錄下

cli和HBuilderX的差異：cli創建後編譯器在項目下，內置d.ts，但是發佈APP時，任然需要HBuilderx(只需要下載標準版)；
目錄結構：靜態資源只能放在static文件夾(內部es6 js/less/sass文件不會被編譯，放新建common文件夾下)，manifest.json配置應用打包信息，pages.json配置頁面路由信息，不支持vue-router；
uni-app插件市場獲取插件和npm包；

生命週期（事件）

• 應用生命週期：僅可在app.vue中監聽有效
  1. onLaunch：初始化(全局只觸發一次) ，例如重定向頁面跳轉功能
  2. onShow：啓動，或後臺進入前臺
  3. onHide：前臺進入後臺
  4. onUniNViewMessage：頁面數據監聽
• 頁面生命週期
  1. onLoad：頁面加載，上個頁面傳參
  2. onShow：頁面顯示
  3. onReady：初次渲染
  4. onHide：頁面隱藏
  5. onUnload：頁面卸載
  6. onResize：窗口尺寸變化
  7. onPullDownRefresh：下拉(例如下拉刷新)
  8. onReachBottom：頁面上拉觸底
  9. onTabltemTap：點擊TAB觸發，參數：index：被點擊的序號；pagePath：被點擊的頁面路徑；text：被點擊的內部文字
  10. onShareAppMessage：點擊分享
  11. onPageScroll：頁面滾動，參數：scrollTop:垂直方向已滾動距離px；
  12. onNavigationBarButtonTap：‘原生標題欄按鈕’點擊事件，參數：index：下標
  13. onBackPress：頁面返回（回調判斷觸發來源）：參數：from：行爲來源=>“backbutton”左上角自帶返回鍵，“navigateBack”函數uni.navigateBack()
  14. onNavigationBarSearchInputChanged：‘原生標題欄搜索框’輸入變化事件
  15. onNavigationBarSearchInputConfirmed：‘原生標題欄搜索框’ 提交事件
  16. onNavigationBarSearchInputClicked：‘原生標題欄搜索框’ 點擊事件

APP端點擊Tabitem不跳轉頁面，不使用onTabitemTap，使用plus.nativeObj.view覆蓋點擊的Tabitem，攔截點擊事件；

路由

• navigator組件跳轉

	<navigator url="" redirect hover-class="">
		<button type=""></button>
	</navigator>

屬性：url不加.vue後綴；hover-class="none"沒有點擊效果；open-type跳轉方式（navigate：uni.navigateTo；redirect：uni.redirectTo；switchTab：uni.switchTab；reLaunch：uni.reLaunch；navigateBack：uni.navigateBack；）

• 調用API跳轉：
  uni.navigateTo({url:""})保留當前跳轉，可以使用uni.navigateBack返回；
  uni.redirectTo({url:""})關閉當前跳轉；
  uni.reLaunch({url:""})關閉所有跳轉；
  uni.switchTab({url:""})關閉非tabBar頁面跳轉到其他tabBar，且url不能傳參；
  uni.navigateBack()關閉當前返回上級頁面，默認1；

路由API頁面必須是pages.json註冊的vue頁面；
tabBar頁面必須是pages.json定義的頁面；
打開web-url需APP:plus.runtime.openURL或web-view組件,H5:window.open,小程序:web-view組件(且聯網白名單)；
url可傳參：path?key=value&key2=value2；
navigateTo, redirectTo 只能打開非 tabBar 頁面。
switchTab 只能打開 tabBar 頁面。
reLaunch 可以打開任意頁面。
頁面底部的 tabBar 由頁面決定，即只要是定義爲 tabBar 的頁面，底部都有 tabBar。
不能在 App.vue 裏面進行頁面跳轉。

窗口動畫
頁面棧

樣式與佈局

• 建議使用flex佈局；
• 支持px,vh,和upx（uni-app定義的動態單位：750寬爲基準）；
• H5支持rem，微信支持rpx；
• 動態綁定數據不支持直接使用upx；函數uni.upx2px(num)轉換爲px；
• import導入相對外聯樣式表，以;結尾；
• 內聯:style="{color:color}"一般用於動態綁定，靜態卸載class中；
• 樣式支持的選擇器：.class、#id、element、多選逗號隔開、(::after、:;before僅微信小程序和5+APP生效；不能使用*選擇器；page相當於body)；
• 定義在app.vue中全局；定義在子頁面爲局部，並覆蓋app.vue中的樣式；
• 內置CSS變量：--status-bar-height系統狀態欄、--window-top內容距離頂部距離、--window-bottom內容距離底部距離；例如：.bar{height:var(--status-bar-height;)}、.toTop:{bottom:calc(var(--window-bottom)+10px);}
• 內置組件高度固定：NavigateBar，TabBar；
• 背景圖支持base64轉碼（小於40kb）;本地不支持相對路徑，只支持~@開頭路徑；支持web-url；字體圖標web-url必須加https；
• <template></template>和<block></block>可以作爲包裝元素嵌套在vue的template裏，不渲染，只作爲條件控制的容器；

支持小程序自定義組件

基於vue的注意事項

• 選項屬性或回調上不使用箭頭函數；
• uni-app的onReady代替vue的mounted；
• uni-app的onLoad代替vue的created；
• data必須是返回對象函數，否則關閉頁面數據不會銷燬；
• 全局變量的實現；
• class屬性和style屬性支持的語法：靜態class=".."或動態:class="{active:...}"或:class="{active:...,'text-danger':...}"或簡寫:class="[...,...]"或混合寫法:class="[{active:...},...]"；只適合動態:style="{color:isColor,fontSize:itSize+'px'}"或:style="[{color:isColor,fontSize:itSize+'px'}]",其中不能用upx單位；或者編譯後傳入即可；
• click事件=>tap事件；使用VUE @綁定事件；
• 事件修飾符：.stop阻止事件冒泡(僅H5支持：.prevent、.self、.once、.capture、.passive)
• 禁止蒙版下的頁面滾動：@touchmove.stop.prevent="moveHandle"，moveHandle可以爲空函數或處理事件；
• 不支持按鍵修飾符；
• 表單組件：H5select標籤用picker代替；radio用radio-group代替
• 不支持v-html指令(H5不支持dom和普通html元素)；
• 有且只能使用單文件(.vue)組件；(組件是整個vue.js最複雜的部分)

條件編譯

借鑑C語言的#ifdef、#ifndef，以#ifdef或#ifndef加%platform%開頭，#endif結尾；(if defined僅在某平臺、if not defined除了某平臺)；例如：#ifdef H5 || MP-WEIXIN僅在H5或微信小程序平臺

平臺：APP-PLUS(html5+規範)、APP-PLUS-NVUE(weex規範)、H5、MP-WEIXIN、MP-ALIPAY、MP-BAIDU、MP-TOUTIAO、MP-QQ(僅cli支持)、MP

條件編譯通過註釋實現：JS//、CSS/* */、vue/nvue html<!-- -->、JSON//

static靜態目錄下分目保存，名稱爲平臺小寫，實現條件編譯；static根目錄下或其他文件夾通用；

Android和iOS平臺不支持條件編譯，uni.getSystemInfo需要自行編寫判斷；

跨端組件

優化建議：自定義組件模式；避免使用大圖，多尺寸適配；uni-app中data數據變化會驅動頁面重新渲染，其他數據可不寫在data裏；懶加載，分批加載；減少嵌套層；減少事件通信；降低動畫效果；全局樣式的使用減少樣式閃屏；使用nvue代替vue；

官方跨端開發注意事項

uni-app組件

擴展組件uni-ui

colorUI

使用Weex/nvue注意事項

使用html5+注意事項