- 環(huán)境搭建
- 頁面外觀配置
- 數(shù)據(jù)綁定
- uni-app的生命周期
- 組件的使用
- 條件注釋跨端兼容
- uni-app的事件
- 導航跳轉
- 組件創(chuàng)建和通信
1 uni-app簡介
1.1 簡介
? uni-app 是一個使用 Vue.js 開發(fā)所有前端應用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個平臺。官網(wǎng)：https://uniapp.dcloud.io/
1.2 環(huán)境搭建
（1）安裝編輯器Hbuilder，地址：https://www.dcloud.io/hbuilderx.html ，推薦下載版本為App開發(fā)版
（2）微信開發(fā)者工具下載，地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
注意：如果是第一次使用，需要先配置小程序ide的相關路徑，才能運行成功。需在輸入框輸入微信開發(fā)者工具的安裝路徑。如果提示工具的服務端口已關閉。要使用命令行調用工具，請打開工具 -> 設置 -> 安全設置，將服務端口開啟
1.3 開發(fā)規(guī)范
為了實現(xiàn)多端兼容，綜合考慮編譯速度、運行性能等因素，uni-app 約定了如下開發(fā)規(guī)范：
- 頁面文件遵循 Vue 單文件組件 (SFC) 規(guī)范
- 組件標簽靠近小程序規(guī)范，詳見uni-app 組件規(guī)范
- 接口能力（JS API）靠近微信小程序規(guī)范，但需將前綴 wx 替換為 uni，詳見uni-app接口規(guī)范
- 數(shù)據(jù)綁定及事件處理同 Vue.js規(guī)范，同時補充了App及頁面的生命周期
- 為兼容多端運行，建議使用flex布局進行開發(fā)
1.4 目錄結構
pages：業(yè)務頁面文件存放的目錄
components：組件存放目錄
static：靜態(tài)資源存放目錄，如圖片等
unpackage：打包目錄，在這里有各個平臺的打包文件
App.vue：應用配置，用來配置App全局樣式以及監(jiān)聽應用生命周期
main.js：Vue初始化入口文件
manifest.json：配置應用名稱、appid、logo、版本等打包信息
pages.json：用來對 uni-app 進行全局配置，決定頁面文件的路徑、窗口樣式、原生的導航欄、底部的原生tabbar 等
uni.scss：方便總體控制應用風格。比如按鈕顏色，邊框風格。內置了常用樣式變量
1.4 配置
1.1 pages.json
1：globalStyle
2：pages
- pages節(jié)點的第一項為應用入口頁（即首頁）
- 應用中新增/減少頁面，都需要對 pages 數(shù)組進行修改
- 文件名不需要寫后綴，框架會自動尋找路徑下的頁面資源
3：tabBar
- 當設置 position 為 top 時，將不會顯示 icon(top 值僅微信小程序支持)
- tabBar 中的 list 是一個數(shù)組，只能配置最少2個、最多5個 tab，tab 按數(shù)組的順序排序。
2 組件簡介
1.1 view
1.2 text
1.3 button
1.4 image
3 uniapp中的樣式
尺寸單位
uni-app 支持的通用 css 單位包括 px、rpx
- px 即屏幕像素
- rpx 即響應式px，一種根據(jù)屏幕寬度自適應的動態(tài)單位。以750寬的屏幕為基準，750rpx恰好為屏幕寬度。屏幕變寬，rpx 實際顯示效果會等比放大。
樣式導入
使用@import語句可以導入外聯(lián)樣式表，@import后跟需要導入的外聯(lián)樣式表的相對路徑，用;表示語句結束。定義在 App.vue 中的樣式為全局樣式
選擇器
支持.class、#id、element選擇器等
4 uniapp中的數(shù)據(jù)綁定
在頁面中需要定義數(shù)據(jù)，和之前vue中一樣，直接在data中定義數(shù)據(jù)即可
export default {
data() {
return {
msg: 'hello',
flag: true,
imgUrl: 'http://destiny001.gitee.io/image/monkey_02.jpg',
arr: [
{
id:1,
name:'張三',
age: 20
},
{
id:2,
name:'李三',
age: 30
},
{
id:3,
name:'德三',
age: 40
}
]
}
}
}
4.1插值表達式的使用
- 利用插值表達式渲染基本數(shù)據(jù)
<view>{{msg}}</view>
- 基本運算
<view>{{1+1}}</view>
- 插值表達式中使用三元運算
<view>{{flag?'真的':'假的'}}</view>
4.2v-bind
<image :src="imgUrl"></image>
4.2v-for
<view v-for="(item,index) in arr" :key="item.id">
序號：{{index}},姓名：{{item.name}},年齡：{{item.age}}
</view>
5 uniapp中的事件
5.1事件綁定和傳參
和vue中是一樣的，使用v-on進行綁定
<button type="primary" @click="clickHandle">按鈕</button>
methods: {
clickHandle(num,e) {
console.log(num, e)
}
}
默認如果沒有傳遞參數(shù)，事件函數(shù)第一個形參為事件對象。如果有參數(shù)還想獲取事件對象可以在參數(shù)后加入$event
<button type="primary" @click="clickHandle(10,$event)">按鈕</button>
methods: {
clickHandle(num,e) {
console.log(num, e)
}
}
6 生命周期
6.1 應用生命周期
6.2頁面生命周期
- onPullDownRefresh 監(jiān)聽用戶下拉動作，一般用于下拉刷新
- onReachBottom 頁面上拉觸底事件的處理函數(shù)(pages.json里的onReachBottomDistance 頁面上拉觸底事件觸發(fā)時距頁面底部距離)
7 網(wǎng)絡請求
uni.request
8 數(shù)據(jù)緩存
- 異步方法：
uni.setStorage
uni.getStorage
uni.removeStorage
- 同步方法：
