站長(zhǎng)資訊網(wǎng)【相關(guān)學(xué)習(xí)推薦：微信小程序開(kāi)發(fā)教程】
資源路徑說(shuō)明
- template內(nèi)引入靜態(tài)資源，如image、video等標(biāo)簽的src屬性時(shí)，可以使用相對(duì)路徑或者絕對(duì)路徑
<!-- 絕對(duì)路徑，/static指根目錄下的static目錄，在cli項(xiàng)目中/static指src目錄下的static目錄 --> <image class="logo" src="/static/logo.png"></image> <image class="logo" src="@/static/logo.png"></image> <!-- 相對(duì)路徑 --> <image class="logo" src="../../static/logo.png"></image>
- js文件或script標(biāo)簽內(nèi)（包括renderjs等）引入js文件時(shí)，可以使用相對(duì)路徑和絕對(duì)路徑。js文件不支持使用/開(kāi)頭的方式引入
// 絕對(duì)路徑，@指向項(xiàng)目根目錄，在cli項(xiàng)目中@指向src目錄 import add from '@/common/add.js' // 相對(duì)路徑 import add from '../../common/add.js'
- css文件或style標(biāo)簽內(nèi)引入css文件時(shí)（scss、less文件同理），可以使用相對(duì)路徑和絕對(duì)路徑。
/* 絕對(duì)路徑 */ @import url('/common/uni.css'); @import url('@/common/uni.css'); /* 相對(duì)路徑 */ @import url('../../common/uni.css');
- css文件或style標(biāo)簽內(nèi)引用的圖片路徑可以使用相對(duì)路徑也可以使用絕對(duì)路徑，需要注意的是，有些小程序端css文件不允許引用本地文件
/* 絕對(duì)路徑 */ background-image: url(/static/logo.png); background-image: url(@/static/logo.png); /* 相對(duì)路徑 */ background-image: url(../../static/logo.png);
生命周期
應(yīng)用生命周期
| 函數(shù)名 | 說(shuō)明 |
|---|---|
| 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) |
| onError | 當(dāng) uni-app 報(bào)錯(cuò)時(shí)觸發(fā) |
頁(yè)面生命周期
| 函數(shù)名 | 說(shuō)明 |
|---|---|
| onLoad | 監(jiān)聽(tīng)頁(yè)面加載，其參數(shù)為上個(gè)頁(yè)面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類型為Object（用于頁(yè)面?zhèn)鲄ⅲ?/td> |
| onShow | 監(jiān)聽(tīng)頁(yè)面顯示。頁(yè)面每次出現(xiàn)在屏幕上都觸發(fā)，包括從下級(jí)頁(yè)面點(diǎn)返回露出當(dāng)前頁(yè)面 |
| onReady | 監(jiān)聽(tīng)頁(yè)面初次渲染完成。注意如果渲染速度快，會(huì)在頁(yè)面進(jìn)入動(dòng)畫完成前觸發(fā) |
| onHide | 監(jiān)聽(tīng)頁(yè)面隱藏 |
| onUnload | 監(jiān)聽(tīng)頁(yè)面卸載 |
| onResize | 監(jiān)聽(tīng)窗口尺寸變化 |
| onPullDownRefresh | 監(jiān)聽(tīng)用戶下拉動(dòng)作，一般用于下拉刷新 |
| onReachBottom | 頁(yè)面上拉觸底事件的處理函數(shù) |
| onTabItemTap | 點(diǎn)擊 tab 時(shí)觸發(fā)，參數(shù)為Object |
| onShareAppMessage | 用戶點(diǎn)擊右上角分享 |
| onPageScroll | 監(jiān)聽(tīng)頁(yè)面滾動(dòng)，參數(shù)為Object |
| onNavigationBarButtonTap | 監(jiān)聽(tīng)原生標(biāo)題欄按鈕點(diǎn)擊事件，參數(shù)為Object |
| onBackPress | 監(jiān)聽(tīng)頁(yè)面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示來(lái)源是左上角返回按鈕或 android 返回鍵；navigateBack表示來(lái)源是 uni.navigateBack |
| onNavigationBarSearchInputChanged | 監(jiān)聽(tīng)原生標(biāo)題欄搜索輸入框輸入內(nèi)容變化事件 |
| onNavigationBarSearchInputConfirmeds | 監(jiān)聽(tīng)原生標(biāo)題欄搜索輸入框搜索事件，用戶點(diǎn)擊軟鍵盤上的“搜索”按鈕時(shí)觸發(fā) |
| onNavigationBarSearchInputClicked | 監(jiān)聽(tīng)原生標(biāo)題欄搜索輸入框點(diǎn)擊事件 |
Vue生命周期
| 函數(shù)名 | 說(shuō)明 |
|---|---|
| beforeCreate | — |
| created | — |
| beforeMount | — |
| mounted | — |
| beforeUpdate | — |
| updated | — |
| beforeDestroy | — |
| destroyed | — |
路由
uni-app路由統(tǒng)一有框架管理，開(kāi)發(fā)者需要在pages.json里配置每個(gè)路由頁(yè)面的路徑及頁(yè)面樣式。如仍希望采用 Vue Router 方式管理路由，可在插件市場(chǎng)搜索 Vue-Router。
路由跳轉(zhuǎn)
uni-app 有兩種頁(yè)面路由跳轉(zhuǎn)方式：使用navigator組件跳轉(zhuǎn)、調(diào)用API跳轉(zhuǎn)
頁(yè)面棧
| 路由方式 | 頁(yè)面棧表現(xiàn) | 觸發(fā)時(shí)機(jī) |
|---|---|---|
| 初始化 | 新頁(yè)面入棧 | uni-app 打開(kāi)的第一個(gè)頁(yè)面 |
| 打開(kāi)新頁(yè)面 | 新頁(yè)面入棧 | 調(diào)用 API uni.navigateTo 、使用組件 <navigator open-type=”navigate”/> |
| 頁(yè)面重定向 | 當(dāng)前頁(yè)面出棧，新頁(yè)面入棧 | 調(diào)用 API uni.redirectTo 、使用組件 <navigator open-type=”redirectTo”/> |
| 頁(yè)面返回 | 頁(yè)面不斷出棧，直到目標(biāo)返回頁(yè) | 調(diào)用 API uni.navigateBack 、使用組件 <navigator open-type=”navigateBack”/> 、用戶按左上角返回按鈕、安卓用戶點(diǎn)擊物理back按鍵 |
| Tab 切換 | 頁(yè)面全部出棧，只留下新的 Tab 頁(yè)面 | 調(diào)用 API uni.switchTab 、使用組件 <navigator open-type=”switchTab”/> 、用戶切換 Tab |
| 重加載 | 頁(yè)面全部出棧，只留下新的頁(yè)面 | 調(diào)用 API uni.reLaunch 、使用組件 <navigator open-type=”reLaunch”/> |
運(yùn)行環(huán)境判斷
// uEnvDev if (process.env.NODE_ENV === 'development') { // TODO } // uEnvProd if (process.env.NODE_ENV === 'production') { // TODO }
頁(yè)面樣式與布局
單位
px為屏幕像素,rpx響應(yīng)式px,它們之間的換算公式為750 * 元素在設(shè)計(jì)稿中的寬度 / 設(shè)計(jì)稿基準(zhǔn)寬度
樣式導(dǎo)入
<style> @import "../../common/uni.css"; .uni-card { box-shadow: none; }</style>
flex布局
<style>/*主要有兩個(gè)概念 容器與項(xiàng)目*/ .container{ display: flex; flex-direction:row; flex-wrap:nowrap; flex-flow: row nowrap;/*簡(jiǎn)寫方式*/ justify-content: center;/*定義項(xiàng)目在主軸上的對(duì)齊方式*/ align-items:center;/*定義項(xiàng)目在交叉軸上如何對(duì)齊*/}.item { order: 1; flex-grow:0;/*定義項(xiàng)目的放大比例*/ flex-shrink:1;/*定義了項(xiàng)目的縮小比例*/ align-self:auto;/*單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式*/}</style>
定義全局變量
- 共用模塊
- Vue.prototype
- globalData
- Vuex
參考文章 uni-app全局變量的幾種實(shí)現(xiàn)方式
class與style綁定
支持?jǐn)?shù)組合對(duì)象的方式
計(jì)算屬性
計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的
條件渲染
v-if v-show
列表渲染
v-for 注意攜帶key
事件處理
// 事件映射表，左側(cè)為 WEB 事件，右側(cè)為 ``uni-app`` 對(duì)應(yīng)事件{ click: 'tap', touchstart: 'touchstart', touchmove: 'touchmove', touchcancel: 'touchcancel', touchend: 'touchend', tap: 'tap', longtap: 'longtap', //推薦使用longpress代替 input: 'input', change: 'change', submit: 'submit', blur: 'blur', focus: 'focus', reset: 'reset', confirm: 'confirm', columnchange: 'columnchange', linechange: 'linechange', error: 'error', scrolltoupper: 'scrolltoupper', scrolltolower: 'scrolltolower', scroll: 'scroll'}
表單控件綁定
推薦使用uni-app的表單組件
組件分為全局組件和局部組件
都存在類似的操作，即導(dǎo)入，注冊(cè)，使用
常見(jiàn)問(wèn)題
1、如何獲取上個(gè)頁(yè)面?zhèn)鬟f的數(shù)據(jù)
onLoad(args)
2、如何設(shè)置全局的數(shù)據(jù)和全局的方法
vuex(uni-app已經(jīng)內(nèi)置了vuex)
uni-app自帶統(tǒng)計(jì)平臺(tái)，只要稍作配制就可以使用
uni統(tǒng)計(jì)官網(wǎng)地址：#dcloud.net.cn/
