- 環(huán)境搭建
- 頁面外觀配置
- 數(shù)據(jù)綁定
- uni-app的生命周期
- 組件的使用
- 條件注釋跨端兼容
- uni-app的事件
- 導(dǎo)航跳轉(zhuǎn)
- 組件創(chuàng)建和通信
1 uni-app簡介
1.1 簡介
? uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架钞诡，開發(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的相關(guān)路徑岛琼，才能運行成功。需在輸入框輸入微信開發(fā)者工具的安裝路徑巢株。如果提示工具的服務(wù)端口已關(guān)閉槐瑞。要使用命令行調(diào)用工具，請打開工具 -> 設(shè)置 -> 安全設(shè)置阁苞，將服務(wù)端口開啟
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 目錄結(jié)構(gòu)
pages：業(yè)務(wù)頁面文件存放的目錄
components：組件存放目錄
static：靜態(tài)資源存放目錄甚牲，如圖片等
unpackage：打包目錄拉讯，在這里有各個平臺的打包文件
App.vue：應(yīng)用配置，用來配置App全局樣式以及監(jiān)聽?wèi)?yīng)用生命周期
main.js：Vue初始化入口文件
manifest.json：配置應(yīng)用名稱鳖藕、appid魔慷、logo、版本等打包信息
pages.json：用來對 uni-app 進行全局配置著恩，決定頁面文件的路徑院尔、窗口樣式、原生的導(dǎo)航欄喉誊、底部的原生tabbar 等
uni.scss：方便總體控制應(yīng)用風(fēng)格邀摆。比如按鈕顏色，邊框風(fēng)格伍茄。內(nèi)置了常用樣式變量
1.4 配置
1.1 pages.json
1：globalStyle
2：pages
- pages節(jié)點的第一項為應(yīng)用入口頁（即首頁）
- 應(yīng)用中新增/減少頁面栋盹，都需要對 pages 數(shù)組進行修改
- 文件名不需要寫后綴，框架會自動尋找路徑下的頁面資源
3：tabBar
- 當(dāng)設(shè)置 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 即響應(yīng)式px怎茫，一種根據(jù)屏幕寬度自適應(yīng)的動態(tài)單位收壕。以750寬的屏幕為基準，750rpx恰好為屏幕寬度。屏幕變寬蜜宪，rpx 實際顯示效果會等比放大虫埂。
樣式導(dǎo)入
使用@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑圃验，用;表示語句結(jié)束掉伏。定義在 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 應(yīng)用生命周期
6.2頁面生命周期
- onPullDownRefresh 監(jiān)聽用戶下拉動作栗精，一般用于下拉刷新
- onReachBottom 頁面上拉觸底事件的處理函數(shù)(pages.json里的onReachBottomDistance 頁面上拉觸底事件觸發(fā)時距頁面底部距離)
7 網(wǎng)絡(luò)請求
uni.request
8 數(shù)據(jù)緩存
- 異步方法：
uni.setStorage
uni.getStorage
uni.removeStorage
- 同步方法：
