uni-app 基礎


  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:監聽原生標題欄搜索輸入框點擊事件;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM