uni-app實戰教程


uni-app:學習使用門檻低,vuejs語法,一套代碼多種編譯方式多個平台運行,拋開這些兼容性不說,單單用來開發小程序也是最佳的選擇

一:下載配置Hbuilder X

新建uni-app項目,包含模板,可選擇支持scss語法

二:項目目錄結構

components: uni-app組件目錄

pages:項目文件目錄

static:靜態資源文件(圖片、字體圖標)

wxcomponents: 微信小程序組件目錄

main.js : vue初始化入口文件

App.vue : 全局樣式配置

manifest.json : 配置應用名稱、打包信息等

pages.json : 配置頁面路由等

三:生命周期

應用生命周期:應用生命周期僅可在App.vue中監聽,在其它頁面監聽無效

onLaunch:項目初始化觸發,僅一次

onShow: 顯示頁面時觸發

onHide:關閉頁面后觸發

onError: 出現錯誤時觸發

onUniNViewMessage:對nvue頁面發送數據時觸發

onUnhandledRejection:對未處理的Promise拒絕事件監聽函數

頁面生命周期:

onLoad: 頁面加載時

onReady: 頁面加載完成

onPullDownRefresh:監聽用戶下拉動作

onTabItemTap: 點擊tab時觸發

onPageScroll:監聽頁面滾動

四:路由

uni.navigateTo({ url }) 跳轉到某個頁面,保留當前頁

uni.redirectTo({ url }) 跳轉到某個頁面,關閉當前頁

uni.switchTab({ url }) 跳轉到tabBar,並關閉所有不是tab的頁面

uni.navigateBack() 關閉當前頁,返回上一頁面

五:發送請求

uni.request({

url,

data,

method,

success

})

六:下拉刷新

onPullDownRefresh
當把回調函數作為參數在另一個函數中執行的時候,如果想要確保參數不報錯,在函數體內這么做:

callBack && callBack()

七:頁面內跳轉到站外的地址

1、location.href = "https://............."

2、使用標簽


免責聲明!

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



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