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