一、課程介紹

課程流程介紹

基礎部分：

環境搭建

頁面外觀配置

數據綁定

uni-app的生命周期

組件的使用

條件注釋跨端兼容

uni中的事件

導航跳轉

組件創建和通訊

項目：

黑馬商城項目

uni-app介紹

uni-app是一個使用vue.js開發所有前端應用的框架。一套代碼，可發布到IOS、Android、H5以及各種小程序等多個平臺。

即使不跨端，uni-app同時也是更好的小程序開發框架。

二、準備

環境搭建：HbuiderX

安裝微信開發者工具，用于打包后小程序預覽。

介紹項目目錄和文件作用

pages.json文件用來對uni-app進行全局配置，決定頁面文件的路徑、窗口樣式、原生的導航欄、底部的原生tabbar等。

manifest.json文件是應用的配置文件，用于指定應用的名稱、圖標、權限等。

App.vue是我們的根組件，所有頁面都是在App.vue下進行切換的，是頁面入口文件，可以調用應用的生命周期函數。

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

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

unpacksge就是打包目錄，在這里有各個平臺的打包文件

pages所有的頁面存放目錄

static靜態資源目錄，例如圖片等

components組件存放目錄

開發規范

為了實現多端兼容，總和考慮編譯速度、運行性能等因素，uni-app約定了如下開發規范：

頁面文件遵循Vue單文件組件(SFC)規范

組件標簽靠近小程序規范，詳見uni-app組件規范

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

數據綁定及事件處理同vue.js規范，同時補充了App及頁面的生命周期

為兼容多端運行，建議使用flex布局進行開發

三、globalstyle全局外觀配置

全局配置

用于設置應用的狀態欄、導航欄、標題、窗口背景色等

屬性類型默認值描述

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

頁面配置

{"pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/message/message","style":{"navigationBarTitleText":"信息頁","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

如果應用是一個多tab應用，可以通過tabBar配置項指定tab欄得表現，以及tab切換時顯示得對應頁。

當tabbar設置了position為top時，將不會顯示icon圖標。

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

屬性說明：

屬性類型必填默認值描述平臺差異說明

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

其中，list接收一個數組，數組中的每個項都是一個對象，其屬性值如下：

屬性類型必填說明

pagePath	String	是	頁面路徑，必須在pages中先定義
text	String	是	tab上按鈕文字，在5+APP和H5平臺為非必填。例如中間可放一個沒有文字的+號圖標
iconPath	String	否	圖片路徑，icon大小限制為40kb，建議尺寸為81px*81px
selectedIconPath	String	否	選中時的圖片路徑，icon大小限制為40kb,建議尺寸為81px*81px,，當postion為top時，此參數無效

"tabBar":{"color":"#A0522D","selectedColor":"#B3EE3A","backgroundColor":"#FFFFFF","borderStyle":"black","position":"top","list":[{"pagePath":"pages/index/index","text":"首頁","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啟動模式配置

啟動模式配置，僅開發期間生效，用于模擬直達頁面的場景。如：小程序轉發后，用戶點擊所打開的頁面。

屬性說明：

屬性類型是否必填描述

current	Number	是	當前激活的模式，list節點的索引值
list	Array	是	啟動模式列表

list說明：

屬性類型是否必填描述

name	String	是	啟動模式名稱
path	String	是	啟動頁面路徑
query	String	否	啟動參數，可在頁面的onLoad函數里獲得

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

四、組件的基本使用

就像HTML中的div、p、span等標簽的作用是一樣的。

text文本組件

屬性：

屬性類型默認值必填說明

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

space值：

ensp 中文字符空格一半 emsp 中文字符空格大小 nbsp 根據字體設置的空格大小

<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視圖容器組件

相當于div。

屬性：

屬性名類型默認值說明

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

hover-stop-propagation阻止冒泡

:hover-start-time和:hover-stay-time后面寫數字，所以前面要加冒號。

<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>我是一個大盒子</view></view> </view>

button按鈕組件

size="default" 默認大小

="mini" 小按鈕

type="default" 白色

="warn" 紅色

="primary" 微信小程序、360小程序為綠色，App、H5、百度小程序、支付寶小程序、飛書小程序、快應用為藍色，字節跳動小程序為紅色，QQ小程序為淺藍色。如想在多端統一顏色，請改用default，然后自行寫樣式.

plain 鏤空

disabled 是否禁用，禁用不可點

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

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

image圖片組件

屬性名類型默認值說明平臺差異說明

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

• <image> 組件默認寬度 300px、高度 225px；app-nvue平臺，暫時默認為屏幕寬度

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

五、uni-app中的樣式

rpx即響應式即響應式px,一種根據屏幕寬度自適應的動態單位。以750寬的屏幕為基準，75Ppx恰好為屏幕寬度。屏幕變寬，rpx實際顯示效果會等比放大。

使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用；表示語句結束

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

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

page相當于body節點

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

uni-app支持使用字體圖標，使用方式與普通web項目相同，需要注意以下幾點：

字體文件小于40kb,uni-app會自動將其轉化為base64格式；

字體文件大于等于40kb,需開發者自己轉換，否則使用將不生效；

字體文件的引用路徑推薦使用以~@開頭的絕對路徑。

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

如何使用scss或者less

只要下載相關插件，就能自動編譯

六、uni-app中的數據綁定

在頁面中需要定義數據，和我們之前的vue一模一樣，直接在data中定義數據即可。

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

插值表達式的使用

利用插值表達式渲染基本數據

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

在插值表達式中使用三元運算

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

基本運算

<view>{{1+1}}</view> <template><view><view>數據綁定的學習</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動態綁定屬性

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

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

利用v-bind進行渲染

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

還可以縮寫成：

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

v-for遍歷

<template><view><view>數據綁定的學習</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">序號：{{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:"小沈陽",age:20,id:4}]}},methods: {}} </script>

七、uni中的事件

事件綁定

事件傳參

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

$event是指傳入事件參數

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

八、uni的生命周期

應用的生命周期

生命周期的概念：一個對象從創建、運行、銷毀的整個過程被成為生命周期。 生命周期函數：在生命周期中每個階段會伴隨著每一個函數的觸發，這些函數被稱為生命周期函數

uni-app支持如下應用生命周期函數

函數名說明

onLaunch	當uni-app初始化完成時觸發(全局只觸發一次)
onShow	當uni-app啟動，或從后臺進入前臺顯示
onHide	當uni-app從前臺進入后臺
onError	當uni-app報錯時觸發

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("出現異常了",err)}} </script>

頁面的生命周期

uni-app支持如下頁面生命周期函數：

函數名說明說明

onLoad	監聽頁面加載，其參數為上個頁面傳遞的數據，參數類型為Object(用于頁面傳參)
onShow	監聽頁面顯示。頁面每次出現在屏幕上都觸發，包括從下級頁面點返回露出當前頁面
onReady	監聽頁面初次渲染完成
onHide	監聽頁面隱藏
onUnload	監聽頁面卸載
onResize	監聽窗口尺寸變化
onPullDownRefresh	監聽用戶下拉動作，一般用于下拉刷新	九、
onReachBottom	頁面滾動到底部的事件（不是scroll-view滾到底），常用于下拉下一頁數據。具體見下方注意事項

• tabbar 的頁面展現過一次后就保留在內存中，再次切換 tabbar 頁面，只會觸發每個頁面的onShow，不會再觸發onLoad。

下拉刷新不推薦在全局寫，

哪個頁面需要就在哪個頁面onPullDownRefresh監聽，并且頁面單獨配置"enablePullDownRefresh":true

九、下拉刷新

開啟下拉刷新

在uni-app中有兩種方式開啟下拉刷新：

需要在pges.json里，找到的當前頁面的pages節點，并在style選項中開啟enablePullDownRefresh

通過調用uni.startPullDownRefresh方法來開啟下拉刷新

通過配置文件開啟

創建list頁面進行演示：

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

監聽下拉刷新

通過onPullDownRefresh可以監聽到下拉刷新的動作

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

關閉下拉刷新

uni.stopPullDownRefresh()

停止當前頁面下拉刷新

<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","測試","大數據"]}},onPullDownRefresh() {console.log("觸發了下拉刷新")setTimeout(()=>{this.list=["測試","大數據","前端","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","測試","大數據","前端","java","UI","測試","大數據"]}},onPullDownRefresh() {console.log("觸發了下拉刷新")setTimeout(()=>{this.list=["測試","大數據","前端","java","UI"]uni.stopPullDownRefresh()},2000)},onReachBottom() {console.log("頁面觸底了")this.list=[...this.list,...["測試","大數據","前端","java"]]},methods: {pullDown(){uni.startPullDownRefresh()}}} </script><style> .box-item{height: 100px;line-height: 100px; } </style>

十一、網絡請求

在uni中可以調用uni.request方法進行請求網絡請求 需要注意的是：在小程序中網絡相關的API在使用前需要配置域名白名單。

發生get請求

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

十二、數據緩存

uni.setStorage

異步

將數據存儲在本地緩存中指定的key中，會覆蓋掉原來該key對應的內容，這是一個異步接口。

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

uni.setStorageSync

同步

將data存儲在本地緩存中指定的key中，會覆蓋掉原來該key對應的內容，這是一個同步接口。

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

uni.getStorage

異步

從本地緩存中異步獲取指定key對應的內容。

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

uni.getStorageSync

同步

從本地緩存中同步獲取指定 key 對應的內容。

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

uni.removeStorage

異步

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

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

uni.removeStorageSync

同步

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

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

十三、上傳圖片、預覽圖片

uni.chooseImage

上傳圖片

從本地相冊選擇圖片或使用相機拍照。

參數名類型必填說明平臺差異說明

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

• count 值在 H5 平臺的表現，基于瀏覽器本身的規范。目前測試的結果來看，只能限制單選/多選，并不能限制數量。并且，在實際的手機瀏覽器很少有能夠支持多選的。

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

uni.previewImage

預覽圖片

參數名類型必填說明平臺差異說明

current	String/Number	詳見下方說明	詳見下方說明
urls	Array<String>	是	需要預覽的圖片鏈接列表
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數

<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>

十四、條件注釋實現跨端顯示

跨端兼容

uni-app 已將常用的組件、JS API 封裝到框架中，開發者按照 uni-app 規范開發即可保證多平臺兼容，大部分業務均可直接滿足。

但每個平臺有自己的一些特性，因此會存在一些無法跨平臺的情況。

• 大量寫 if else，會造成代碼執行性能低下和管理混亂。

• 編譯到不同的工程后二次修改，會讓后續升級變的很麻煩。

在 C 語言中，通過 #ifdef、#ifndef 的方式，為 windows、mac 等不同 os 編譯不同的代碼。 uni-app 參考這個思路，為 uni-app 提供了條件編譯手段，在一個工程里優雅的完成了平臺個性化實現。

條件編譯

條件編譯是用特殊的注釋作為標記，在編譯時根據這些特殊的注釋，將注釋里面的代碼編譯到不同平臺。

寫法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開頭，以 #endif 結尾。

• #ifdef：if defined 僅在某平臺存在

• #ifndef：if not defined 除了某平臺均存在

• %PLATFORM%：平臺名稱

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

十五、uni中的導航跳轉

利用navigator進行跳轉

跳轉到普通頁面

<navigator url="/pages/about/about" hover-class="navigator-hover"><button type="default">跳轉到關于頁面</button> </navigator>

跳轉到tabbar頁面，要加上open-type="switchTab"

<navigator url="/pages/message/message" open-type="switchTab"><button type="default">跳轉到message頁面</button> </navigator>

open-type="redirect"，銷毀了頁面才進行跳轉，沒有返回上一頁箭頭。通過生命周期函數onUnload的打印可見頁面卸載了。

利用編程式導航進行跳轉

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

navigator跳轉傳參

<navigator url="../detail/detail?id=80&age=19">跳轉至詳情頁</navigator>

detail.vue：options可以接收傳過來的參數

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

編程式跳轉傳參

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

detail.vue：options可以接收傳過來的參數

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

十六、uni-app中組件的創建

創建

在uni-app中，可以通過創建一個后綴名為vue的文件，即創建一個組件成功，其他組件可以將該組件通過impot的方式導入，在通過components進行注冊即可

創建login組件，在component中創建login目錄，然后新建login.vue文件

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

在其他組件中導入該組件并注冊

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

注冊組件

export default {components:{test} }

組件的生命周期函數

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

beforeCreate	在實例初始化之后，數據觀測(data observer)和 event/watcher 事件配置之前被調用。詳情(opens new window)	√	√	√
created	在實例創建完成后被立即調用。詳情(opens new window)	√	√	√
beforeMount	在掛載開始之前被調用：相關的 render 函數首次被調用。詳情(opens new window)	√	√	√
mounted	實例被掛載后調用，這時 Vue.createApp({}).mount() 被新創建的 vm.$el 替換了。詳情(opens new window)	√	√	√
beforeUpdate	數據更新時調用，發生在虛擬 DOM 打補丁之前。詳情(opens new window)	√	√	√
updated	由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。詳情(opens new window)	√	√	√
activated	被 keep-alive 緩存的組件激活時調用。詳情(opens new window)	√	√	x
deactivated	被 keep-alive 緩存的組件停用時調用。詳情(opens new window)	√	√	x
beforeUnmount	在卸載組件實例之前調用。在這個階段，實例仍然是完全正常的。詳情(opens new window)	√	√	√
unmounted	卸載組件實例后調用。調用此鉤子時，組件實例的所有指令都被解除綁定，所有事件偵聽器都被移除，所有子組件實例被卸載。詳情(opens new window)	√	√	√
errorCaptured	當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。詳情(opens new window)	√	√	√
renderTracked	跟蹤虛擬 DOM 重新渲染時調用。鉤子接收 debugger event 作為參數。此事件告訴你哪個操作跟蹤了組件以及該操作的目標對象和鍵。詳情(opens new window)	√	√	√
renderTriggered	當虛擬 DOM 重新渲染為 triggered.Similarly 為renderTracked，接收 debugger event 作為參數。此事件告訴你是什么操作觸發了重新渲染，以及該操作的目標對象和鍵。詳情(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("實例已經開始初始化了")console.log(this.num)// 只是初始化實例，還拿不到數據，頁面也沒渲染},created() {console.log("在實例創建完成后被立即調用")console.log(this.num)this.intId = setInterval(()=>{console.log("執行定時器")},1000)},beforeMount() {console.log("掛載之前",document.getElementById("myView"))// 可以看到掛載之前，是還沒渲染的},mounted() {console.log("mounted",document.getElementById("myView"))// 頁面渲染完成},destroyed() {console.log("組件銷毀了")clearInterval(this.intId)}} </script>

十七、組件的通訊

父組件給子組件傳值

通過props來接受外界傳遞到組件內部的值。

父組件傳值：

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

子組件接收：

<template><view>這是一個父組件傳過來的數據{{msg}}</view> </template><script>exprot default{props:["msg"]} </script>

子組件給父組件傳值

通過$emit觸發事件進行傳遞參數

子組件傳值：

<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>這是子組件傳遞過來的數據{{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組件的數據</button></view> </template><script>export default {name:"a",methods:{addNum(){uni.$emit("updateNum",10)}}} </script>

b.vue接收

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

index.vue父組件把子組件渲染在頁面

<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官網下載安裝ui組件到HBuilderX的項目里面。

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

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

總結

以上是生活随笔為你收集整理的uni-app学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。