前言
uni-app 是繼 mui 框架之后的一個(gè)跨多端的開發(fā)框架脂新，目前支持 iOS Android 和 wx(微信小程序), 也就是說開發(fā)一套代碼可以實(shí)現(xiàn)相應(yīng)端的開發(fā)乍钻，是基于Vue的一個(gè)很不錯(cuò)的開發(fā)框架兴想，對(duì)于熟悉Vue 和微信小程序的開發(fā)小伙伴來說學(xué)習(xí)成本幾乎為零。
官網(wǎng)地址：
1.目錄及文件
一個(gè)uni-app工程荧降，默認(rèn)包含如下目錄及文件：
├─ components ··················· uni-app組件目錄
└──comp-a.vue ··················· 可復(fù)用的a組件
├── pages ······················· 業(yè)務(wù)頁面文件存放目錄
├─ index ······················ 使用到的字體文件
└── index.vue ····················· index頁面
├─ list ······················· 使用到的圖片文件
└── list.vue ····················· list頁面
├─ static ··· 存放應(yīng)用引用靜態(tài)資源（如圖片妈倔、視頻等）的地方，注意：靜態(tài)資源只能存放于此
├─ main.js ······················· Vue初始化入口文件
├─ App.vue ··· 應(yīng)用配置伪煤，用來配置App全局樣式以及監(jiān)聽
├─ manifest.json ················ 配置應(yīng)用名稱加袋、appid、logo抱既、版本等打包信息
└─ pages.json················· 配置頁面路由职烧、導(dǎo)航條、選項(xiàng)卡等頁面類信息
2.應(yīng)用生命周期
| 函數(shù)名 | 說明 |
|---|---|
| onLaunch | 當(dāng)uni-app 初始化完成時(shí)觸發(fā)（全局只觸發(fā)一次) |
| onShow | 當(dāng) uni-app 啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示 |
| onHide | 當(dāng) uni-app 從前臺(tái)進(jìn)入后臺(tái) |
應(yīng)用生命周期僅可在App.vue中監(jiān)聽蚀之，在其它頁面監(jiān)聽無效跋理。
3.頁面生命周期
| 函數(shù)名 | 說明 | 平臺(tái)支持 |
|---|---|---|
| onLoad | 監(jiān)聽頁面加載，其參數(shù)為上個(gè)頁面?zhèn)鬟f的數(shù)據(jù)恬总，參數(shù)類型為Object（用于頁面?zhèn)鲄?/td> | |
| onShow | 監(jiān)聽頁面顯示 | |
| onReady | 監(jiān)聽頁面初次渲染完成 | |
| onHide | 監(jiān)聽頁面隱藏 | |
| onUnload | 監(jiān)聽頁面卸載 | |
| onPullDownRefresh | 監(jiān)聽用戶下拉動(dòng)作 前普，一般用于下拉刷新 | |
| onReachBottom | 頁面上拉觸底事件的處理函數(shù) | |
| onPageScroll | 監(jiān)聽頁面滾動(dòng) ，參數(shù)為 Object | |
| onTabItemTap | 當(dāng)前是 tab 頁時(shí)壹堰，點(diǎn)擊 tab 時(shí)觸發(fā)拭卿。 | |
| onShareAppMessage | 用戶點(diǎn)擊右上角分享 | 微信小程序 |
注意
- 先觸發(fā)
uni-apponReady，后觸發(fā)vue的mounted - 建議使用
uni-app的onLoad代替vue的created
本文只是一個(gè)簡(jiǎn)單入門教程贱纠，后面會(huì)具體詳解開發(fā)流程峻厚。
2021-1-25日更新
歡迎大家可以參考我最新的文章 uni-app 入門到精通 （二）
