一、課程介紹

課程流程介紹

基礎(chǔ)部分：

環(huán)境搭建

頁(yè)面外觀配置

數(shù)據(jù)綁定

uni-app的生命周期

組件的使用

條件注釋跨端兼容

uni中的事件

導(dǎo)航跳轉(zhuǎn)

組件創(chuàng)建和通訊

項(xiàng)目：

黑馬商城項(xiàng)目

uni-app介紹

uni-app是一個(gè)使用vue.js開(kāi)發(fā)所有前端應(yīng)用的框架。一套代碼，可發(fā)布到IOS、Android、H5以及各種小程序等多個(gè)平臺(tái)。

即使不跨端，uni-app同時(shí)也是更好的小程序開(kāi)發(fā)框架。

二、準(zhǔn)備

環(huán)境搭建：HbuiderX

安裝微信開(kāi)發(fā)者工具，用于打包后小程序預(yù)覽。

介紹項(xiàng)目目錄和文件作用

pages.json文件用來(lái)對(duì)uni-app進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口樣式、原生的導(dǎo)航欄、底部的原生tabbar等。

manifest.json文件是應(yīng)用的配置文件，用于指定應(yīng)用的名稱(chēng)、圖標(biāo)、權(quán)限等。

App.vue是我們的根組件，所有頁(yè)面都是在App.vue下進(jìn)行切換的，是頁(yè)面入口文件，可以調(diào)用應(yīng)用的生命周期函數(shù)。

main.js是我們的項(xiàng)目入口文件，主要作用是初始化vue實(shí)例并使用需要的插件。

uni.scss文件的用途是為了方便整體控制應(yīng)用的風(fēng)格。比如按鈕顏色、邊框風(fēng)格，uni.scss文件里預(yù)置了一批scss變量預(yù)置。

unpacksge就是打包目錄，在這里有各個(gè)平臺(tái)的打包文件

pages所有的頁(yè)面存放目錄

static靜態(tài)資源目錄，例如圖片等

components組件存放目錄

開(kāi)發(fā)規(guī)范

為了實(shí)現(xiàn)多端兼容，總和考慮編譯速度、運(yùn)行性能等因素，uni-app約定了如下開(kāi)發(fā)規(guī)范：

頁(yè)面文件遵循Vue單文件組件(SFC)規(guī)范

組件標(biāo)簽靠近小程序規(guī)范，詳見(jiàn)uni-app組件規(guī)范

接口能力（JS API）靠近微信小程序規(guī)范，但需將前綴wx替換為uni，詳見(jiàn)uni-app接口規(guī)范

數(shù)據(jù)綁定及事件處理同vue.js規(guī)范，同時(shí)補(bǔ)充了App及頁(yè)面的生命周期

為兼容多端運(yùn)行，建議使用flex布局進(jìn)行開(kāi)發(fā)

三、globalstyle全局外觀配置

全局配置

用于設(shè)置應(yīng)用的狀態(tài)欄、導(dǎo)航欄、標(biāo)題、窗口背景色等

屬性類(lèi)型默認(rèn)值描述

navigationBarBackgroundColor	HexColor	#F7F7F7	導(dǎo)航欄背景顏色(同狀態(tài)欄背景色)
navigationBarTextStyle	String	white	導(dǎo)航欄標(biāo)題顏色及狀態(tài)欄前景顏色，僅支持black/white
navigationBarTitleText	String		導(dǎo)航欄標(biāo)題文字內(nèi)容
backgroundColor	HexColor	#FFFFFF	窗口的背景色
backgroundTextStyle	Srting	dark	下拉loading的樣式，僅支持dark/light
enablePullDownRefresh	Boolean	false	是否開(kāi)啟下拉刷新，詳見(jiàn)頁(yè)面生命周期
onReachBottomDistance	Number	50	頁(yè)面上拉觸底事件觸發(fā)時(shí)距頁(yè)面底部距離，單位只支持px,詳見(jiàn)頁(yè)面生命周期

頁(yè)面配置

{"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)，參考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/message/message","style":{"navigationBarTitleText":"信息頁(yè)","navigationBarBackgroundColor":"#007AFF","h5":{"pullToRefresh":{"color":"#007AFF"}}}},{"path": "pages/index/index" }],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "綠帽子","navigationBarBackgroundColor": "#7FFF00","backgroundColor": "#228B22","enablePullDownRefresh":true,"backgroundTextStyle":"light","onReachBottomDistance":50} }

配置tabbar

如果應(yīng)用是一個(gè)多tab應(yīng)用，可以通過(guò)tabBar配置項(xiàng)指定tab欄得表現(xiàn)，以及tab切換時(shí)顯示得對(duì)應(yīng)頁(yè)。

當(dāng)tabbar設(shè)置了position為top時(shí)，將不會(huì)顯示icon圖標(biāo)。

tabbar中的list是一個(gè)數(shù)組，只能配置最少2個(gè)、最多5個(gè)tab，tab按數(shù)組的順序排序。

屬性說(shuō)明：

屬性類(lèi)型必填默認(rèn)值描述平臺(tái)差異說(shuō)明

color	HexColor	是		tab上的文字默認(rèn)顏色
selectedColor	HexColor	是		tab上的文字選中時(shí)的顏色
backgroundColor	HexColor	是		tab的背景色
borderStyle	String	否	black	tabbar上邊框的顏色，僅支持black/white	App2.3.4+支持其他顏色值
list	Array	是		tab的列表，詳見(jiàn)list屬性說(shuō)明，最少2個(gè)，最多5個(gè)tab
position	String	否	bottom	可選值bottom、top	top值僅微信小程序支持

其中，list接收一個(gè)數(shù)組，數(shù)組中的每個(gè)項(xiàng)都是一個(gè)對(duì)象，其屬性值如下：

屬性類(lèi)型必填說(shuō)明

pagePath	String	是	頁(yè)面路徑，必須在pages中先定義
text	String	是	tab上按鈕文字，在5+APP和H5平臺(tái)為非必填。例如中間可放一個(gè)沒(méi)有文字的+號(hào)圖標(biāo)
iconPath	String	否	圖片路徑，icon大小限制為40kb，建議尺寸為81px*81px
selectedIconPath	String	否	選中時(shí)的圖片路徑，icon大小限制為40kb,建議尺寸為81px*81px,，當(dāng)postion為top時(shí)，此參數(shù)無(wú)效

"tabBar":{"color":"#A0522D","selectedColor":"#B3EE3A","backgroundColor":"#FFFFFF","borderStyle":"black","position":"top","list":[{"pagePath":"pages/index/index","text":"首頁(yè)","iconPath":"/static/tabs/home.png","selectedIconPath":"static/tabs/home-active.png"},{"pagePath":"pages/message/message","text":"信息","iconPath":"static/tabs/message.png","selectedIconPath":"static/tabs/message-active.png"},{"pagePath":"pages/contact/contact","text":"我們","iconPath":"static/tabs/contact.png","selectedIconPath":"static/tabs/contact-active.png"}]}

"position":"top"只在微信小程序中生效。

condition啟動(dòng)模式配置

啟動(dòng)模式配置，僅開(kāi)發(fā)期間生效，用于模擬直達(dá)頁(yè)面的場(chǎng)景。如：小程序轉(zhuǎn)發(fā)后，用戶(hù)點(diǎn)擊所打開(kāi)的頁(yè)面。

屬性說(shuō)明：

屬性類(lèi)型是否必填描述

current	Number	是	當(dāng)前激活的模式，list節(jié)點(diǎn)的索引值
list	Array	是	啟動(dòng)模式列表

list說(shuō)明：

屬性類(lèi)型是否必填描述

name	String	是	啟動(dòng)模式名稱(chēng)
path	String	是	啟動(dòng)頁(yè)面路徑
query	String	否	啟動(dòng)參數(shù)，可在頁(yè)面的onLoad函數(shù)里獲得

"condition":{"current":0,"list":[{"name":"詳情頁(yè)","path":"pages/detail/detail","query":"id=80"}]}

四、組件的基本使用

就像HTML中的div、p、span等標(biāo)簽的作用是一樣的。

text文本組件

屬性：

屬性類(lèi)型默認(rèn)值必填說(shuō)明

selectable	boolean	false	否	文本是否可選
space	string	.	否	顯示連續(xù)空格，可選參數(shù):ensp、emsp、nbsp
decode	boolean	false	否	是否解碼

space值：

ensp 中文字符空格一半 emsp 中文字符空格大小 nbsp 根據(jù)字體設(shè)置的空格大小

<template><view><view><text>唱歌</text></view><view><text selectable>唱歌</text></view><view><text selectable space="emsp">唱 歌</text></view><view><text selectable space="ensp">唱 歌</text></view><view><text selectable space="nbsp" style="font-size: 20px;">唱 歌</text></view><view><text>&amp;</text></view></view> </template>

view視圖容器組件

相當(dāng)于div。

屬性：

屬性名類(lèi)型默認(rèn)值說(shuō)明

hover-class	String	none	指定按下去的樣式類(lèi)。當(dāng) hover-class="none" 時(shí)，沒(méi)有點(diǎn)擊態(tài)效果
hover-stop-propagation	Boolean	false	指定是否阻止本節(jié)點(diǎn)的祖先節(jié)點(diǎn)出現(xiàn)點(diǎn)擊態(tài)，App、H5、支付寶小程序、百度小程序不支持（支付寶小程序、百度小程序文檔中都有此屬性，實(shí)測(cè)未支持）
hover-start-time	Number	50	按住后多久出現(xiàn)點(diǎn)擊態(tài)，單位毫秒
hover-stay-time	Number	400	手指松開(kāi)后點(diǎn)擊態(tài)保留時(shí)間，單位毫秒

hover-stop-propagation阻止冒泡

:hover-start-time和:hover-stay-time后面寫(xiě)數(shù)字，所以前面要加冒號(hào)。

<view><view class="box2" hover-class="box2-active"><view class="box" :hover-start-time="2000" :hover-stay-time="2000" hover-class="box-active" hover-stop-propagation>我是一個(gè)大盒子</view></view> </view>

button按鈕組件

size="default" 默認(rèn)大小

="mini" 小按鈕

type="default" 白色

="warn" 紅色

="primary" 微信小程序、360小程序?yàn)?strong>綠色，App、H5、百度小程序、支付寶小程序、飛書(shū)小程序、快應(yīng)用為藍(lán)色，字節(jié)跳動(dòng)小程序?yàn)?strong>紅色，QQ小程序?yàn)?strong>淺藍(lán)色。如想在多端統(tǒng)一顏色，請(qǐng)改用default，然后自行寫(xiě)樣式.

plain 鏤空

disabled 是否禁用，禁用不可點(diǎn)

loading 加載效果。H5、App(App-nvue 平臺(tái)，在 ios 上為雪花，Android上為圓圈)

<button type="primary" plain>按鈕</button> <button type="primary" plain disabled>按鈕</button> <button type="default" loading></button>

image圖片組件

屬性名類(lèi)型默認(rèn)值說(shuō)明平臺(tái)差異說(shuō)明

src	String		圖片資源地址
mode	String	'scaleToFill'	圖片裁剪、縮放的模式
lazy-load	Boolean	false	圖片懶加載。只針對(duì)page與scroll-view下的image有效	微信小程序、百度小程序、字節(jié)跳動(dòng)小程序、飛書(shū)小程序
fade-show	Boolean	true	圖片顯示動(dòng)畫(huà)效果	僅App-nvue 2.3.4+ Android有效
webp	boolean	false	默認(rèn)不解析 webP 格式，只支持網(wǎng)絡(luò)資源	微信小程序2.9.0
show-menu-by-longpress	boolean	false	開(kāi)啟長(zhǎng)按圖片顯示識(shí)別小程序碼菜單	微信小程序2.7.0
draggable	boolean	true	是否能拖動(dòng)圖片	H5 3.1.1+、App（iOS15+）
@error	HandleEvent		當(dāng)錯(cuò)誤發(fā)生時(shí)，發(fā)布到 AppService 的事件名，事件對(duì)象event.detail = {errMsg: 'something wrong'}
@load	HandleEvent		當(dāng)圖片載入完畢時(shí)，發(fā)布到 AppService 的事件名，事件對(duì)象event.detail = {height:'圖片高度px', width:'圖片寬度px'}

• <image> 組件默認(rèn)寬度 300px、高度 225px；app-nvue平臺(tái)，暫時(shí)默認(rèn)為屏幕寬度

<image src="../../static/tabs/message-active.png" mode="aspectFit"></image> <image src="../../static/tabs/message-active.png" mode="aspectFill"></image>

五、uni-app中的樣式

rpx即響應(yīng)式即響應(yīng)式px,一種根據(jù)屏幕寬度自適應(yīng)的動(dòng)態(tài)單位。以750寬的屏幕為基準(zhǔn)，75Ppx恰好為屏幕寬度。屏幕變寬，rpx實(shí)際顯示效果會(huì)等比放大。

使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用；表示語(yǔ)句結(jié)束

支持基本常用的選擇器class、id、element等

在uni-app中不能使用*選擇器。

page相當(dāng)于body節(jié)點(diǎn)

定義在App.vue中的樣式為全局樣式，作用于每一個(gè)頁(yè)面。在pages目錄下的vue文件中定義的樣式為局部樣式，只作用在對(duì)應(yīng)的頁(yè)面，并會(huì)覆蓋App.Vue中相同的選擇器。

uni-app支持使用字體圖標(biāo)，使用方式與普通web項(xiàng)目相同，需要注意以下幾點(diǎn)：

字體文件小于40kb,uni-app會(huì)自動(dòng)將其轉(zhuǎn)化為base64格式；

字體文件大于等于40kb,需開(kāi)發(fā)者自己轉(zhuǎn)換，否則使用將不生效；

字體文件的引用路徑推薦使用以~@開(kāi)頭的絕對(duì)路徑。

@font-face {font-family: "iconfont";src: url('~@/static/fonts/iconfont.eot?t=1576844226174'); }

如何使用scss或者less

只要下載相關(guān)插件，就能自動(dòng)編譯

六、uni-app中的數(shù)據(jù)綁定

在頁(yè)面中需要定義數(shù)據(jù)，和我們之前的vue一模一樣，直接在data中定義數(shù)據(jù)即可。

export default{data (){return{msg:'hello-uni'}} }

插值表達(dá)式的使用

利用插值表達(dá)式渲染基本數(shù)據(jù)

<view>{{msg}}</view>

在插值表達(dá)式中使用三元運(yùn)算

<view>{{flag?'我是真的'：'我是假的'}}</view>

基本運(yùn)算

<view>{{1+1}}</view> <template><view><view>數(shù)據(jù)綁定的學(xué)習(xí)</view><view>{{msg}}</view><view>{{"世界"+'你好'}}</view><view>{{1+1}}</view><view>{{flag ? "真的":"假的"}}</view></view> </template><script>export default {data() {return {msg:"hello",flag:true}}} </script>

v-bind動(dòng)態(tài)綁定屬性

在data中定義了一張圖片，我們希望把這張圖片渲染到頁(yè)面上

export default{data (){return{img:'http://destiny001.gitee.io/image/monkey_02.jpg'}} }

利用v-bind進(jìn)行渲染

<image v-bind:src="img"></image>

還可以縮寫(xiě)成：

<image :src="img"></image>

v-for遍歷

<template><view><view>數(shù)據(jù)綁定的學(xué)習(xí)</view><view>{{msg}}</view><view>{{"世界"+'你好'}}</view><view>{{1+1}}</view><view>{{flag ? "真的":"假的"}}</view><image v-bind:src="imgUrl" mode=""></image><image :src="imgUrl" mode=""></image><view v-for="(item,index) in arr" :key="item.id">序號(hào)：{{item.id}},名字：{{item.name}},年齡：{{item.age}}</view></view> </template><script>export default {data() {return {msg:"hello",flag:true,imgUrl:"http://destiny001.gitee.io/image/monkey_02.jpg",arr:[{name:"宋小寶",age:20,id:1},{name:"劉能",age:20,id:2},{name:"趙四",age:20,id:3},{name:"小沈陽(yáng)",age:20,id:4}]}},methods: {}} </script>

七、uni中的事件

事件綁定

事件傳參

v-on:click="函數(shù)名(參數(shù)，$event)"

$event是指?jìng)魅胧录?shù)

<template><view><button @click="clickHandle(20,$event)">按鈕</button></view> </template><script>export default {methods: {clickHandle(num,e){console.log("點(diǎn)擊我了",num,e)}}} </script>

八、uni的生命周期

應(yīng)用的生命周期

生命周期的概念：一個(gè)對(duì)象從創(chuàng)建、運(yùn)行、銷(xiāo)毀的整個(gè)過(guò)程被成為生命周期。 生命周期函數(shù)：在生命周期中每個(gè)階段會(huì)伴隨著每一個(gè)函數(shù)的觸發(fā)，這些函數(shù)被稱(chēng)為生命周期函數(shù)

uni-app支持如下應(yīng)用生命周期函數(shù)

函數(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ā)

App.vue中：

<script>export default {onLaunch: function() {console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')},onError:function(err){console.log("出現(xiàn)異常了",err)}} </script>

頁(yè)面的生命周期

uni-app支持如下頁(yè)面生命周期函數(shù)：

函數(shù)名說(shuō)明說(shuō)明

onLoad	監(jiān)聽(tīng)頁(yè)面加載，其參數(shù)為上個(gè)頁(yè)面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類(lèi)型為Object(用于頁(yè)面?zhèn)鲄?
onShow	監(jiān)聽(tīng)頁(yè)面顯示。頁(yè)面每次出現(xiàn)在屏幕上都觸發(fā)，包括從下級(jí)頁(yè)面點(diǎn)返回露出當(dāng)前頁(yè)面
onReady	監(jiān)聽(tīng)頁(yè)面初次渲染完成
onHide	監(jiān)聽(tīng)頁(yè)面隱藏
onUnload	監(jiān)聽(tīng)頁(yè)面卸載
onResize	監(jiān)聽(tīng)窗口尺寸變化
onPullDownRefresh	監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作，一般用于下拉刷新	九、
onReachBottom	頁(yè)面滾動(dòng)到底部的事件（不是scroll-view滾到底），常用于下拉下一頁(yè)數(shù)據(jù)。具體見(jiàn)下方注意事項(xiàng)

• tabbar 的頁(yè)面展現(xiàn)過(guò)一次后就保留在內(nèi)存中，再次切換 tabbar 頁(yè)面，只會(huì)觸發(fā)每個(gè)頁(yè)面的onShow，不會(huì)再觸發(fā)onLoad。

下拉刷新不推薦在全局寫(xiě)，

哪個(gè)頁(yè)面需要就在哪個(gè)頁(yè)面onPullDownRefresh監(jiān)聽(tīng)，并且頁(yè)面單獨(dú)配置"enablePullDownRefresh":true

九、下拉刷新

開(kāi)啟下拉刷新

在uni-app中有兩種方式開(kāi)啟下拉刷新：

需要在pges.json里，找到的當(dāng)前頁(yè)面的pages節(jié)點(diǎn)，并在style選項(xiàng)中開(kāi)啟enablePullDownRefresh

通過(guò)調(diào)用uni.startPullDownRefresh方法來(lái)開(kāi)啟下拉刷新

通過(guò)配置文件開(kāi)啟

創(chuàng)建list頁(yè)面進(jìn)行演示：

<template><view><view v-for="(item,index) in list" :key="index">{{item}}</view></view> </template>

監(jiān)聽(tīng)下拉刷新

通過(guò)onPullDownRefresh可以監(jiān)聽(tīng)到下拉刷新的動(dòng)作

<script>export default {data() {return {list:["前端","java","UI","測(cè)試","大數(shù)據(jù)"]}},methods:{startPull (){uni.startPullDownRefresh()}},onPullDownRefresh (){console.1og('觸發(fā)下拉刷新了)}} </script>

關(guān)閉下拉刷新

uni.stopPullDownRefresh()

停止當(dāng)前頁(yè)面下拉刷新

<template><view><view v-for="(item,index) in list" :key="index">{{item}}</view><button type="default" @click="pullDown">下拉刷新</button></view> </template><script>export default {data() {return {list:["前端","java","UI","測(cè)試","大數(shù)據(jù)"]}},onPullDownRefresh() {console.log("觸發(fā)了下拉刷新")setTimeout(()=>{this.list=["測(cè)試","大數(shù)據(jù)","前端","java","UI"]uni.stopPullDownRefresh()},2000)},methods: {pullDown(){uni.startPullDownRefresh()}}} </script>

十、上拉加載

觸底事件onReachBottom

<template><view><view class="box-item" v-for="(item,index) in list" :key="index">{{item}}</view><!-- <button type="default" @click="pullDown">下拉刷新</button> --></view> </template><script>export default {data() {return {list:["前端","java","UI","測(cè)試","大數(shù)據(jù)","前端","java","UI","測(cè)試","大數(shù)據(jù)"]}},onPullDownRefresh() {console.log("觸發(fā)了下拉刷新")setTimeout(()=>{this.list=["測(cè)試","大數(shù)據(jù)","前端","java","UI"]uni.stopPullDownRefresh()},2000)},onReachBottom() {console.log("頁(yè)面觸底了")this.list=[...this.list,...["測(cè)試","大數(shù)據(jù)","前端","java"]]},methods: {pullDown(){uni.startPullDownRefresh()}}} </script><style> .box-item{height: 100px;line-height: 100px; } </style>

十一、網(wǎng)絡(luò)請(qǐng)求

在uni中可以調(diào)用uni.request方法進(jìn)行請(qǐng)求網(wǎng)絡(luò)請(qǐng)求 需要注意的是：在小程序中網(wǎng)絡(luò)相關(guān)的API在使用前需要配置域名白名單。

發(fā)生get請(qǐng)求

<button type="default" @click="get">發(fā)生get請(qǐng)求</button>methods: {get(){uni.request({url:"http://localhost:8082/api/getlunbo",method:"GET",success(res) {console.log(res)}})} }

十二、數(shù)據(jù)緩存

uni.setStorage

異步

將數(shù)據(jù)存儲(chǔ)在本地緩存中指定的key中，會(huì)覆蓋掉原來(lái)該key對(duì)應(yīng)的內(nèi)容，這是一個(gè)異步接口。

<button type="default" @click="setStorage">存儲(chǔ)數(shù)據(jù)</button>//methods中： setStorage(){uni.setStorage({key:"id",data:80,success() {console.log("存儲(chǔ)成功")}}) }

uni.setStorageSync

同步

將data存儲(chǔ)在本地緩存中指定的key中，會(huì)覆蓋掉原來(lái)該key對(duì)應(yīng)的內(nèi)容，這是一個(gè)同步接口。

<button type="default" @click="setStorage">存儲(chǔ)數(shù)據(jù)</button>//methods中： setStorage(){uni.setStorageSync("id",100) }

uni.getStorage

異步

從本地緩存中異步獲取指定key對(duì)應(yīng)的內(nèi)容。

<button type="default" @click="getStorage">獲取數(shù)據(jù)</button>//methods中： getStorage(){uni.getStorage({key:"id",success(res){console.log("獲取成功",res.data)}}) }

uni.getStorageSync

同步

從本地緩存中同步獲取指定 key 對(duì)應(yīng)的內(nèi)容。

<button type="default" @click="getStorage">獲取數(shù)據(jù)</button>//methods中： getStorage(){let res=uni.getStorageSync("id")console.log(res) }

uni.removeStorage

異步

從本地緩存中異步移除指定 key。

<button type="default" @click="removeId">移除id數(shù)據(jù)</button>//methods中： removeId(){uni.removeStorage({key:"id",success() {console.log("刪除成功")}}) }

uni.removeStorageSync

同步

從本地緩存中同步移除指定 key。

<button type="default" @click="removeId">移除id數(shù)據(jù)</button>//methods中： removeId(){uni.removeStorageSync("id") }

十三、上傳圖片、預(yù)覽圖片

uni.chooseImage

上傳圖片

從本地相冊(cè)選擇圖片或使用相機(jī)拍照。

參數(shù)名類(lèi)型必填說(shuō)明平臺(tái)差異說(shuō)明

count	Number	否	最多可以選擇的圖片張數(shù)，默認(rèn)9	見(jiàn)下方說(shuō)明
success	Function	是	成功則返回圖片的本地文件路徑列表 tempFilePaths
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)	小程序、App

• count 值在 H5 平臺(tái)的表現(xiàn)，基于瀏覽器本身的規(guī)范。目前測(cè)試的結(jié)果來(lái)看，只能限制單選/多選，并不能限制數(shù)量。并且，在實(shí)際的手機(jī)瀏覽器很少有能夠支持多選的。

<button @click="chooseImg">上傳圖片</button>chooseImg(){uni.chooseImage({count:5,success:res=>{console.log(res)this.imgArr=res.tempFilePaths}}) },

uni.previewImage

預(yù)覽圖片

參數(shù)名類(lèi)型必填說(shuō)明平臺(tái)差異說(shuō)明

current	String/Number	詳見(jiàn)下方說(shuō)明	詳見(jiàn)下方說(shuō)明
urls	Array<String>	是	需要預(yù)覽的圖片鏈接列表
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)

<template><view><button @click="chooseImg">上傳圖片</button><image v-for="(item,index) in imgArr" :key="index" :src="item" @click="previewImg(item)"></image></view> </template><script>export default {data() {return {imgArr:[]}},methods: {chooseImg(){uni.chooseImage({count:5,success:res=>{console.log(res)this.imgArr=res.tempFilePaths}})},previewImg(current){uni.previewImage({current,urls:this.imgArr,indicator:"number"})}}} </script>

十四、條件注釋實(shí)現(xiàn)跨端顯示

跨端兼容

uni-app 已將常用的組件、JS API 封裝到框架中，開(kāi)發(fā)者按照 uni-app 規(guī)范開(kāi)發(fā)即可保證多平臺(tái)兼容，大部分業(yè)務(wù)均可直接滿足。

但每個(gè)平臺(tái)有自己的一些特性，因此會(huì)存在一些無(wú)法跨平臺(tái)的情況。

• 大量寫(xiě) if else，會(huì)造成代碼執(zhí)行性能低下和管理混亂。

• 編譯到不同的工程后二次修改，會(huì)讓后續(xù)升級(jí)變的很麻煩。

在 C 語(yǔ)言中，通過(guò) #ifdef、#ifndef 的方式，為 windows、mac 等不同 os 編譯不同的代碼。 uni-app 參考這個(gè)思路，為 uni-app 提供了條件編譯手段，在一個(gè)工程里優(yōu)雅的完成了平臺(tái)個(gè)性化實(shí)現(xiàn)。

條件編譯

條件編譯是用特殊的注釋作為標(biāo)記，在編譯時(shí)根據(jù)這些特殊的注釋，將注釋里面的代碼編譯到不同平臺(tái)。

寫(xiě)法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開(kāi)頭，以 #endif 結(jié)尾。

• #ifdef：if defined 僅在某平臺(tái)存在

• #ifndef：if not defined 除了某平臺(tái)均存在

• %PLATFORM%：平臺(tái)名稱(chēng)

<!-- #ifdef H5 --> <view>我希望只在H5頁(yè)面中看見(jiàn)</view> <!-- #endif --> <!-- #ifdef MP-WEIXIN --> <view>我希望只在微信小程序中看見(jiàn)</view> <!-- #endif -->onLoad() {// #ifdef H5console.log("我希望在h5中看見(jiàn)")// #endif// #ifdef MP-WEIXINconsole.log("我希望在微信小程序中看見(jiàn)")// #endif }<style>/* #ifdef H5 */view{color: pink;}/* #endif *//* #ifdef MP-WEIXIN */view{color: blue;}/* #endif */ </style>

十五、uni中的導(dǎo)航跳轉(zhuǎn)

利用navigator進(jìn)行跳轉(zhuǎn)

跳轉(zhuǎn)到普通頁(yè)面

<navigator url="/pages/about/about" hover-class="navigator-hover"><button type="default">跳轉(zhuǎn)到關(guān)于頁(yè)面</button> </navigator>

跳轉(zhuǎn)到tabbar頁(yè)面，要加上open-type="switchTab"

<navigator url="/pages/message/message" open-type="switchTab"><button type="default">跳轉(zhuǎn)到message頁(yè)面</button> </navigator>

open-type="redirect"，銷(xiāo)毀了頁(yè)面才進(jìn)行跳轉(zhuǎn)，沒(méi)有返回上一頁(yè)箭頭。通過(guò)生命周期函數(shù)onUnload的打印可見(jiàn)頁(yè)面卸載了。

利用編程式導(dǎo)航進(jìn)行跳轉(zhuǎn)

<button type="default" @click="goDetail">跳轉(zhuǎn)至詳情頁(yè)</button> <button type="default" @click="goMessage">跳轉(zhuǎn)至信息頁(yè)</button> <button type="default" @click="redirectDetail">跳轉(zhuǎn)到詳情頁(yè)，并關(guān)閉當(dāng)前頁(yè)</button>methods: {goDetail(){uni.navigateTo({url:"/pages/detail/detail"})},goMessage(){uni.switchTab({url:"/pages/message/message"})},redirectDetail(){uni.redirectTo({url:"/pages/detail/detail"})} }

navigator跳轉(zhuǎn)傳參

<navigator url="../detail/detail?id=80&age=19">跳轉(zhuǎn)至詳情頁(yè)</navigator>

detail.vue：options可以接收傳過(guò)來(lái)的參數(shù)

onLoad(options) {console.log(options) },

編程式跳轉(zhuǎn)傳參

goDetail(){uni.navigateTo({url:"/pages/detail/detail?id=100&age=20"}) },

detail.vue：options可以接收傳過(guò)來(lái)的參數(shù)

onLoad(options) {console.log(options) },

十六、uni-app中組件的創(chuàng)建

創(chuàng)建

在uni-app中，可以通過(guò)創(chuàng)建一個(gè)后綴名為vue的文件，即創(chuàng)建一個(gè)組件成功，其他組件可以將該組件通過(guò)impot的方式導(dǎo)入，在通過(guò)components進(jìn)行注冊(cè)即可

創(chuàng)建login組件，在component中創(chuàng)建login目錄，然后新建login.vue文件

<template><view>這是一個(gè)自定義組件</view> </template> <script> </script> <style> </style>

在其他組件中導(dǎo)入該組件并注冊(cè)

<script> import login from "@/components/test/test.vue" </sript>

注冊(cè)組件

export default {components:{test} }

組件的生命周期函數(shù)

生命周期鉤子描述H5App端微信小程序

beforeCreate	在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)(data observer)和 event/watcher 事件配置之前被調(diào)用。詳情(opens new window)	√	√	√
created	在實(shí)例創(chuàng)建完成后被立即調(diào)用。詳情(opens new window)	√	√	√
beforeMount	在掛載開(kāi)始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。詳情(opens new window)	√	√	√
mounted	實(shí)例被掛載后調(diào)用，這時(shí) Vue.createApp({}).mount() 被新創(chuàng)建的 vm.$el 替換了。詳情(opens new window)	√	√	√
beforeUpdate	數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 打補(bǔ)丁之前。詳情(opens new window)	√	√	√
updated	由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子。詳情(opens new window)	√	√	√
activated	被 keep-alive 緩存的組件激活時(shí)調(diào)用。詳情(opens new window)	√	√	x
deactivated	被 keep-alive 緩存的組件停用時(shí)調(diào)用。詳情(opens new window)	√	√	x
beforeUnmount	在卸載組件實(shí)例之前調(diào)用。在這個(gè)階段，實(shí)例仍然是完全正常的。詳情(opens new window)	√	√	√
unmounted	卸載組件實(shí)例后調(diào)用。調(diào)用此鉤子時(shí)，組件實(shí)例的所有指令都被解除綁定，所有事件偵聽(tīng)器都被移除，所有子組件實(shí)例被卸載。詳情(opens new window)	√	√	√
errorCaptured	當(dāng)捕獲一個(gè)來(lái)自子孫組件的錯(cuò)誤時(shí)被調(diào)用。此鉤子會(huì)收到三個(gè)參數(shù)：錯(cuò)誤對(duì)象、發(fā)生錯(cuò)誤的組件實(shí)例以及一個(gè)包含錯(cuò)誤來(lái)源信息的字符串。詳情(opens new window)	√	√	√
renderTracked	跟蹤虛擬 DOM 重新渲染時(shí)調(diào)用。鉤子接收 debugger event 作為參數(shù)。此事件告訴你哪個(gè)操作跟蹤了組件以及該操作的目標(biāo)對(duì)象和鍵。詳情(opens new window)	√	√	√
renderTriggered	當(dāng)虛擬 DOM 重新渲染為 triggered.Similarly 為renderTracked，接收 debugger event 作為參數(shù)。此事件告訴你是什么操作觸發(fā)了重新渲染，以及該操作的目標(biāo)對(duì)象和鍵。詳情(opens new window)	√	√	√

pages里面的組件

<template><view class="content"><test v-if="flag"></test><button type="default" @click="checkTest">切換test組件</button></view> </template><script>import test from "../../components/test.vue"export default {data() {return {title: 'Hello',flag:true}},methods: {checkTest(){this.flag=!this.flag}},components:{test:test}} </script>

components組件

<template><view id="myView">這是test組件{{num}}</view> </template><script>export default {name:"test",data() {return {num:3,intId:null};},beforeCreate() {console.log("實(shí)例已經(jīng)開(kāi)始初始化了")console.log(this.num)// 只是初始化實(shí)例，還拿不到數(shù)據(jù)，頁(yè)面也沒(méi)渲染},created() {console.log("在實(shí)例創(chuàng)建完成后被立即調(diào)用")console.log(this.num)this.intId = setInterval(()=>{console.log("執(zhí)行定時(shí)器")},1000)},beforeMount() {console.log("掛載之前",document.getElementById("myView"))// 可以看到掛載之前，是還沒(méi)渲染的},mounted() {console.log("mounted",document.getElementById("myView"))// 頁(yè)面渲染完成},destroyed() {console.log("組件銷(xiāo)毀了")clearInterval(this.intId)}} </script>

十七、組件的通訊

父組件給子組件傳值

通過(guò)props來(lái)接受外界傳遞到組件內(nèi)部的值。

父組件傳值：

<test v-if="flag" :msg="msg"></test><script>exprot default{data() {return {msg: 'Hello',flag:true}}} </script>

子組件接收：

<template><view>這是一個(gè)父組件傳過(guò)來(lái)的數(shù)據(jù){{msg}}</view> </template><script>exprot default{props:["msg"]} </script>

子組件給父組件傳值

通過(guò)$emit觸發(fā)事件進(jìn)行傳遞參數(shù)

子組件傳值：

<button @click="sendNum">給父組件傳值</button><script>export default {data() {return {num:3};},methods:{sendNum(){console.log("給父親傳值")this.$emit("myEven",this.num)}},} </script>

父組件接收：

<test @myEven="getNum"></test> <view>這是子組件傳遞過(guò)來(lái)的數(shù)據(jù){{num}}</view><script>import test from "../../components/test.vue"export default {data() {return {num:0}},methods: {getNum(num){console.log(num)this.num=num}},components:{test:test}} </script>

components組件之間傳值

a.vue傳值

<template><view>這是a組件：<button @click="addNum">修改b組件的數(shù)據(jù)</button></view> </template><script>export default {name:"a",methods:{addNum(){uni.$emit("updateNum",10)}}} </script>

b.vue接收

<template><view>這是b組件的數(shù)據(jù)：{{num}}</view> </template><script>export default {name:"b",data() {return {num:0};},created() {uni.$on("updateNum",(n)=>{this.num+=n})}} </script>

index.vue父組件把子組件渲染在頁(yè)面

<template><view><test-a></test-a><test-b></test-b></view> </template><script>import testa from "../../components/a.vue"import testb from "../../components/b.vue"export default {components:{"test-a":testa,"test-b":testb}} </script>

十八、uni-ui

uni官網(wǎng)下載安裝ui組件到HBuilderX的項(xiàng)目里面。

然后就可以直接在template 中使用組件。

<view><uni-calendar :insert="true":lunar="true" :start-date="'2022-1-1'":end-date="'2022-12-31'"@change="change"/> </view>//要注意示例代碼的觸發(fā)事件 methods:{change(e){console.log("觸發(fā)了change",e)} }

總結(jié)

以上是生活随笔為你收集整理的uni-app学习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。