第2章剖析微信小程序電子工業(yè)出版社集成開(kāi)發(fā)環(huán)境都會(huì)依據(jù)一定的規(guī)則創(chuàng)建程序工程，微信開(kāi)發(fā)者工具也按照預(yù)定的規(guī)則創(chuàng)建個(gè)管理微信小程序工程。為了開(kāi)發(fā)微信小程序，開(kāi)發(fā)者需要對(duì)微信小程序的工程結(jié)構(gòu)有較好的了解，同時(shí)，也需要對(duì)微信小程序的啟動(dòng)過(guò)程、生命周期等概念有較好的了解。本章對(duì)微信小程序的工程結(jié)構(gòu)、生命周期、頁(yè)面構(gòu)成、數(shù)據(jù)綁定等內(nèi)容進(jìn)行介紹。目錄2.1小程序工程結(jié)構(gòu)2.2小程序配置及app.json文件2.3小程序生命周期及app.js文件2.4小程序全局樣式及app.wxss文件2.5小程序頁(yè)面及其構(gòu)成2.6案例：美圖欣賞2.7練習(xí)：童年記憶2.1小程序工程結(jié)構(gòu)創(chuàng)建一個(gè)名稱(chēng)為“mini-ch02”的微信小程序，然后觀察其工程結(jié)構(gòu)：典型的微信小程序工程包含如下基本內(nèi)容：components:：自定義組件工程目錄。微信小程序中可以自定義組件，components工程目錄就是用于存儲(chǔ)自定義組件的目錄。Pages：顧名思義，pages目錄就是用于存儲(chǔ)微信小程序界面/頁(yè)面的目錄，一個(gè)子目錄構(gòu)成一個(gè)頁(yè)面。小程序基本程序文件：app.js文件、app.json文件和app.wxss文件是微信小程序的基本程序文件，這些文件用于配置/設(shè)置小程序的基本屬性。其他配置文件：包括.eslintrc.js、project.config.json、project.private.config.json和sitemap.json在內(nèi)的配置文件，其中，.eslintrc.js配置文件用于配置識(shí)別和報(bào)告代碼中的模式選項(xiàng)和處置工具；project.config.json配置文件包含了關(guān)于小程序的一些基本信息；project.private.config.json文件用于配置項(xiàng)目私有屬性；sitemap.json文件則用于配置小程序頁(yè)面是否允許微信索引。一般不需要修改這幾個(gè)配置文件。2.2小程序配置及app.json文件小程序工程結(jié)構(gòu)中的app.json配置文件用于對(duì)小程序的基本屬性進(jìn)行配置，包括對(duì)小程序的頁(yè)面渲染引擎的配置、程序頁(yè)面配置、程序入口頁(yè)面配置等；序號(hào)屬性類(lèi)型必填描述1entryPagePathstring否小程序默認(rèn)首頁(yè)。在沒(méi)有填寫(xiě)的該值的情況，pages屬性的第一個(gè)頁(yè)面就是首頁(yè)面。2pagesstring[]是頁(yè)面及其路徑列表3windowObject否全局窗口表現(xiàn)。例如enablePullDownRefresh用于控制是否開(kāi)啟全局下拉刷新。4tabBarObject否控制小程序頁(yè)面底部tab欄的表現(xiàn)，也就是配置多標(biāo)簽欄及其對(duì)應(yīng)頁(yè)面5networkTimeoutObject否網(wǎng)絡(luò)超時(shí)時(shí)間，使用的屬性包括：request、connectSocket、uploadFile、downloadFile，分別配置請(qǐng)求超時(shí)時(shí)間、套接字鏈接超時(shí)時(shí)間、上傳文件超時(shí)時(shí)間和現(xiàn)在文件超時(shí)時(shí)間，默認(rèn)值都是60秒。6usingComponentsObject否全局自定義組件配置7permission Object否小程序接口權(quán)限相關(guān)設(shè)置8sitemapLocationstring是指明sitemap.json的位置，用于標(biāo)識(shí)先程序是否可以被索引以備檢索9stylestring否指定使用升級(jí)后的weui樣式10lazyCodeLoadingstring否配置自定義組件代碼按需注入11rendererstring否全局默認(rèn)的渲染引擎配置12rendererOptionsObject否渲染后端選項(xiàng)13componentFrameworkstring否組件框架。14useExtendedLibObject否指定需要引用的擴(kuò)展庫(kù)。目前支持以下項(xiàng)目：kbone:多端開(kāi)發(fā)框架weui:WeUI組件庫(kù)2.2.1小程序頁(yè)面配置在app.json配置文件中，一個(gè)非常重要的配置就是小程序頁(yè)面配置。所謂頁(yè)面配置，簡(jiǎn)單來(lái)說(shuō)就是配置小程序由哪些頁(yè)面組成。2.2.2渲染引擎及其配置所謂渲染引擎就是將程序運(yùn)算結(jié)果以用戶指定的樣式顯示在屏幕上的程序或者線程。針對(duì)微信小程序而言，渲染引擎就是指將微信小程序頁(yè)面顯示到手機(jī)屏幕上的那個(gè)程序或者線程。微信小程序提供了兩個(gè)渲染引擎。一個(gè)是經(jīng)典的基于webview技術(shù)的稱(chēng)為“webview”的渲染引擎，另一個(gè)則是較新的并且也是微信目前推薦使用的稱(chēng)為“skyline”的渲染引擎；微信認(rèn)為，相比于webview渲染引擎，skyline渲染引擎具有諸多優(yōu)勢(shì)；微信建議使用skyline渲染引擎。（1）renderer屬性：渲染引擎類(lèi)型，有兩個(gè)選項(xiàng)：skyline、webview，默認(rèn)值為webview。（2）rendererOptions屬性：渲染引擎選項(xiàng)，只有一個(gè)選項(xiàng)：skyline，其類(lèi)型為SkylineOptions，用于對(duì)skyline渲染引擎進(jìn)行配置（3）componentFramework屬性：組件框架，有兩個(gè)選項(xiàng)：glass-easel和exparser，其中，glass-easel是一個(gè)新的組件框架。渲染引擎配置為skyline，頁(yè)面必須適配glass-easel才能正常運(yùn)行。（4）lazyCodeLoading屬性：代碼延時(shí)加載，目前只有一個(gè)選項(xiàng)：requiredComponents，代表開(kāi)啟小程序“按需注入”特性。由于skyline需要代碼延時(shí)加載功能的支持，因此，當(dāng)renderer屬性中為skyline時(shí)，這個(gè)屬性值必須為requiredComponents。（5）navigationStyle屬性：導(dǎo)航欄樣式，有兩個(gè)選項(xiàng)：default、custom。其中，default表示使用微信內(nèi)置原生的小程序?qū)Ш綑冢籧ustom表示使用自定義導(dǎo)航欄。特別注意，當(dāng)renderer屬性為skyline時(shí)，這個(gè)屬性值只能選擇custom。2.2.3小程序組件樣式配置和小程序搜索配置從微信客戶端7.0開(kāi)始，微信的UI界面進(jìn)行了改版，小程序也進(jìn)行了基礎(chǔ)組件的樣式升級(jí)。通過(guò)在app.json文件中配置“style”:“v2”可表明啟用新版的組件樣式；sitemapLocation配置屬性用于指明sitemap.json的位置，默認(rèn)值為與app.json處于同級(jí)目錄下名字為sitemap.json的文件，用于指明小程序是否可以被微信索引從而增加被使用的概率。2.2.4微信客戶端版本與基礎(chǔ)庫(kù)版本的關(guān)系所謂基礎(chǔ)庫(kù)，本質(zhì)上就是微信客戶端為運(yùn)行小程序而提供的支撐框架系統(tǒng)。微信客戶端的版本號(hào)與小程序基礎(chǔ)庫(kù)的版本號(hào)是具有對(duì)應(yīng)關(guān)系的；序號(hào)基礎(chǔ)庫(kù)版本安卓版本安卓用戶占比iOS版本iOS用戶占比總體占比13.3.08.0.4416.06%8.0.4423.34%18.15%23.2.58.0.4370.60%8.0.4362.55%68.28%33.1.58.0.414.21%8.0.414.14%4.19%43.0.28.0.401.49%8.0.401.24%1.42%52.33.08.0.371.17%8.0.381.36%1.23%62.32.38.0.350.45%8.0.361.09%0.63%72.31.18.0.340.27%8.0.340.49%0.34%82.27.38.0.280.84%8.0.281.81%1.12%92.16.18.0.10.05%8.0.20.03%0.05%102.15.07.0.220.02%7.0.200.02%0.02%112.12.37.0.150.01%7.0.130.02%0.01%2.3小程序生命周期及app.js文件微信小程序所運(yùn)行的屬主環(huán)境是微信客戶端，也就是說(shuō)微信客戶端管理著微信小程序的啟動(dòng)、運(yùn)行和銷(xiāo)毀的整個(gè)過(guò)程。小程序從啟動(dòng)、運(yùn)行到最后被銷(xiāo)毀的整個(gè)過(guò)程稱(chēng)為“小程序的生命周期”。微信客戶端在運(yùn)行小程序的過(guò)程中會(huì)在適當(dāng)?shù)臅r(shí)機(jī)調(diào)用小程序特定的稱(chēng)為“回調(diào)函數(shù)”的函數(shù)，以此來(lái)對(duì)小程序的生命周期過(guò)程進(jìn)行管理。2.3.1微信小程序的運(yùn)行過(guò)程及其生命周期微信小程序的運(yùn)行過(guò)程及在運(yùn)行過(guò)程中回調(diào)函數(shù)的調(diào)用關(guān)系如圖：2.3.2小程序生命周期函數(shù)及其舉例微信規(guī)定，必須在小程序工程文件app.js中使用App()函數(shù)注冊(cè)小程序的生命周期回調(diào)函數(shù)。序號(hào)屬性名類(lèi)型是否必須含義及作用1onLaunchfunction否當(dāng)小程序初始化完成時(shí)被調(diào)用，全局只調(diào)用一次。該函數(shù)會(huì)接收一個(gè)Object類(lèi)型的參數(shù)。2onShowfunction否當(dāng)小程序被啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示時(shí)被調(diào)用。該函數(shù)會(huì)接收一個(gè)Object類(lèi)型的參數(shù)。3onHidefunction否當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)時(shí)被調(diào)用4onErrorfunction否當(dāng)小程序發(fā)生腳本錯(cuò)誤或API調(diào)用報(bào)錯(cuò)時(shí)被調(diào)用。該函數(shù)會(huì)接收一個(gè)String類(lèi)型的參數(shù)。5onPageNotFoundfunction否當(dāng)小程序要打開(kāi)的頁(yè)面不存在時(shí)被調(diào)用。該函數(shù)會(huì)接收一個(gè)Object類(lèi)型的參數(shù)。6onUnhandledRejectionfunction否當(dāng)小程序有未處理的Promise拒絕時(shí)被調(diào)用。該函數(shù)會(huì)接收一個(gè)Object類(lèi)型的參數(shù)。7onThemeChangefunction否當(dāng)系統(tǒng)切換主題時(shí)被調(diào)用。該函數(shù)會(huì)接收一個(gè)Object類(lèi)型的參數(shù)。8任何其他自定義屬性任何類(lèi)型否自定義可以在調(diào)用App()函數(shù)時(shí)提供一個(gè)Object對(duì)象參數(shù)，并在Object對(duì)象中設(shè)置回調(diào)函數(shù)。修改app.js文件為如下代碼：//app.jsApp({onLaunch(options){console.log("onLaunch函數(shù)被調(diào)用了");console.log(options);},onShow(options){console.log("onShow函數(shù)被調(diào)用了");console.log(options);},onHide(){console.log("onHide函數(shù)被調(diào)用了");},onError(msg){console.log("onError函數(shù)被調(diào)用了");console.log(msg)},onPageNotFound(options){console.log("onPageNotFound函數(shù)被調(diào)用了");console.log(options);},onUnhandledRejection(options){console.log("onUnhandledRejection函數(shù)被調(diào)用了");console.log(options);},onThemeChange(options){console.log("onThemeChange函數(shù)被調(diào)用了");console.log(options);},globalData:'Iamglobaldata'})點(diǎn)擊工具欄的“編譯”按鈕運(yùn)行修改后的微信小程序。2.4小程序全局樣式及app.wxss文件微信小程序的頁(yè)面都是使用WXML（WeiXinMarkupLanguage的縮寫(xiě)）標(biāo)簽編寫(xiě)的，與使用HTML標(biāo)簽編寫(xiě)Web頁(yè)面可以使用樣式CSS美化頁(yè)面外觀類(lèi)似;微信小程序頁(yè)面可以通過(guò)使用后綴為.wxss的樣式文件來(lái)美化顯示效果;微信在定義WXSS屬性時(shí)，吸納了CSS大部分特性，但是增加了特性有尺寸單位；小程序工程中的app.wxss文件用于定義小程序全局樣式，也就是，在這個(gè)文件里定義的樣式可以用于所有的微信小程序頁(yè)面。2.4.1小程序頁(yè)面寬度尺寸單位rpx為了適應(yīng)不同的屏幕寬度，微信定義了一個(gè)屏幕尺寸單位rpx：任何一個(gè)屏幕，無(wú)論其實(shí)際的物理寬度，微信都規(guī)定其寬度為750rpx，并以此為基本參數(shù)進(jìn)行寬度計(jì)算。例如，某款手機(jī)的寬度為1500px，則750rpx=1500px，因此，1rpx=2px，以此類(lèi)推。2.4.2樣式導(dǎo)入可以在一個(gè)樣式文件中，使用@import指令導(dǎo)入另一個(gè)樣式文件的內(nèi)容。注意，@import使用導(dǎo)入的外聯(lián)樣文件的相對(duì)路徑，用“;”結(jié)束；/**common.wxss**/.small-p{padding:5px;}/**app.wxss**/@import"common.wxss";.middle-p{padding:15px;}2.5小程序頁(yè)面及其構(gòu)成小程序由一個(gè)或者多個(gè)頁(yè)面構(gòu)成，小程序就是通過(guò)這些頁(yè)面與用戶進(jìn)行信息交互的，因此，頁(yè)面設(shè)計(jì)在小程序中占據(jù)著重要的地位。微信小程序的每個(gè)頁(yè)面都包括四類(lèi)文件：.wxml文件、.wxss文件、.json文件和.js文件。2.5.1頁(yè)面.wxml文件頁(yè)面文件中后綴為.wxml的文件稱(chēng)為微信頁(yè)面標(biāo)簽文件，其中包含要顯示在頁(yè)面中的信息。WXML定義了很多標(biāo)簽，例如scroll-view標(biāo)簽、button標(biāo)簽、text標(biāo)簽、view標(biāo)簽、icon標(biāo)簽、images標(biāo)簽等。將在后續(xù)章節(jié)介紹。2.5.2頁(yè)面.wxss文件除了可以在小程序的app.wxss樣式文件中定義全局樣式外，還可以在各個(gè)頁(yè)面中為頁(yè)面定義各自獨(dú)有的樣式。微信頁(yè)面標(biāo)簽文件有兩種使用WXSS樣式的方式：內(nèi)聯(lián)樣式和外聯(lián)樣式。<viewstyle="color:blue;">HelloWorld</view>.textcolor{color:blue;}<viewclass="textcolor">HelloWorld</view>2.5.3頁(yè)面.json文件可以在小程序配置app.json中對(duì)小程序整體屬性進(jìn)行配置的同時(shí)，也可以在頁(yè)面的.json配置文件中對(duì)單個(gè)頁(yè)面的屬性進(jìn)行配置。頁(yè)面配置文件.json文件內(nèi)容為一個(gè)JSON對(duì)象，常用的配置屬性如表：序號(hào)屬性類(lèi)型默認(rèn)值描述1navigationStylestringdefault導(dǎo)航欄樣式，兩個(gè)選項(xiàng)：default、custom。default表示使用默認(rèn)的微信內(nèi)置的導(dǎo)航欄，custom則使用自定義的導(dǎo)航欄。微信建議，在使用skyline渲染引擎時(shí)，此項(xiàng)值設(shè)置為custom。2homeButtonbooleanfalse在非首頁(yè)頁(yè)面中的導(dǎo)航欄是否展示home鍵3enablePullDownRefreshbooleanfalse是否開(kāi)啟頁(yè)面下拉刷新4onReachBottomDistancenumber50頁(yè)面上拉觸底事件觸發(fā)時(shí)距頁(yè)面底部距離，單位為px5pageOrientationstringportrait屏幕旋轉(zhuǎn)設(shè)置，三個(gè)選項(xiàng)：auto，表示自動(dòng)，隨系統(tǒng)方向；portrait，肖像模式，也就是豎向；landscape，風(fēng)景模式，也就是橫向6usingComponentsObjectnull自定義組件的名稱(chēng)及其路徑7stylestringdefault啟用新版的組件樣式8rendererstringwebview渲染引擎配置，有兩個(gè)選項(xiàng)：skyline、webview。微信建議使用skyline。2.5.4頁(yè)面.js文件微信規(guī)定，對(duì)于每個(gè)小程序頁(yè)面，需要使用頁(yè)面的.js文件并調(diào)用Page()函數(shù)對(duì)頁(yè)面進(jìn)行初始化。Page()函數(shù)接受一個(gè)Object類(lèi)型參數(shù)，通過(guò)這個(gè)參數(shù)指定頁(yè)面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。小程序的每個(gè)頁(yè)面也有生命周期：頁(yè)面生命周期函數(shù)是通過(guò)Page()函數(shù)的參數(shù)Object對(duì)象來(lái)指定的。Object對(duì)象的常用屬性及其含義如表:序號(hào)屬性名類(lèi)型默認(rèn)值描述1dataObject無(wú)頁(yè)面的初始數(shù)據(jù)2onLoadfunction無(wú)生命周期回調(diào)函數(shù)，監(jiān)聽(tīng)頁(yè)面加載3onShowfunction無(wú)生命周期回調(diào)函數(shù)，監(jiān)聽(tīng)頁(yè)面顯示4onReadyfunction無(wú)生命周期回調(diào)函數(shù)，監(jiān)聽(tīng)頁(yè)面初次渲染完成5onHidefunction無(wú)生命周期回調(diào)函數(shù)，監(jiān)聽(tīng)頁(yè)面隱藏，也就是頁(yè)面被其他頁(yè)面覆蓋6onUnloadfunction無(wú)生命周期回調(diào)函數(shù)，監(jiān)聽(tīng)頁(yè)面卸載7onRouteDonefunction無(wú)生命周期回調(diào)函數(shù)，監(jiān)聽(tīng)路由動(dòng)畫(huà)完成8onPullDownRefreshfunction無(wú)事件監(jiān)聽(tīng)函數(shù)，監(jiān)聽(tīng)用戶下拉動(dòng)作9onReachBottom function無(wú)事件監(jiān)聽(tīng)函數(shù)，監(jiān)聽(tīng)頁(yè)面上拉觸底事件的處理函數(shù)10onShareAppMessagefunction無(wú)監(jiān)聽(tīng)用戶點(diǎn)擊右上角的轉(zhuǎn)發(fā)功能按鈕。注意：只有定義了此事件處理函數(shù)，右上角菜單才會(huì)顯示“轉(zhuǎn)發(fā)”按鈕。11onShareTimelinefunction無(wú)事件監(jiān)聽(tīng)函數(shù)，監(jiān)聽(tīng)用戶點(diǎn)擊右上角轉(zhuǎn)發(fā)到朋友圈功能按鈕。注意：只有定義了此事件處理函數(shù)，右上角菜單才會(huì)顯示“分享到朋友圈”按鈕。12onAddToFavoritesfunction無(wú)事件監(jiān)聽(tīng)函數(shù)，監(jiān)聽(tīng)用戶點(diǎn)擊右上角收藏功能按鈕。舉一個(gè)例子觀察一下小程序頁(yè)面的生命周期過(guò)程://index.jsPage({onLoad:function(options){console.log("onLoad()函數(shù)被調(diào)用了。");console.log(options);},onShow:function(){console.log("onShow()函數(shù)被調(diào)用了。");},onReady:function(){console.log("onReady()函數(shù)被調(diào)用了。");},onHide:function(){console.log("onHide()函數(shù)被調(diào)用了。");}})2.5.5簡(jiǎn)單的可以交互的“HelloWorld”頁(yè)面程序包括兩個(gè)相互關(guān)聯(lián)的頁(yè)面：在index頁(yè)面上點(diǎn)擊”Weixin”文字，將打開(kāi)一個(gè)新的名稱(chēng)為hello的頁(yè)面，并且在hello頁(yè)面中以簡(jiǎn)單的方式顯示“HelloWorld”文字。在hello頁(yè)面，用戶點(diǎn)擊“HelloWorld”文字時(shí)將返回到主頁(yè)面。修改hello.json文件為如下內(nèi)容：修改hello.wxml為如下代碼：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}<!s/hello/hello.wxml--><navigation-bartitle="Hello"back="{{true}}"color="black"background="#FFF"></navigation-bar><viewclass="container"><textclass="text"bind:tap="goback">{{message}}</text></view>hello.js文件的內(nèi)容如下：//pages/hello/hello.jsPage({data:{message:"HelloWorld"http://這里定義message綁定的文字為“HelloWorld”},goback(){wx.navigateBack();}})為了使頁(yè)面美觀一些，修改hello.wxss為如下內(nèi)容：注意第一行的名稱(chēng)為page的標(biāo)簽：在微信小程序中，頁(yè)面內(nèi)的標(biāo)簽都是在page標(biāo)簽的子標(biāo)簽。這個(gè)類(lèi)似HTML頁(yè)面文件中，所有標(biāo)簽都是html標(biāo)簽的子標(biāo)簽一樣。/*pages/hello/hello.wxss*/page{height:100vh;display:flex;flex-direction:column;}.text{padding-top:100px;}編譯并運(yùn)行這個(gè)程序:2.6案例：美圖欣賞編寫(xiě)一個(gè)簡(jiǎn)單的美圖欣賞微信小程序，對(duì)前面的知識(shí)內(nèi)容做一個(gè)總結(jié)性應(yīng)用。2.6.1案例目標(biāo)這個(gè)案例程序首先在首頁(yè)面中以九宮格的形式顯示一組圖像，當(dāng)用戶點(diǎn)擊某個(gè)圖像時(shí)，在一個(gè)新的頁(yè)面顯示圖像大圖。2.6.2案例分析準(zhǔn)備一些要顯示在頁(yè)面上的圖像;新建名稱(chēng)為mini-ch02-case的微信小程序工程，在工程中新建一個(gè)images的目錄，用于存放要顯示的圖像。該案例包括兩個(gè)頁(yè)面：主頁(yè)面和圖像顯示頁(yè)面，其中，主頁(yè)面以九宮格形式顯示圖像的小圖；圖像顯示頁(yè)面以大圖形式顯示圖像。由于新建的小程序工程只有一個(gè)頁(yè)面，因此，需要新建一個(gè)頁(yè)面，命名這個(gè)頁(yè)面為detail。然后，修改頁(yè)面的微信頁(yè)面配置文件、微信頁(yè)面標(biāo)簽文件、微信頁(yè)面樣式文件、微信頁(yè)面腳本文件，使之達(dá)到案例目標(biāo)的要求。2.6.3案例實(shí)施新建名稱(chēng)為mini-ch02-case且不使用微信小程序模板的小程序工程，之后，在小程序工程中新建名為images的子目錄，并將圖像復(fù)制到images子目錄中，然后，在新建名為detail的頁(yè)面。1.1JavaWeb概述為了避免樣式使用混亂，首先刪除app.wxss文件的內(nèi)容；在app.json文件中添加detail頁(yè)面，修改后的app.json文件內(nèi)容如下。只是增加了對(duì)detail頁(yè)面的配置！{"pages":["pages/index/index","pages/detail/detail"],"window":{"navigationBarTextStyle":"black","navigationStyle":"custom"},"style":"v2","renderer":"skyline","rendererOptions":{"skyline":{"defaultDisplayBlock":true,"disableABTest":true,"sdkVersionBegin":"3.0.0","sdkVersionEnd":"15.255.255"}},"componentFramework":"glass-easel","sitemapLocation":"sitemap.json","lazyCodeLoading":"requiredComponents"}修改index.wxml文件為如下內(nèi)容：<!--index.wxml--><navigation-bartitle="美圖欣賞"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"><imagesrc="/images/01.jpg"id="1"bind:tap="itap"mode="widthFix"class="image"/><imagesrc="/images/02.jpg"id="2"bind:tap="itap"mode="widthFix"class="image"/><imagesrc="/images/03.jpg"id="3"bind:tap="itap"mode="widthFix"class="image"/><viewclass="separate"></view><imagesrc="/images/04.jpg"id="4"bind:tap="itap"mode="widthFix"class="image"/><imagesrc="/images/05.jpg"id="5"bind:tap="itap"mode="widthFix"class="image"/><imagesrc="/images/06.jpg"id="6"bind:tap="itap"mode="widthFix"class="image"/><viewclass="separate"></view><imagesrc="/images/07.jpg"id="7"bind:tap="itap"mode="widthFix"class="image"/><imagesrc="/images/08.jpg"id="8"bind:tap="itap"mode="widthFix"class="image"/><imagesrc="/images/09.jpg"id="9"bind:tap="itap"mode="widthFix"class="image"/></view></scroll-view>為了使顯示美觀一些，修改index.wxss樣式文件為如下內(nèi)容：/**index.wxss**/page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}.container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;align-items:flex-end;}.image{width:32vw;}.separate{width:100%;height:8rpx;background-color:white;}index.js