uni-app 是一款基於 vue 的支持多端開發的一套開源的架構
創建 && 運行發布
除了運用 HBuilderX 之外,還可以使用 vue-cli 進行創建項目,但是 vue-cli 必須是 3.x 的版本
npm instiall -g @vue/cli // 安裝 vue-cli 最新的版本
vue creat -p dcloudio/uni-preset-vue my-project
npm run dev:mp-weixin // dev 環境運行項目
npm run build:mp-weixin // 打包項目
生命周期
應用生命周期
onLaunch:當 uni-app 初始化完成時觸發(全局只觸發一次);
onShow:當 uni-app 啟動,或者從后天進入前台顯示;
onHide:當 uni-app 從前台進入后台;
onUniNViewMessage:對 nuve 頁面發送的數據進行監聽;
頁面生命周期
onLoad:監聽頁面加載,其參數為上個頁面傳遞的數據,參數類型為 Object;
onShow:監聽頁面顯示;頁面每次出現在屏幕上都觸發,包括從下級頁面點返回露出當前頁面;
onReady:監聽頁面初次渲染完成。注意如果渲染速度快,會在頁面進入動畫完成前觸發;
onHide:監聽頁面隱藏;
onUnload:監聽頁面卸載;
onResize:監聽窗口尺寸變化;
onPullDownRefresh:監聽用戶下拉動作,一般用於下拉刷新;
onReachBottom:頁面上拉觸底事件的處理函數;
onTabltemTap:點擊 tab 時觸發,參數為 Object;
onTabItemTap 常用於點擊當前 tabItem,滾動或者刷新當前頁面;如果是點擊不同的 tabitem,一定會觸發頁面切換;
如果想要在 App 端實現點擊某個 tabItem 不跳轉頁面,不能使用 onTabItemTap,可以使用 plus.nativeObj.view 放一個區塊蓋住原先的 tabItem,並攔截點擊事件;
參數說明:index:string 類型,被點擊 tableItem 的序號,從 0 開始;
pagePath:string 類型,被點擊 tableItem 的頁面路徑;
text:string 類型,被點擊 tableItem 的按鈕文字;
onShareAppMessage:用戶點擊右上角分享;
onPageScroll:監聽頁面滾動,參數為 Object;
參數說明:scrollTop:number類型,頁面在垂直方向已滾動的距離(單位px);
onNavigationBarButtonTap:監聽原生標題欄按鈕事件,參數為 Object;
參數說明:index:string 類型,原生標題欄按鈕數組的下標;
onBackPress:監聽頁面返回,返回 event = { from: backButton、navigateBack},backButton 表示來源是左上角返回按鈕或者 android 返回鍵;navigateBack 表示來源是 uni.navigateBack;
參數說明:from:string 類型,觸發返回行為的來源:“backButton” -- 左上角導航欄按鈕以及安卓返回鍵;“navigateBack” -- uni.navigateBack() 方法;
onNavigationBarSearchInputChanged:監聽原生標題欄搜索輸入框輸入內容變化事件;
onNavigationBarSearchInputConfirmed:監聽原生標題輸入框搜索事件,用戶點擊軟鍵盤上的 “搜索” 按鈕時觸發;
onNavigationBarSearchInputClicked:監聽原生標題欄搜索輸入框點擊事件;