環境
使用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中監聽有效
- onLaunch:初始化(全局只觸發一次) ,例如重定向頁面跳轉功能
- onShow:啓動,或後臺進入前臺
- onHide:前臺進入後臺
- onUniNViewMessage:頁面數據監聽
- 頁面生命週期
- onLoad:頁面加載,上個頁面傳參
- onShow:頁面顯示
- onReady:初次渲染
- onHide:頁面隱藏
- onUnload:頁面卸載
- onResize:窗口尺寸變化
- onPullDownRefresh:下拉(例如下拉刷新)
- onReachBottom:頁面上拉觸底
- onTabltemTap:點擊TAB觸發,參數:index:被點擊的序號;pagePath:被點擊的頁面路徑;text:被點擊的內部文字
- onShareAppMessage:點擊分享
- onPageScroll:頁面滾動,參數:scrollTop:垂直方向已滾動距離px;
- onNavigationBarButtonTap:‘原生標題欄按鈕’點擊事件,參數:index:下標
- onBackPress:頁面返回(回調判斷觸發來源):參數:from:行爲來源=>“backbutton”左上角自帶返回鍵,“navigateBack”函數uni.navigateBack()
- onNavigationBarSearchInputChanged:‘原生標題欄搜索框’輸入變化事件
- onNavigationBarSearchInputConfirmed:‘原生標題欄搜索框’ 提交事件
- 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可以爲空函數或處理事件; - 不支持按鍵修飾符;
- 表單組件:H5
select
標籤用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;
使用Weex/nvue注意事項
使用html5+注意事項