項(xiàng)目二uni-app全局文件

項(xiàng)目二uni-app全局文件

項(xiàng)目任務(wù)：任務(wù)1pages.json頁(yè)面路由配置任務(wù)2manifest.json應(yīng)用配置任務(wù)3App.vue全局配置任務(wù)4綜合案例01任務(wù)1pages.json頁(yè)面路由配置

任務(wù)1pages.json頁(yè)面路由配置

pages.json是uni-app的頁(yè)面全局路由配置文件，類似于微信小程序中app.json的頁(yè)面管理部分。pages.json可用于設(shè)置頁(yè)面文件的路徑、窗口樣式、原生的導(dǎo)航欄、底部的原生tabBar等。

2.1.1pages

uni-app通過(guò)pages節(jié)點(diǎn)配置應(yīng)用由哪些頁(yè)面組成，pages節(jié)點(diǎn)接收一個(gè)數(shù)組，數(shù)組每個(gè)項(xiàng)都是一個(gè)對(duì)象。pages屬性屬性類型默認(rèn)值描述pathString

配置頁(yè)面路徑styleObject

配置頁(yè)面窗口表現(xiàn)，用于設(shè)置每個(gè)頁(yè)面的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色等needLoginBooleanfalse是否需要登錄才可訪問(wèn)在項(xiàng)目一中，配置文件pages.json中添加了如下my-demo.vue頁(yè)面的路由配置。其中設(shè)置了路由path和樣式style，style中設(shè)置了導(dǎo)航欄標(biāo)題文字內(nèi)容配置項(xiàng)navigationBarTitleText值為my-demo。除了navigationBarTitleText配置項(xiàng)之外，style中還有很多其他配置項(xiàng)。

2.1.1pages

這里新建一個(gè)名為uniappdemo2的項(xiàng)目，將index.vue的路由配置文件page.json中的pages改成如下代碼，配置導(dǎo)航欄標(biāo)題文字顏色及狀態(tài)欄前景顏色、導(dǎo)航欄背景色、開(kāi)啟下拉刷新窗口以及下拉刷新窗口背景色。"pages":[ { "path":"pages/index/index", "style":{ "navigationBarTitleText":"uni-app",//導(dǎo)航欄標(biāo)題文字內(nèi)容

//導(dǎo)航欄標(biāo)題文字顏色及狀態(tài)欄前景顏色，僅支持black/white "navigationBarTextStyle":"white", //導(dǎo)航欄背景顏色（同狀態(tài)欄背景色）

"navigationBarBackgroundColor":"#000080", "backgroundColor":"#006400",//下拉刷新窗口背景色

"enablePullDownRefresh":true//是否開(kāi)啟下拉刷新窗口

}, }],

2.1.1pages

在微信小程序中運(yùn)行uniappdemo2項(xiàng)目，可以看到如下頁(yè)面。uni-app的導(dǎo)航欄高度在Web和App端統(tǒng)一為44px，小程序端各自不同。

2.1.1pagespages的使用注意以下幾點(diǎn)。1.pages節(jié)點(diǎn)的第一項(xiàng)為應(yīng)用入口頁(yè)（即首頁(yè)）。2.應(yīng)用中新增/減少頁(yè)面，都需要對(duì)pages數(shù)組進(jìn)行修改，否則頁(yè)面不能被外界訪問(wèn)。3.pages中的path路徑文件名不需要寫(xiě)后綴，框架會(huì)自動(dòng)尋找路徑下的頁(yè)面資源。

2.1.2globalStyleglobalStyle用于全局設(shè)置用于設(shè)置應(yīng)用的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色等。globalStyle和page中style設(shè)置的配置項(xiàng)有大部分相似，如果一個(gè)配置項(xiàng)同時(shí)在globalStyle和page的style中配置時(shí)，style中的配置項(xiàng)值會(huì)覆蓋globalStyle配置項(xiàng)值。例如可以將uniappdemo2項(xiàng)目的pages.json文件中內(nèi)容修改如下，刪除pages中原有的style配置，在globalStyle中添加navigationBarTextStyle等配置項(xiàng)的配置。{

"pages":[

{

"path":"pages/index/index",

"style":{},

}

],

"globalStyle":{

"navigationBarTextStyle":"black",

"navigationBarTitleText":"uni-app",

"navigationBarBackgroundColor":"#F8F8F8",

"backgroundColor":"#F8F8F8"

},}

2.1.2globalStyle在微信小程序中運(yùn)行uniappdemo2項(xiàng)目，可以看到頁(yè)面整體風(fēng)格變成了白色。

2.1.2globalStyle如果在pages中style添加navigationBarTitleText配置，設(shè)置導(dǎo)航欄標(biāo)題文字內(nèi)容為index。{

"pages":[

{

"path":"pages/index/index",

"style":{

"navigationBarTitleText":"index"http://導(dǎo)航欄標(biāo)題文字內(nèi)容

},

"needLogin":false//默認(rèn)為false，不需要登錄即可訪問(wèn)

}

],

"globalStyle":{

"navigationBarTextStyle":"black",

"navigationBarTitleText":"uni-app",

"navigationBarBackgroundColor":"#F8F8F8",

"backgroundColor":"#F8F8F8"

},

"uniIdRouter":{}}

2.1.2globalStyle此時(shí)頁(yè)面標(biāo)題就變成了index。page的style中的navigationBarTitleText配置覆蓋了globalStyle中的navigationBarTitleText配置。

2.1.3easycomeasycom是一種組件自動(dòng)注冊(cè)機(jī)制，可以讓開(kāi)發(fā)者更加方便地使用和管理組件。傳統(tǒng)vue組件，需要安裝、引用、注冊(cè)，三個(gè)步驟后才能使用組件。easycom將其精簡(jiǎn)為一步。只要組件路徑符合規(guī)范，就可以不用引用、注冊(cè)，直接在頁(yè)面中使用。easycom約定了以下兩個(gè)組件路徑規(guī)范條件，只要組件路徑滿足其中一個(gè)條件就可以直接使用。1.組件可安裝在項(xiàng)目根目錄的components目錄下，并符合components/組件名稱/組件名稱.vue2.組件可安裝在uni_modules下，路徑為uni_modules/插件ID/components/組件名稱/組件名稱.vue。

2.1.3easycom在項(xiàng)目中easycom的兩種組件路徑規(guī)范條件示例如下。┌─components│

└─comp-a│

└─comp-a.vue└─uni_modules

└─uni-list

//插件ID

└─components

└─uni-list

└─uni-list.vue所有在uni-app插件市場(chǎng)下載的組件只要路徑符合easycom組件路徑規(guī)范條件，均可直接使用。用戶自定義組件只要路徑符合組件路徑規(guī)范條件，也可直接使用。在項(xiàng)目打包時(shí)，不管components目錄下有多少組件，easycom會(huì)自動(dòng)剔除應(yīng)用中沒(méi)有使用的組件，實(shí)現(xiàn)按需打包。

2.1.3easycom下面在uniappdemo2項(xiàng)目根目錄下新建一個(gè)components目錄，在components目錄下創(chuàng)建一個(gè)uni-customer目錄，在uni-customer目錄下新建一個(gè)自定義組件uni-customer.vue，在其中輸入如下代碼。<template> <view>

這是uni-customer組件

</view></template><script>

</script><style>

</style>

2.1.3easycom修改index.vue中的代碼，在其中直接引入uni-customer.vue組件。uni-customer.vue組件不需要import，也不需要在components內(nèi)注冊(cè)。<template> <viewclass="content"> <imageclass="logo"src="/static/logo.png"></image> <viewclass="text-area"> <!--直接引入uni-customer組件，不需要import， 也不需要在components內(nèi)注冊(cè)--> <uni-customer></uni-customer> </view> </view></template><script> //刪除原有代碼</script><style> //樣式代碼省略</style>

2.1.3easycom在微信小程序中運(yùn)行uniappdemo2項(xiàng)目，頁(yè)面中能正常顯示“這是uni-customer組件”，證明uni-customer組件被正常引入了。

2.1.3easycom如果將組件放在項(xiàng)目根目錄下的uni_modules目錄下，該組件uni-customer1.vue也能直接使用。

2.1.3easycomuni-app應(yīng)用中的easycom是自動(dòng)開(kāi)啟的，不需要手動(dòng)開(kāi)啟。easycom內(nèi)部提供了兩個(gè)屬性autoscan和custom。easycom的autoscan和custom屬性屬性類型默認(rèn)值描述autoscanBooleantrue是否開(kāi)啟自動(dòng)掃描，開(kāi)啟后將會(huì)自動(dòng)掃描符合components/組件名稱/組件名稱.vue目錄結(jié)構(gòu)的組件customObject

以正則方式自定義組件匹配規(guī)則。如果autoscan不能滿足需求，可以使用custom自定義匹配規(guī)則

2.1.3easycom如果組件路徑不符合easycom組件路徑規(guī)范，可在pages.json的easycom中設(shè)置custom屬性自行定義路徑規(guī)范。如下代碼就自定義了一個(gè)路徑規(guī)范，設(shè)置項(xiàng)目components目錄下的所有Vue組件不需要引入和注冊(cè)即可直接使用。"easycom":{

"autoscan":true,

"custom":{

"^(.*)":"@/components/$1.vue",//匹配components目錄內(nèi)的所有vue文件

}}

2.1.3easycomeasycom的使用注意以下幾點(diǎn)。1.easycom引入的組件無(wú)需在頁(yè)面內(nèi)import，也不需要在components內(nèi)聲明，也不需要在pages.json的pages節(jié)點(diǎn)中配置路由，即可在任意頁(yè)面使用。2.easycom引入組件不是全局引入，而是局部引入。例如在H5端只有加載相應(yīng)頁(yè)面才會(huì)加載使用的組件。3.在組件名完全一致的情況下，easycom引入的組件優(yōu)先級(jí)低于手動(dòng)引入的。4.直接在pages.json內(nèi)修改easycom不會(huì)觸發(fā)應(yīng)用重新編譯，需要改動(dòng)頁(yè)面內(nèi)容才會(huì)觸發(fā)。5.easycom只處理vue組件，不處理小程序?qū)Ｓ媒M件（如微信的wxml格式組件），不處理后綴為.nvue的組件。6.在nvue頁(yè)面里引用.vue組件，同樣支持easycom規(guī)范。

2.1.4tabBartabBar（導(dǎo)航欄）是微信小程序中的一種常見(jiàn)導(dǎo)航方式，通常位于頁(yè)面的底部，用于切換不同的頁(yè)面或功能模塊。tabBar通常由若干個(gè)tabBarItem（標(biāo)簽項(xiàng)）組成，每個(gè)tabBarItem表示一個(gè)導(dǎo)航選項(xiàng)。用戶點(diǎn)擊不同的tabBarItem，小程序會(huì)切換到對(duì)應(yīng)的頁(yè)面或功能。每個(gè)TabBarItem通常包含一個(gè)圖標(biāo)和一個(gè)文字標(biāo)簽。如果uni-app應(yīng)用是一個(gè)多Tab應(yīng)用，可以直接在pages.json中配置tabBar信息渲染原生Tab。在pages.json中可通過(guò)tabBar配置項(xiàng)指定一級(jí)導(dǎo)航欄，以及Tab切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。所有的tabBar圖標(biāo)可以從阿里云圖標(biāo)庫(kù)iconfont網(wǎng)站下載。

2.1.4tabBartabBar常用配置項(xiàng)屬性類型必填描述colorHexColor是tabBar上的文字默認(rèn)顏色selectedColorHexColor是tabBar上的文字選中時(shí)的顏色backgroundColorHexColor是tabBar的背景色borderStyleString否tabBar上邊框的顏色，默認(rèn)值為black，可選值black/white，也支持其他顏色值listArray是tabBar的列表，詳見(jiàn)表2-4list屬性說(shuō)明，Tab數(shù)量最少2個(gè)，最多5個(gè)positionString否默認(rèn)值為bottom，可選值bottom/top，僅小程序支持midButtonObject否tabBar列表的中間按鈕，list項(xiàng)必須為偶數(shù)，僅在Web和App端有效

2.1.4tabBar上表list為一個(gè)數(shù)組，數(shù)組中的每個(gè)項(xiàng)都是一個(gè)對(duì)象。list常用配置項(xiàng)屬性類型必填描述pagePathString是Tab跳轉(zhuǎn)的頁(yè)面路徑，必須在pages中先定義textString是Tab上按鈕文字，在App和web平臺(tái)為非必填。例如中間可放一個(gè)沒(méi)有文字的+號(hào)圖標(biāo)iconPathString否圖片路徑，icon大小限制為40kb，建議尺寸為81px*81px，當(dāng)position為top時(shí)，此參數(shù)無(wú)效，不支持網(wǎng)絡(luò)圖片，不支持字體圖標(biāo)selectedIconPathString否選中時(shí)的圖片路徑，icon大小限制為40kb，建議尺寸為81px*81px，當(dāng)position為top時(shí)，此參數(shù)無(wú)效visibleBoolean否Tab是否顯示，默認(rèn)顯示

2.1.4tabBar

下面在uniappdemo2項(xiàng)目的pages目錄下新建3個(gè)tabBar相關(guān)頁(yè)面，分別是購(gòu)物車頁(yè)面cart.vue、時(shí)鐘頁(yè)面time.vue和個(gè)人資料頁(yè)面my.vue。在pages.json文件中添加如下tabBar配置。 "tabBar":{ "color":"#7A7E83", "selectedColor":"#3cc51f", "borderStyle":"black", "backgroundColor":"#ffffff", "list":[{ "pagePath":"pages/index/index", "iconPath":"static/images/icon-test2.png", "selectedIconPath":"static/images/icon-test3.png", "text":"首頁(yè)" },{ "pagePath":"pages/cart/cart", "iconPath":"static/images/icon-test11.png", "selectedIconPath":"static/images/icon-test10.png", "text":"購(gòu)物車" },//剩余代碼見(jiàn)下一頁(yè)

2.1.4tabBar{ "pagePath":"pages/time/time", "iconPath":"static/images/icon-test4.png", "selectedIconPath":"static/images/icon-test5.png", "text":"時(shí)鐘" },{ "pagePath":"pages/my/my", "iconPath":"static/images/icon-test8.png", "selectedIconPath":"static/images/icon-test9.png", "text":"個(gè)人資料" }] }

2.1.4tabBar運(yùn)行uniappdemo2項(xiàng)目，頁(yè)面效果如下。

2.1.4tabBar

在小程序中可以在tabBar內(nèi)添加配置"position":"top"設(shè)置tabBar導(dǎo)航欄在頁(yè)面上部，但是tab不顯示圖標(biāo)。position的top值僅微信小程序端支持，APP和Web端不支持。

2.1.4tabBar

在開(kāi)發(fā)APP和Web端可以添加如下midButton配置用于在導(dǎo)航欄中間添加一個(gè)按鈕。midButton中間按鈕較為特殊沒(méi)有pagePath屬性，需調(diào)用API接口onTabBarMidButtonTap監(jiān)聽(tīng)點(diǎn)擊事件，并自行編寫(xiě)事件處理邏輯代碼。midButton僅支持APP和Web端，小程序端不支持。"midButton":{ "text":"按鈕", "iconPath":"static/images/icon-test.png"},

2.1.4tabBar

tabBar的使用有以下幾點(diǎn)注意事項(xiàng)。

1.Web和APP端的tabBar高度統(tǒng)一為50px，可手動(dòng)修改，小程序端tabBar各自不一樣。

2.tabBar屬性中的list數(shù)組第一項(xiàng)路由必須和pages列表中第一項(xiàng)首頁(yè)的路由相同，例如頁(yè)面路由都為"pages/index/index"，否則tabBar不顯示。

3.tabBar頁(yè)面展現(xiàn)過(guò)一次后就保留在內(nèi)存中，再次切換tabBar頁(yè)面，只顯示頁(yè)面不再重新加載。

4.uni-app支持自定義tabBar，但是在App和小程序端自定義tabBar的性能體驗(yàn)會(huì)低于原生tabBar，因此官方建議App和小程序端非必要不要自定義tabBar。Web端不存在原生tabBar性能更高的概念，一般tabBar在頁(yè)面頂部，可直接使用custom-tab-bar組件實(shí)現(xiàn)。

5.應(yīng)用中原生的tabBar只能有一個(gè)且在首頁(yè)使用，二級(jí)頁(yè)面如需使用Tab，需自行編寫(xiě)View組件實(shí)現(xiàn)。

6.利用代碼跳轉(zhuǎn)到TabBar頁(yè)面時(shí)，API只能使用uni.switchTab，不能使用uni.navigateTo、uni.redirectTo。如果使用navigator組件跳轉(zhuǎn)必須設(shè)置屬性open-type="switchTab"。

2.1.5condition

condition是啟動(dòng)模式配置，僅開(kāi)發(fā)期間生效。一般項(xiàng)目啟動(dòng)后默認(rèn)跳轉(zhuǎn)首頁(yè)，配置condition能使項(xiàng)目啟動(dòng)直接跳轉(zhuǎn)到某些具體頁(yè)面。這在頁(yè)面調(diào)試時(shí)是非常有用的，能夠省去手動(dòng)操作一級(jí)級(jí)跳轉(zhuǎn)頁(yè)面的過(guò)程。condition內(nèi)部配置項(xiàng)屬性類型必填描述currentNumber是設(shè)置當(dāng)前啟動(dòng)使用list列表中的哪個(gè)頁(yè)面，值為索引，從0開(kāi)始listArray是啟動(dòng)模式列表list為一個(gè)數(shù)組，數(shù)組中的每個(gè)項(xiàng)都是一個(gè)對(duì)象。list內(nèi)部配置項(xiàng)屬性類型必填描述nameString是啟動(dòng)模式名稱pathString是啟動(dòng)頁(yè)面路徑queryString否頁(yè)面啟動(dòng)參數(shù)，可在頁(yè)面的onLoad函數(shù)里獲得

2.1.5condition

下面在uniappdemo2項(xiàng)目的pages.json文件中添加如下condition配置，設(shè)置應(yīng)用啟動(dòng)時(shí)自動(dòng)跳轉(zhuǎn)到cart.vue，并且在頁(yè)面加載時(shí)傳遞參數(shù)兩個(gè)示例參數(shù)interval和autoplay。

"condition":{//模式配置，僅開(kāi)發(fā)期間生效

"current":0,//當(dāng)前激活的模式，設(shè)置為0對(duì)應(yīng)于使用cart頁(yè)面

"list":[{

"name":"cart",//模式名稱

"path":"pages/cart/cart",//啟動(dòng)頁(yè)面，必選

//向啟動(dòng)頁(yè)面?zhèn)鬟f的參數(shù)，在頁(yè)面的onLoad函數(shù)里面得到

"query":"interval=4000&autoplay=false"

},

{

"name":"my",

"path":"pages/my/my"

}

]

}

2.1.5condition

將cart.vue頁(yè)面代碼修改如下，在其中使用onLoad函數(shù)在頁(yè)面加載時(shí)接收傳遞的interval和autoplay兩個(gè)參數(shù)。<template> <view> <text>購(gòu)物車頁(yè)面</text> </view></template><scriptsetup> import{onLoad}from'@dcloudio/uni-app' onLoad((option)=>{ console.log(option)//option用于接收傳遞的參數(shù) })</script><style></style>

2.1.5condition

在微信開(kāi)發(fā)者工具中運(yùn)行uniappdemo2項(xiàng)目，在界面右上角手動(dòng)改變編譯模式，下拉選擇“cart”，頁(yè)面即可直接跳轉(zhuǎn)到cart.vue頁(yè)面。如果在App里真機(jī)運(yùn)行項(xiàng)目啟動(dòng)后自動(dòng)跳轉(zhuǎn)到cart.vue頁(yè)面，同時(shí)控制臺(tái)打印出interval和autoplay的參數(shù)值。這樣調(diào)試一些深層次的頁(yè)面就不用一層層手動(dòng)跳轉(zhuǎn)了。

2.1.6subPackages

subPackages用于配置頁(yè)面的分組加載，來(lái)源于小程序的分包加載機(jī)制。因?yàn)樾〕绦蛴畜w積和資源加載限制，各家小程序平臺(tái)提供了分包方式，優(yōu)化小程序的下載和啟動(dòng)速度。分包時(shí)主包一般放置默認(rèn)啟動(dòng)頁(yè)面（TabBar所在頁(yè)面）以及所有分包都需用到的一些公共資源如JS腳本，而分包資源就根據(jù)pages.json的配置進(jìn)行劃分。

在小程序啟動(dòng)時(shí)，默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)頁(yè)面，當(dāng)用戶進(jìn)入分包內(nèi)某個(gè)頁(yè)面時(shí)，會(huì)把對(duì)應(yīng)分包自動(dòng)下載下來(lái)，下載完成后再進(jìn)行展示。此時(shí)終端界面會(huì)有等待提示。

subPackages節(jié)點(diǎn)接收一個(gè)數(shù)組，數(shù)組每一項(xiàng)都是應(yīng)用的子包，內(nèi)部包括root和pages兩個(gè)配置項(xiàng)。subPackages內(nèi)部配置項(xiàng)屬性類型必填描述rootString是子包的根目錄pagesArray是子包由哪些頁(yè)面組成，參數(shù)同2.1.1中的pages

2.1.6subPackages

假設(shè)支持分包的uni-app目錄結(jié)構(gòu)如下。┌─pages│

├─index│

│

└─index.vue│

└─login│

└─login.vue├─pagesA│

├─static│

└─list│

└─list.vue├─pagesB│

├─static│

└─detail│

└─detail.vue├─static├─main.js├─App.vue├─manifest.json└─pages.json

2.1.6subPackages

需要在pages.json中進(jìn)行如下分包配置。{ "pages":[{ "path":"pages/index/index", "style":{...} },{ "path":"pages/login/login", "style":{...} }], "subPackages":[{ "root":"pagesA", "pages":[{ "path":"list/list", "style":{...} }] },{ "root":"pagesB", "pages":[{ "path":"detail/detail", "style":{...} }] }],}

2.1.6subPackages

App默認(rèn)為整包。也兼容了小程序的分包配置，但默認(rèn)并不開(kāi)啟。目前只有Vue2項(xiàng)目支持開(kāi)啟分包，Vue3項(xiàng)目暫不支持。

在配置了subPackages后，為了提升進(jìn)入后續(xù)分包頁(yè)面時(shí)的啟動(dòng)速度，一般還會(huì)配置preloadRule用于分包預(yù)加載。preloadRule內(nèi)部包括packages和network兩個(gè)配置項(xiàng)。preloadRule內(nèi)部配置項(xiàng)屬性類型必填描述packagesStringArray是進(jìn)入頁(yè)面后預(yù)下載分包的root或name。如果加主包則設(shè)置為“__APP__”。networkString否在指定網(wǎng)絡(luò)下預(yù)下載，可選值為all（不限網(wǎng)絡(luò)）和wifi（僅wifi下預(yù)下載）

2.1.6subPackages{ "subPackages":[{ "root":"pagesA", "pages":[{ "path":"list/list", "style":{...} }] },{ "root":"pagesB", "pages":[{ "path":"detail/detail", "style":{...} }] }], "preloadRule":{ "pagesA/list/list":{ "network":"all", "packages":["__APP__"]//進(jìn)入list頁(yè)面預(yù)加載主包 }, "pagesB/detail/detail":{ "network":"all", "packages":["pagesA"]//進(jìn)入detail頁(yè)面預(yù)加載pagesA分包 } }}

2.1.6subPackages

subPackages的使用有以下幾點(diǎn)注意事項(xiàng)。

1.subPackages里的pages的路徑是root下的相對(duì)路徑，不是全路徑。

2.小程序每個(gè)分包的限制大小是2M，總體積限制各小程序平臺(tái)都不同，例如微信小程序總體積不超過(guò)20M，百度小程序總體積不超過(guò)8M等。

3.uni-app內(nèi)對(duì)微信、QQ、百度、支付寶、抖音、快手小程序進(jìn)行了額外分包優(yōu)化，分包目錄內(nèi)的靜態(tài)資源或者JS文件不會(huì)被放置在主包中占用主包空間，而是會(huì)打包進(jìn)對(duì)應(yīng)的分包。02任務(wù)2manifest.json應(yīng)用配置

任務(wù)2manifest.json應(yīng)用配置

manifest.json文件是應(yīng)用的配置文件，用于指定應(yīng)用的名稱、圖標(biāo)、權(quán)限等。manifest.json的配置包括基礎(chǔ)配置、App類配置、Web配置和小程序配置等。在配置manifest.json文件時(shí)，HBuilderX為用戶提供了可視化頁(yè)面和源碼視圖兩種方式，用戶可自由選擇使用任意一種方式，頁(yè)面和源碼視圖中的配置是同步更新的。

2.3.1基礎(chǔ)配置

manifest.json中的基礎(chǔ)配置包括uni-app應(yīng)用標(biāo)識(shí)、應(yīng)用名稱、應(yīng)用描述、應(yīng)用版本名稱、應(yīng)用版本號(hào)、Vue版本號(hào)等。

2.3.1基礎(chǔ)配置

在HBuilderX中創(chuàng)建uni-app項(xiàng)目時(shí)，如果用戶已經(jīng)注冊(cè)登錄，HBuilderX會(huì)自動(dòng)聯(lián)網(wǎng)生成一個(gè)AppID，并將該AppID保存在manifest.json文件中的uni-app應(yīng)用標(biāo)識(shí)中。這個(gè)AppID是DCloud應(yīng)用的唯一標(biāo)識(shí)，不是小程序的AppID或iOS的AppID。該AppID主要用于DCloud相關(guān)的云服務(wù)，用戶不要自行修改。可以登錄DCloud開(kāi)發(fā)者中心，同步查看所創(chuàng)建項(xiàng)目的AppID。

基礎(chǔ)配置在源碼視圖中可以同步看到。

2.3.2App配置

manifest.json中的App配置包括App圖標(biāo)配置、啟動(dòng)頁(yè)面配置、模塊配置、權(quán)限配置，原生插件配置和其他配置等。

1.App圖標(biāo)配置

每個(gè)App都有自己的圖標(biāo)，可通過(guò)manifest.json中的圖標(biāo)配置頁(yè)面進(jìn)行配置，如果沒(méi)有配置，將使用HBuilder的圖標(biāo)。App圖標(biāo)配置頁(yè)面包含Andriod、iPhone、iPad等各種尺寸的圖標(biāo)，圖標(biāo)最大尺寸為1024*1024。

2.3.2App配置

HBuilderX提供了“自動(dòng)生成所有圖標(biāo)并替換”的功能按鈕，用戶只需單擊頁(yè)面自動(dòng)生成圖標(biāo)選項(xiàng)旁的“瀏覽”按鈕，選擇一個(gè)1024*1024的圖標(biāo)上傳，再單擊“自動(dòng)生成所有圖標(biāo)并替換”按鈕，HBuilderX會(huì)自動(dòng)生成Andriod、iPhone、iPad等不同尺寸的圖標(biāo)。生成的圖標(biāo)會(huì)自動(dòng)保存在項(xiàng)目的unpackage/res/icons目錄下，可單擊“瀏覽生成圖標(biāo)所在目錄”按鈕查看所有生成的圖標(biāo)。

2.3.2App配置

在源碼視圖頁(yè)面也能看到unpackage/res/icons目錄下生成的圖標(biāo)。

2.3.2App配置

2.App啟動(dòng)頁(yè)面配置

一般的每個(gè)App啟動(dòng)時(shí)都會(huì)配置個(gè)性化的啟動(dòng)頁(yè)面。

2.3.2App配置

App啟動(dòng)頁(yè)面配置包含啟動(dòng)頁(yè)面選項(xiàng)、Android和iOS啟動(dòng)頁(yè)面設(shè)置三塊內(nèi)容。（1）啟動(dòng)頁(yè)面選項(xiàng)：界面默認(rèn)自動(dòng)勾選“是否等待首頁(yè)渲染完畢后再關(guān)閉啟動(dòng)界面”選項(xiàng)和“啟動(dòng)界面顯示等待圈或雪花”選項(xiàng)。（2）Android啟動(dòng)頁(yè)面設(shè)置：界面默認(rèn)自動(dòng)勾選“通用啟動(dòng)界面”選項(xiàng)。通用啟動(dòng)界面樣式簡(jiǎn)單可適配不同屏幕。通用啟動(dòng)界面僅需要開(kāi)發(fā)者配置應(yīng)用名稱好App圖標(biāo)即可使用。App啟動(dòng)時(shí)通用啟動(dòng)界面上部顯示應(yīng)用圖標(biāo)，圖標(biāo)下面顯示應(yīng)用名稱。如果開(kāi)發(fā)者有較強(qiáng)的自定義需求，可以勾選“自定義啟動(dòng)圖”。自定義啟動(dòng)圖需用戶自己制作啟動(dòng)圖。（3）iOS啟動(dòng)頁(yè)面設(shè)置：iOS啟動(dòng)頁(yè)面配置項(xiàng)大體和Android界面相同，頁(yè)面默認(rèn)也是自動(dòng)勾選“通用啟動(dòng)界面”選項(xiàng)，只不過(guò)多了一個(gè)“自定義Storyboard啟動(dòng)界面”選項(xiàng)。如果開(kāi)發(fā)者需自定義啟動(dòng)圖，官方建議勾選“自定義Storyboard啟動(dòng)界面”選項(xiàng)，而不要勾選“自定義啟動(dòng)圖”選項(xiàng)，因?yàn)锳ppStore審核要求應(yīng)用在啟動(dòng)時(shí)，不能使用啟動(dòng)圖片，必須改為使用Storyboard來(lái)制作啟動(dòng)界面。

所有啟動(dòng)界面設(shè)置的修改需提交云端打包后才能生效。

2.3.2App配置

3.App模塊配置

App模塊配置是為了在App打包時(shí)控制App包體積，打包時(shí)剔除不需要的模塊。頁(yè)面可勾選的模塊包括“Barcode（掃碼）”、“Bluetooth（低功耗藍(lán)牙）”、“Contacts（通信錄）”等。

2.3.2App配置

4.App權(quán)限配置

App權(quán)限配置用于設(shè)定項(xiàng)目打包后對(duì)設(shè)備和系統(tǒng)的訪問(wèn)權(quán)限，分為Andriod端和iOS端。

2.3.2App配置

對(duì)于Android端項(xiàng)目來(lái)說(shuō)，云打包后默認(rèn)情況下會(huì)自動(dòng)添加一些權(quán)限，例如獲取網(wǎng)絡(luò)狀態(tài)、訪問(wèn)本地相機(jī)、訪問(wèn)攝像頭、訪問(wèn)通信錄、訪問(wèn)藍(lán)牙等。用戶可以在此基礎(chǔ)上根據(jù)需求新增權(quán)限。也可以強(qiáng)制移除已添加的權(quán)限。

對(duì)于iOS端項(xiàng)目來(lái)說(shuō)，要求開(kāi)發(fā)人員對(duì)項(xiàng)目使用設(shè)備和系統(tǒng)權(quán)限的原因進(jìn)行描述，云打包會(huì)將這些描述一并打包進(jìn)“用戶確認(rèn)隱私訪問(wèn)許可”中，并在用戶使用應(yīng)用時(shí)彈窗給用戶確認(rèn)。

2.3.2App配置

5.App原生插件配置

App原生插件配置用于對(duì)項(xiàng)目導(dǎo)入一些本地插件和云端插件。所有導(dǎo)入的插件在云打包后才生效。

2.3.2App配置

6.App常用其他配置

App常用其他配置包括配置項(xiàng)目的404錯(cuò)誤頁(yè)面以及Android、iOS端的一些其他配置。Android端其他配置包括Android的UrlSchemes、最低兼容Android版本號(hào)minSdkVersion、應(yīng)用適配的Android版本號(hào)、支持的Android手機(jī)CPU類型等。iOS端其他配置包括iOS的UrlSchemes、iOS關(guān)聯(lián)域名、iOS應(yīng)用訪問(wèn)其他應(yīng)用的白名單列表、iOS應(yīng)用后臺(tái)運(yùn)行功能等。

2.3.3小程序配置

HBuilderX提供了一些常用平臺(tái)的小程序配置頁(yè)面，每個(gè)平臺(tái)一個(gè)獨(dú)立配置頁(yè)面。在小程序配置頁(yè)面中，小程序AppID是必須要配置的。在開(kāi)發(fā)小程序時(shí)，如果想使用某些特定功能會(huì)用到各平臺(tái)自己的AppID，例如用戶授權(quán)登錄、獲取手機(jī)號(hào)發(fā)送驗(yàn)證碼、賬戶支付以及一些個(gè)性化的功能。這時(shí)候就可以在小程序配置頁(yè)面配置自己的AppID。以微信小程序?yàn)槔?，微信小程序配置AppID的頁(yè)面如下，其中小程序AppID需要在微信公眾號(hào)申請(qǐng)。

2.3.3小程序配置

如沒(méi)有微信小程序AppID，代碼開(kāi)發(fā)階段可在微信小程序官網(wǎng)（/）注冊(cè)申請(qǐng)一個(gè)小程序測(cè)試號(hào)。小程序測(cè)試號(hào)自帶一個(gè)AppID，可用于開(kāi)發(fā)階段代碼調(diào)試使用。

2.3.3小程序配置

配置完畢后在源碼視圖頁(yè)面同樣也能看到自己配置的小程序的AppID。/*小程序特有相關(guān)*/"mp-weixin":{

"appid":"",

//微信小程序AppID省略},

除了配置AppID外，小程序頁(yè)面還可以根據(jù)需要勾選ES6轉(zhuǎn)ES5，樣式自動(dòng)補(bǔ)全，自動(dòng)壓縮、檢查安全域名等配置。

2.3.4Web跨域配置

跨域配置僅針對(duì)Web端應(yīng)用，App端和小程序端不使用瀏覽器不用進(jìn)行跨域配置。Web端的跨域配置和Vue3中的配置類似，可在manifest.json的源碼視圖中編寫(xiě)如下代碼實(shí)現(xiàn)。"h5":{

"router":{

"mode":"hash",

"base":"./"

},

"sdkConfigs":{

"maps":{}

},

"devServer":{//Web端跨域配置

"proxy":{

"/api":{

"target":"https://localhost:8080",//目標(biāo)服務(wù)器地址

"changeOrigin":true,//允許改變?cè)吹刂?/p>

"pathRewrite":{

"^/api":""http://重寫(xiě)請(qǐng)求路徑,去除/api前綴

}

}

}

}}

2.3.4Web跨域配置

這樣配置后Web端應(yīng)用接收到地址以/api開(kāi)頭的請(qǐng)求，會(huì)先去除掉/api前綴，然后將請(qǐng)求轉(zhuǎn)發(fā)到目標(biāo)服務(wù)器https://localhost:8080。例如地址為/api/some/endpoint的請(qǐng)求將被轉(zhuǎn)發(fā)到目標(biāo)地址https://localhost:8080/some/endpoint。03任務(wù)3App.vue全局配置

任務(wù)3App.vue全局配置

App.vue是uni-app的主組件。uni-app項(xiàng)目中所有頁(yè)面都是在App.vue下進(jìn)行切換的，可以說(shuō)App.vue是應(yīng)用的入口文件。App.vue本身不是頁(yè)面，也不能使用<template>標(biāo)簽編寫(xiě)視圖元素，主要用于監(jiān)聽(tīng)?wèi)?yīng)用生命周期、配置全局樣式、配置全局的存儲(chǔ)globalData等。

2.3.1uni-app的生命周期函數(shù)

生命周期是一個(gè)對(duì)象從創(chuàng)建、運(yùn)行、銷毀的整個(gè)過(guò)程。在生命周期中每個(gè)階段會(huì)觸發(fā)一些函數(shù)，這些函數(shù)被稱為生命周期函數(shù)。uni-app的生命周期函數(shù)分為應(yīng)用、頁(yè)面和組件生命周期函數(shù)。

1.應(yīng)用生命周期函數(shù)

應(yīng)用生命周期函數(shù)是針對(duì)整個(gè)uni-app應(yīng)用的，僅在App.vue中監(jiān)聽(tīng)有效，在其他頁(yè)面監(jiān)聽(tīng)無(wú)效。uni-app提供了很多應(yīng)用生命周期函數(shù)，其中onLaunch、onShow、onHide這3個(gè)函數(shù)最常用。在uni-app應(yīng)用創(chuàng)建時(shí)，默認(rèn)情況下App.vue中會(huì)存在onLaunch、onShow、onHide三個(gè)函數(shù)。<script>

exportdefault{

onLaunch:function(){

console.log('AppLaunch')

},

onShow:function(){

console.log('AppShow')

},

onHide:function(){

console.log('AppHide')

}

}</script>

2.3.1uni-app的生命周期函數(shù)

以Web端運(yùn)行為例，在每次啟動(dòng)uni-app應(yīng)用訪問(wèn)首頁(yè)時(shí)，瀏覽器控制臺(tái)都依次執(zhí)行onLaunch和onShow函數(shù)打印出“AppLaunch”和“AppShow”。在最小化瀏覽器切換到其他應(yīng)用時(shí)，瀏覽器控制臺(tái)會(huì)打印“AppHide”，又回到瀏覽器頁(yè)面時(shí)控制臺(tái)會(huì)打印“AppShow”。

2.3.1uni-app的生命周期函數(shù)

onLaunch和onShow函數(shù)都支持入?yún)橐粋€(gè)啟動(dòng)參數(shù)，啟動(dòng)參數(shù)內(nèi)能夠獲取應(yīng)用啟動(dòng)的一些信息。例如使用如下代碼對(duì)onLaunch函數(shù)添加options啟動(dòng)參數(shù)。<script>

exportdefault{

onLaunch:function(options){

console.log('AppLaunch',options)

}</script>

在Web端運(yùn)行可打印出options內(nèi)容，包括應(yīng)用的啟動(dòng)路徑path，應(yīng)用啟動(dòng)場(chǎng)景（web端為1001），傳遞參數(shù)query等。

2.3.1uni-app的生命周期函數(shù)

2.頁(yè)面生命周期函數(shù)

頁(yè)面生命周期函數(shù)是針對(duì)某個(gè)頁(yè)面的，一般為pages目錄下的Vue頁(yè)面文件。uni-app頁(yè)面生命周期函數(shù)函數(shù)名描述onLoad在當(dāng)前頁(yè)面加載時(shí)觸發(fā)，通常用于請(qǐng)求數(shù)據(jù)或初始化頁(yè)面。如有頁(yè)面?zhèn)鲄ⅲ雲(yún)樯蟼€(gè)頁(yè)面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類型為ObjectonReady在頁(yè)面渲染完成時(shí)觸發(fā)，用于頁(yè)面渲染完成執(zhí)行動(dòng)畫(huà)等依賴于DOM的操作onShow在頁(yè)面顯示時(shí)觸發(fā)，例如從后臺(tái)切換回前臺(tái)onHide在頁(yè)面隱藏時(shí)觸發(fā)，例如點(diǎn)擊返回按鈕離開(kāi)頁(yè)面onUnload在頁(yè)面卸載時(shí)觸發(fā)，用于頁(yè)面卸載時(shí)執(zhí)行資源回收等操作onPullDownRefresh在用戶下拉頁(yè)面時(shí)出發(fā)，一般用于頁(yè)面下拉刷新加載數(shù)據(jù)onReachBottom頁(yè)面滾動(dòng)到底部的事件（不同于scroll-view組件的滾動(dòng)），常用于頁(yè)面滾動(dòng)到底部加載數(shù)據(jù)。

2.3.1uni-app的生命周期函數(shù)

在uni-app中使用頁(yè)面生命周期函數(shù)必須手動(dòng)導(dǎo)入@dcloudio/uni-app包。例如在2.1.5節(jié)的cart頁(yè)面中就編寫(xiě)了如下代碼，在頁(yè)面加載時(shí)使用onLoad函數(shù)接收外界傳遞的參數(shù)。<scriptsetup> import{onLoad}from'@dcloudio/uni-app' onLoad((option)=>{ console.log(option)

//option用于接收傳遞的參數(shù)

})</script>

2.3.1uni-app的生命周期函數(shù)

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

uni-app的組件就是指Vue的組件，一般放在components目錄下。uni-app組件生命周期函數(shù)和Vue組件的生命周期函數(shù)相似。在uni-app中，可以創(chuàng)建一個(gè)后綴名為.vue的文件作為組件，在應(yīng)用中的其他組件可以導(dǎo)入該組件使用，實(shí)現(xiàn)組件式編程。表2-9uni-app組件的常用生命周期函數(shù)函數(shù)名描述setupVue3特有的組件生命周期函數(shù)，開(kāi)始創(chuàng)建組件時(shí)執(zhí)行，用于創(chuàng)建組件內(nèi)部data和method，執(zhí)行時(shí)間最早beforeMount在組件掛載之前被調(diào)用，此時(shí)組件編譯已經(jīng)完成，但是DOM還未生成mounted在組件掛載之后被調(diào)用，此時(shí)組件已經(jīng)被掛載到頁(yè)面上，可以訪問(wèn)到組件的DOM元素beforeUpdate在組件數(shù)據(jù)更新之前被調(diào)用，此時(shí)數(shù)據(jù)已經(jīng)被更改，但頁(yè)面還未重新渲染，僅Web端支持updated在組件數(shù)據(jù)更新之后被調(diào)用，此時(shí)組件的DOM已經(jīng)重新渲染完畢，僅Web端支持beforeUnmount在組件卸載之前被調(diào)用，此時(shí)組件仍然可用，但DOM已經(jīng)被刪除unmounted在組件卸載之后被調(diào)用，此時(shí)組件已經(jīng)完全銷毀，無(wú)法再次使用

2.3.1uni-app的生命周期函數(shù)

例如訪問(wèn)uniappdemo2項(xiàng)目首頁(yè)index.vue會(huì)默認(rèn)加載uni-customer組件顯示“這是uni-customer組件”。這時(shí)就可以在uni-customer.vue內(nèi)部添加如下代碼，使用mounted函數(shù)監(jiān)控組件掛載。這樣在后續(xù)訪問(wèn)首頁(yè)index.vue頁(yè)面時(shí)，控制臺(tái)就會(huì)打印出“uni-customer組件加載了”。<scriptsetup>import{onMounted}from'vue'; onMounted(()=>{ console.log("uni-customer組件加載了") })</script>

2.3.2uni-app的全局樣式

在App.vue中可以定義一些全局通用樣式，如給所有頁(yè)面配置一個(gè)通用背景色，首屏頁(yè)面渲染的動(dòng)畫(huà)等，這些樣式會(huì)應(yīng)用于應(yīng)用的所有頁(yè)面。例在App.vue中添加如下代碼就配置了所有頁(yè)面背景色為紅色。<style>

/*每個(gè)頁(yè)面公共css*/

#app{

background-color:red;

}</style>

如果工程下同時(shí)有vue和nvue文件，由于nvue支持的CSS有限，某些CSS無(wú)法正常生效?？刹捎萌缦聦?xiě)法將nvue不支持的CSS寫(xiě)在單獨(dú)的條件編譯里。<style>

/*每個(gè)頁(yè)面公共css*/

/*#ifndefAPP-PLUS-NVUE*/

#app{

background-color:red;

}

/*#endif*/</style>

2.3.3uni-app的全局存儲(chǔ)變量

如果需要在uni-app中定義一些公共變量并在各頁(yè)面獲取，就可以使用App.vue中的全局存儲(chǔ)變量globalData來(lái)封裝。在App.vue中輸入如下代碼就定義了一個(gè)全局變量globalData，內(nèi)部封裝了一個(gè)變量text。<script> exportdefault{ globalData:{ text:"gobaltext" } }</script>

如果需要在其他頁(yè)面加載時(shí)獲取text的值，可在頁(yè)面的頁(yè)面生命周期函數(shù)onShow中利用JS代碼getApp().globalData.text獲取。如需修改text的值，可通過(guò)JS代碼getApp().globalData.text='newvalue'賦值。<scriptsetup>

onShow(()=>{

console.log(getApp().globalData.text)

})</script>

2.3.3uni-app的全局存儲(chǔ)變量

注意如果需要在App.vue的應(yīng)用生命周期函數(shù)onLaunch中獲取globalData內(nèi)部封裝的變量，不可使用getApp().globalData獲取。因?yàn)榇藭r(shí)getApp對(duì)象還不存在，只能使用this.globalData獲取。<script> exportdefault{ globalData:{ text:"gobaltext" } }</script>

如果需要在其他頁(yè)面加載時(shí)獲取text的值，可在頁(yè)面的頁(yè)面生命周期函數(shù)onShow中利用JS代碼getApp().globalData.text獲取。如需修改text的值，可通過(guò)JS代碼getApp().globalData.text='newvalue'賦值。

2.3.3uni-app的全局存儲(chǔ)變量<script>

exportdefault{

globalData:{

text:"gobaltext"

},

onLaunch:function(){

console.log('AppLaunch'+this.globalData.text)

},

onShow:function(){

console.log('AppShow')

},

onHide:function(){

console.log('AppHide')

}

}</script>04任務(wù)4綜合案例

2.4.1案例任務(wù)

在uniappdemo2項(xiàng)目中新建dark、light、default三個(gè)系統(tǒng)主題樣式css文件，并在App.vue中同時(shí)引入。主題樣式包括頁(yè)面背景色background-color和字體顏色color。在uniappdemo2的tabBar中新增一個(gè)名為“主題設(shè)置”的tab，單擊該tab跳轉(zhuǎn)到“主題設(shè)置”頁(yè)面，在“主題設(shè)置”頁(yè)面中定義三個(gè)按鈕“dark”、“l(fā)ight”、“default”用于切換頁(yè)面主題為黑暗、輕松和默認(rèn)風(fēng)格。系統(tǒng)啟動(dòng)時(shí)頁(yè)面為默認(rèn)風(fēng)格，用戶單擊“主題設(shè)置”頁(yè)面中的“dark”、“l(fā)ight”、“default”按鈕能夠切換頁(yè)面主題到對(duì)應(yīng)風(fēng)格。

2.4.2任務(wù)分析

此任務(wù)涉及page.json中的tabBar的配置、頁(yè)面路由跳轉(zhuǎn)，uni-app生命周期函數(shù)的使用，App.vue全局樣式、全局變量的配置和使用等知識(shí)點(diǎn)。完成此任務(wù)有以下關(guān)鍵步驟。

1.修改page.json中的tabBar配置，新增一個(gè)新的“設(shè)置主題”tab。新建相應(yīng)的“主題設(shè)置”頁(yè)面Vue文件并配置頁(yè)面路由。

2.主題樣式為所有頁(yè)面共享使用，可利用App.vue的全局變量globalData存儲(chǔ)，各頁(yè)面加載時(shí)自動(dòng)讀取局變量globalData的主題樣式數(shù)據(jù)設(shè)置頁(yè)面主題。

3.用戶在“主題設(shè)置”頁(yè)面文件中單擊“dark”、“l(fā)ight”、“default”按鈕切換主題觸發(fā)click事件，需在click事件中同步更新globalData中的主題樣式數(shù)據(jù)。

4.頁(yè)面主題樣式需根據(jù)globalData中數(shù)據(jù)實(shí)時(shí)變換，涉及到Vue3響應(yīng)式數(shù)據(jù)的使用，這里做簡(jiǎn)要介紹。Vue3中可利用ref函數(shù)和reactive函數(shù)兩種方式創(chuàng)建響應(yīng)式數(shù)據(jù)。

2.4.2任務(wù)分析（1）ref函數(shù)

ref函數(shù)一般用于創(chuàng)建簡(jiǎn)單數(shù)據(jù)類型的響應(yīng)式數(shù)據(jù)，也可以用于創(chuàng)建對(duì)象類型的響應(yīng)式數(shù)據(jù)。ref函數(shù)使用示例如下。<template>

<view>{{hello}}</view><!--template頁(yè)面獲取響應(yīng)式數(shù)據(jù)hello的值-->

<view>{{obj}}</view><!--template頁(yè)面獲取響應(yīng)式數(shù)據(jù)obj的值--></template><scriptsetup>

import{ref}from'vue';<!--從vue對(duì)象中引入ref函數(shù)-->

lethello=ref("a");<!--創(chuàng)建一個(gè)ref響應(yīng)式字符串?dāng)?shù)據(jù)，數(shù)據(jù)值為字符串a(chǎn)-->

<!--創(chuàng)建一個(gè)ref響應(yīng)式對(duì)象數(shù)據(jù)，數(shù)據(jù)值為一個(gè)對(duì)象-->

letobj=ref({

a:1,

b:2

})</script>

2.4.2任務(wù)分析

ref函數(shù)接受一個(gè)內(nèi)部值并返回一個(gè)響應(yīng)式且可變的ref對(duì)象，這個(gè)對(duì)象只包含一個(gè).value屬性。想要訪問(wèn)或改變r(jià)ef對(duì)象的內(nèi)部值可使用.value屬性。例如對(duì)上述代碼中hello和obj響應(yīng)式數(shù)據(jù)取值和重新賦值，可使用如下代碼，頁(yè)面template標(biāo)簽中的值會(huì)實(shí)時(shí)更新。hello.value

<!--獲取hello變量的值-->hello.value=”b”<!--對(duì)hello變量重新賦值-->obj.value.a<!--獲取obj對(duì)象a屬性的值-->obj.value.a=3;<!--對(duì)obj對(duì)象a屬性重新賦值-->（2）reactive函數(shù)

reactive函數(shù)用于創(chuàng)建對(duì)象類型或數(shù)組類型的響應(yīng)式數(shù)據(jù)。上述ref函數(shù)創(chuàng)建對(duì)象類型的響應(yīng)式數(shù)據(jù)底層實(shí)現(xiàn)也借助了reactive函數(shù)。與ref函數(shù)相比，使用reactive實(shí)現(xiàn)的響應(yīng)式數(shù)據(jù)在數(shù)據(jù)取值和賦值過(guò)程中省略了.value屬性，更加貼近編程習(xí)慣。reactive函數(shù)使用示例如下。

2.4.2任務(wù)分析<template> <view>{{obj1}}</view><!--template頁(yè)面獲取響應(yīng)式數(shù)據(jù)obj1的值--> <view>{{obj2}}</view><!--template頁(yè)面獲取響應(yīng)式數(shù)據(jù)obj2的值--></template><scriptsetup> import{reactive}from'vue';<!--從vue對(duì)象中引入reactive函數(shù)--> letobj1=reactive({a:7,b:8});<!--reactive創(chuàng)建對(duì)象類型響應(yīng)式數(shù)據(jù)--> letobj2=reactive([1,2,3]);<!--reactive創(chuàng)建數(shù)組類型響應(yīng)式數(shù)據(jù)--></script>

訪問(wèn)或改變r(jià)eactive對(duì)象的內(nèi)部值可使用可使用如下代碼，頁(yè)面template標(biāo)簽中的值會(huì)實(shí)時(shí)更新。obj1.a=9;<!--改變響應(yīng)式數(shù)據(jù)obj1的屬性a值為9-->obj1.b=10;<!--改變響應(yīng)式數(shù)據(jù)obj1的屬性b值為10-->obj2[2]=5;<!--改變響應(yīng)式數(shù)據(jù)obj2下標(biāo)為2的數(shù)組元素值為5-->

2.4.3任務(wù)實(shí)施

在uniappdemo2項(xiàng)目的根目錄下新建common目錄，在common目錄下新建default.css、dark.css、light.css三個(gè)主題CSS樣式文件，在其中定義對(duì)應(yīng)的主題樣式。

default.css文件內(nèi)容如下。.default{ background-color:white; color:black;}

dark.css文件內(nèi)容如下。.dark{

background-color:black;

color:white;}

2.4.3任務(wù)實(shí)施

light.css文件內(nèi)容如下。.light{ background-color:blanchedalmond; color:blue;}

在項(xiàng)目App.vue文件的全局變量globalData中定義全局樣式變量theme，默認(rèn)值為default，用于在項(xiàng)目啟動(dòng)時(shí)加載默認(rèn)主題樣式。同時(shí)在App.vue文件的<style>標(biāo)簽中使用@import引入三個(gè)主題的全局樣式文件。

2.4.3任務(wù)實(shí)施<script> exportdefault{ globalData:{ text:"gobaltext", theme:"default", }, onLaunch:function(){ console.log('AppLaunch'+this.globalData.text) }, onShow:function(){ console.log('AppShow') }, onHide:function(){ console.log('AppHide') } }</script><style> /*引入三個(gè)主題的全局樣式文件*/ @import"./common/default.css"; @import"./common/dark.css"; @import"./common/light.css";</style>

2.4.3任務(wù)實(shí)施

在項(xiàng)目pages目錄下新建theme目錄，在theme目錄下新建theme.vue頁(yè)面文件。在theme.vue文件中定義“dark”、“l(fā)ight”、“default”三個(gè)按鈕并綁定click事件執(zhí)行changeTheme函數(shù)。changeTheme函數(shù)內(nèi)部使用getApp().globalData.theme修改全局樣式變量theme的值，修改完畢后使用uni.reLaunch函數(shù)跳轉(zhuǎn)到index.vue頁(yè)面。具體代碼見(jiàn)下一頁(yè)。

2.4.3任務(wù)實(shí)施<template> <viewclass="text-area"> <button@click="changeTheme('dark')"size="mini">dark</button> <button@click="changeTheme('light')"size="mini">light</button> <button@click="changeTheme('default')"size="mini">default</button> </view></template><scriptsetup> functionchangeTheme(theme){ if(theme=='dark'){ getApp().globalData.theme="dark" } if(theme=='light'){ getApp().globalData.theme="light" } if(theme=='default'){ getApp().globalData.theme="defalut" } uni.reLaunch({ url:"/pages/index/index" }) }</script><style>

</style>

2.4.3任務(wù)實(shí)施

在路由配置文件pages.json中添加theme.vue文件的路由和對(duì)應(yīng)的tab配置。{

"pages":[

{

"path":"pages/index/index",

"style":{

"navigationBarTitleText":"index",

"navigationBarTextStyle":"white",

"navigationBarBackgroundColor":"#000080",

"backgroundColor":"#006400",

"enablePullDownRefresh":true

}

},

{

"path":"pages/cart/cart",

"style":{

"navigationBarTitleText":"購(gòu)物車"http://導(dǎo)航欄標(biāo)題文字內(nèi)容

}

},//剩余代碼見(jiàn)下一頁(yè)

2.4.3任務(wù)實(shí)施 { "path":"pages/time/time", "style":{ "navigationBarTitleText":"時(shí)鐘"http://導(dǎo)航欄標(biāo)題文字內(nèi)容 } }, { "path":"pages/my/my", "style":{ "navigationBarTitleText":"個(gè)人主頁(yè)"http://導(dǎo)航欄標(biāo)題文字內(nèi)容 } },

{ "path":"pages/theme/theme", "style": { "navigationBarTitleText":"主題設(shè)置", "enablePullDownRefresh":false } } ],//剩余代碼見(jiàn)下一頁(yè)

2.4.3任務(wù)實(shí)施 "globalStyle":{ "navigationBarTextStyle":"black", "navigationBarTitleText":"uni-app", "navigationBarBackgroundColor":"#F8F8F8", "backgroundColor":"#F8F8F8", "enablePullDownRefresh":true }, "tabBar":{ "color":"#7A7E83", "selectedColor":"#3cc51f", "borderStyle":"black", "backgroundColor":"#ffffff", "position":"bottom", "m