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、使用標簽