APP
技術(shù)交流QQ群:1027579432，歡迎你的加入！
?
1.創(chuàng)建項(xiàng)目和目錄文件結(jié)構(gòu)
- 小程序包含一個(gè)描述整體程序的app和多個(gè)描述各自頁(yè)面的page。
- 一個(gè)小程序主體部分由三個(gè)文件組成，必須放在項(xiàng)目的根目錄，如下：
- 一個(gè)小程序頁(yè)面由四個(gè)文件組成，如下圖所示：
- 注意：為了方便開(kāi)發(fā)者減少配置項(xiàng)，描述頁(yè)面的四個(gè)文件必須具有相同的路徑與文件名。
- 由于一個(gè)小程序可能有多個(gè)頁(yè)面，所以在根目錄下創(chuàng)建pages文件夾。假設(shè)小程序僅有一個(gè)詳情頁(yè)面about，因此為了便于管理在pages文件夾下創(chuàng)建about文件夾。里面新建4個(gè)與小程序頁(yè)面相關(guān)的文件：about.js、about.json、about.wxml、about.wxss。同時(shí)，在根目錄下創(chuàng)建小程序全局相關(guān)文件app.js、app.json、app.wxss。
- 注意：app.json和about.json配置文件不能什么也不寫(xiě)，否則會(huì)報(bào)錯(cuò)。因此，需要寫(xiě)入如下內(nèi)容：
// app.json文件內(nèi)容，路徑必須寫(xiě)相對(duì)路徑 { "pages": ["pages/about/about"] // 配置小程序需要訪問(wèn)的所有頁(yè)面路徑 } // about.json文件內(nèi)容 { navigationBarTitleText": "關(guān)于" } - 接著，在app.js文件中，最簡(jiǎn)單的方法是注冊(cè)一個(gè)空的頁(yè)面對(duì)象。添加如下內(nèi)容：
Page({})
2.view、text、image組件(元素)
- 所有的wxml組件元素都是既有開(kāi)始標(biāo)記又有結(jié)束標(biāo)記。都是雙標(biāo)簽!
- view組件元素相當(dāng)于HTML中的div元素。
<view class="container"> <image src="../../images/curry.jpg" class="about-banner"></image> <text>電影周周看</text> <text>我每周推薦一部好電影</text> <text>我的微博：weibo.com/CurryCoder</text> </view>
3.快速實(shí)現(xiàn)基本布局
- 傳統(tǒng)方式：相關(guān)的wxss屬性賦值非常分散。
/* 傳統(tǒng)方式 */ .container { background-color: #eee; height: 100vh; text-align: center; } text { display: block; } image, text { margin-bottom: 60px; } - 彈性布局方式：相關(guān)的wxss屬性賦值比較統(tǒng)一，方式靈活。
/* flex彈性布局方式 */ .container { background-color: #eee; height: 100vh; display: flex; /* 修改主軸 */ flex-direction: column; justify-content: space-around; align-items: center; }
4.響應(yīng)式長(zhǎng)度單位rpx
- 問(wèn)題的引入：如何讓元素大小適配不同寬度屏幕？使用px這種絕對(duì)長(zhǎng)度單位無(wú)法始終保持圖片寬度和高度為屏幕的一半。
- 小程序規(guī)定所有設(shè)備的屏幕寬高均為750rpx。
.about-banner { width: 375rpx; height: 375rpx; } - iPhone6的屏幕尺寸為375px*667px，而小程序規(guī)定所有設(shè)備的屏幕的寬高均為750rpx。因此，兩者寬度的關(guān)系剛好是1:2關(guān)系(即px:rpx=1:2)，便于換算。
/* 例如，在視覺(jué)設(shè)計(jì)稿中規(guī)定margin-left屬性設(shè)置為100px，則在css中可以寫(xiě)成200rpx */ .about-banner { width: 375rpx; height: 375rpx; margin-left: 200rpx; }
5.新增每周推薦頁(yè)面weekly
- 與詳情頁(yè)about類(lèi)似，在pages目錄下創(chuàng)建weekly文件夾。其中，創(chuàng)建weekly.js、weekly.wxss、weekly.wxml、weekly.json這四個(gè)文件。
- 每一個(gè)用戶可能訪問(wèn)到的頁(yè)面，都需要在全局配置中來(lái)登記它的訪問(wèn)路徑。在全局配置文件app.json中寫(xiě)入如下內(nèi)容。注意：要將weekly頁(yè)面的路徑寫(xiě)在最前面，這樣小程序會(huì)最先加載它！
{ "pages": ["pages/weekly/weekly", "pages/about/about"] } - 在weekly.js文件中，寫(xiě)入最簡(jiǎn)單的注冊(cè)空的頁(yè)面對(duì)象。
Page({}) - 在視圖文件weekly.wxml中寫(xiě)入如下代碼：
<view> <text>本周推薦</text> <image src="../../images/curry.jpg"></image> <text>庫(kù)里</text> <text>點(diǎn)評(píng)：最牛逼的三分投手，最萌的庫(kù)日天。</text> </view> - 在布局文件weekly.wxss中寫(xiě)入如下內(nèi)容：
<view class="container"> <text>本周推薦</text> <image src="../../images/curry.jpg"></image> <text>庫(kù)里</text> <text>點(diǎn)評(píng)：最牛逼的三分投手，最萌的庫(kù)日天。</text> </view> - 我們發(fā)現(xiàn)頁(yè)面布局在weekly頁(yè)面并沒(méi)有生效，所以，可以將weekly和about頁(yè)面中共同的樣式放入全局樣式文件app.wxss中。如下所示：
/* flex彈性布局方式 */ .container { background-color: #eee; height: 100vh; display: flex; /* 修改主軸方向 */ flex-direction: column; justify-content: space-around; align-items: center; } - 在weekly.json文件中，寫(xiě)入如下內(nèi)容，設(shè)置頁(yè)面的標(biāo)題。
{ "navigationBarTitleText": "人物介紹" }
6.使用navigator組件實(shí)現(xiàn)從about頁(yè)面跳轉(zhuǎn)到weekly頁(yè)面
- 通過(guò)將about頁(yè)面的路徑作為第一個(gè)路徑頁(yè)登記，這樣就恢復(fù)成了小程序的初始頁(yè)面。
{ "pages": [ "pages/about/about", "pages/weekly/weekly" ] } - 修改about.wxml文件中的內(nèi)容，增加navigator組件(行內(nèi)元素)。text組件中只能包含文本信息，為了使顯示的信息在同一行中顯示，需要用view組件包含。
<view class="container"> <image src="../../images/curry.jpg" class="about-banner"></image> <text style="font-weight: blod; font-size: 40rpx">NBA人物周周看</text> <view> <navigator url="/pages/weekly/weekly" style="display: inline;" open-type="redirect" hover-class="nav-hover" class="nav-default">每周推薦</navigator> <text>一個(gè)NBA球員</text> </view> <text>我的微博：weibo.com/CurryCoder</text> </view> - navigator組件中有一個(gè)重要的屬性open-type。默認(rèn)值是navigate，當(dāng)設(shè)置為redirect時(shí)，表示一般頁(yè)面發(fā)生跳轉(zhuǎn)后，無(wú)法點(diǎn)擊頁(yè)面左上角的返回按鈕進(jìn)行返回。
- navigator組件中有一個(gè)重要的點(diǎn)擊態(tài)屬性hover-class。當(dāng)鼠標(biāo)點(diǎn)擊時(shí)，會(huì)出現(xiàn)鼠標(biāo)點(diǎn)擊后的效果。在about.wxss文件中加入樣式。
.nav-hover { color: red; } - 使用hover-class時(shí)的注意點(diǎn)：當(dāng)鼠標(biāo)點(diǎn)擊導(dǎo)航鏈接前，就已經(jīng)給導(dǎo)航鏈接設(shè)置初始樣式為藍(lán)色。當(dāng)鼠標(biāo)點(diǎn)擊時(shí)，會(huì)發(fā)現(xiàn)導(dǎo)航鏈接并沒(méi)有變?yōu)榧t色。這是因?yàn)辄c(diǎn)擊導(dǎo)航鏈接時(shí)，會(huì)將nav-hover賦值為class屬性。而在css中，權(quán)重值相同時(shí)，會(huì)發(fā)生覆蓋現(xiàn)象(就近原則)。因此，在css中需要將.nav-hover的樣式寫(xiě)在.nav-default之后即可解決上面的問(wèn)題。
.nav-default { color: blue; }
7.配置tabBar[標(biāo)簽欄]——對(duì)若干一級(jí)頁(yè)面的入口鏈接
- 很多時(shí)候，對(duì)于about和weekly這樣的一階頁(yè)，我們希望實(shí)現(xiàn)的是在它們之間的快速的任意切換。
- 在全局配置文件app.json中配置tabBar屬性，如下所示：
{ "pages": [ "pages/about/about", "pages/weekly/weekly" ], "tabBar": { "list": [ { "text": "每周推薦", "pagePath": "pages/weekly/weekly", "iconPath": "images/icons/weekly.png", "selectedIconPath": "images/icons/weekly-selected.png" }, { "text": "關(guān)于", "pagePath": "pages/about/about", "iconPath": "images/icons/index.png", "selectedIconPath": "images/icons/index-selected.png" } ], "color": "#000", "selectedColor": "#00f" } } - 新的問(wèn)題：點(diǎn)擊導(dǎo)航鏈接時(shí)，頁(yè)面無(wú)法實(shí)現(xiàn)跳轉(zhuǎn)。原因是：全局配置文件app.json中的list參數(shù)已經(jīng)加載了pagePath，但是tabBar還增加了標(biāo)簽欄。因此，我們?cè)谶M(jìn)行鼠標(biāo)點(diǎn)擊時(shí)，不能僅僅考慮頁(yè)面的跳轉(zhuǎn)，還要考慮tabBar標(biāo)簽欄的跳轉(zhuǎn)。因此，需要在about.wxml文件中，修改navigator組件中的open-type為switchTab。
<view class="container"> <image src="../../images/curry.jpg" class="about-banner"></image> <text style="font-weight: blod; font-size: 40rpx">NBA人物周周看</text> <view> <navigator url="/pages/weekly/weekly" style="display: inline;" open-type="switchTab" hover-class="nav-hover" class="nav-default">每周推薦</navigator> <text>一個(gè)NBA球員</text> </view> <text>我的微博：weibo.com/CurryCoder</text> </view>
8.配置全局的頂部導(dǎo)航欄樣式
- 原先的about頁(yè)面頂部導(dǎo)航欄默認(rèn)是黑色背景，黑字。可以在about.json文件中修改為黑字，白色背景。
{ "navigationBarTitleText": "關(guān)于", "navigationBarBackgroundColor": "#fff", "navigationBarTextStyle": "black" } - 同時(shí)，為了使weekly頁(yè)面的頂部導(dǎo)航欄樣式與about頁(yè)面頂部導(dǎo)航欄樣式一樣，因此，可以復(fù)制上面的代碼到weekly.json文件中。
{ "navigationBarTitleText": "人物介紹", "navigationBarBackgroundColor": "#fff", "navigationBarTextStyle": "black" } - 但是，以上代碼直接復(fù)制的方法，必然會(huì)帶來(lái)代碼升級(jí)時(shí)的問(wèn)題。因此，必須在全局配置文件app.json文件中寫(xiě)入window屬性進(jìn)行設(shè)置。
{ "pages": [ "pages/about/about", "pages/weekly/weekly" ], "tabBar": { "list": [ { "text": "每周推薦", "pagePath": "pages/weekly/weekly", "iconPath": "images/icons/weekly.png", "selectedIconPath": "images/icons/weekly-selected.png" }, { "text": "關(guān)于", "pagePath": "pages/about/about", "iconPath": "images/icons/index.png", "selectedIconPath": "images/icons/index-selected.png" } ], "color": "#000", "selectedColor": "#00f" }, "window": { "navigationBarBackgroundColor": "#fff", "navigationBarTextStyle": "black", "navigationBarTitleText": "NBA人物周周看" # 某個(gè)頁(yè)面默認(rèn)的頂部導(dǎo)航欄標(biāo)題，如果某個(gè)頁(yè)面沒(méi)有單獨(dú)設(shè)置此屬性，就用全局配置文件中的 } }
9.數(shù)據(jù)綁定
9.1 基于DOM API手動(dòng)更新視圖的傳統(tǒng)方法
- 在之前講到的about.wxml和weekly.wxml視圖文件中，相關(guān)的數(shù)據(jù)都是進(jìn)行直接硬編碼。直接硬編碼對(duì)一些數(shù)據(jù)不變頻繁發(fā)生變化的頁(yè)面(如about頁(yè)面)是合適的。但是，對(duì)于像weekly頁(yè)面中大量的數(shù)據(jù)是頻繁變化的需要是不合適的。
- 直接硬編碼weekly頁(yè)面中的數(shù)據(jù)，在weekly.wxml文件是無(wú)法提前獲知的。需要在小程序運(yùn)行的過(guò)程中，動(dòng)態(tài)的從服務(wù)器端去獲取，然后再渲染輸出到這個(gè)weekly.wxml視圖中進(jìn)行顯示。
- 傳統(tǒng)方式解決上述直接硬編碼問(wèn)題：一般來(lái)說(shuō)，會(huì)在頁(yè)面加載的過(guò)程中，通過(guò)一個(gè)Ajax調(diào)用來(lái)請(qǐng)求server返回本周推薦球員的詳細(xì)信息。假設(shè)客戶端收到了服務(wù)端返回的一個(gè)javascript對(duì)象，如下所示：
var thisWeekMoive = { name: "Stephen Curry", comment: "最牛逼的三分投手，最萌的庫(kù)日天", imagePath: "/images/fd.jpg" } - 接下來(lái)，通過(guò)如下的賦值語(yǔ)句，將javascript對(duì)象中的name、comment、imagePath作為id為t001的text元素的內(nèi)容進(jìn)行設(shè)置。
document.getElementById("t001").innerHTML = thisWeekMovie.name; - 傳統(tǒng)方法的缺點(diǎn)：
- 傳統(tǒng)方法需要我們?cè)谑盏綌?shù)據(jù)后，或者說(shuō)每次這個(gè)數(shù)據(jù)被更新的時(shí)候，我們都需要執(zhí)行上面的一段代碼來(lái)對(duì)這個(gè)視圖進(jìn)行更新。
- 其次，上面這樣一段代碼它的維護(hù)是比較困難的。更新視圖中數(shù)據(jù)的代碼與頁(yè)面代碼緊耦合，不利于后期頁(yè)面的重新布局。
9.2 數(shù)據(jù)綁定(data binding)
- 我們應(yīng)該有一種機(jī)制能夠讓視圖中的每一個(gè)部分與對(duì)應(yīng)的數(shù)據(jù)做一個(gè)映射，即數(shù)據(jù)綁定。
- 在小程序框架中，每個(gè)頁(yè)面所需要的數(shù)據(jù)，都是集中在這個(gè)頁(yè)面所注冊(cè)的頁(yè)面對(duì)象PageObject中所定義的。因此，我們打開(kāi)weekly這個(gè)頁(yè)面所注冊(cè)的頁(yè)面對(duì)象所在的文件weekly.js。寫(xiě)入如下內(nèi)容：
Page({ data: { thisWeekMoive: { name: "Stephen Curry", comment: "最牛逼的三分投手，最萌的庫(kù)日天", imagePath: "/images/fd.jpg" }, count: 123 } }) - 接下來(lái)要把count的值渲染輸出到weekly.wxml視圖上顯示，我們通過(guò)一個(gè)雙大括號(hào)進(jìn)行基本的數(shù)據(jù)綁定。
<view class="container"> <text>本周推薦</text> <image src="../../images/fd.jpg"></image> <text>庫(kù)里</text> <text>點(diǎn)評(píng)：最牛逼的三分投手，最萌的庫(kù)日天。</text> <text>{{count}}</text> // 數(shù)據(jù)綁定 </view> - 我們還可以對(duì)內(nèi)部狀態(tài)變量進(jìn)行一些運(yùn)算或者說(shuō)對(duì)它們進(jìn)行一些組合來(lái)進(jìn)行輸出顯示。在weekly.js中再定義一個(gè)內(nèi)部狀態(tài)數(shù)據(jù)score。如下所示：
Page({ data: { thisWeekMovie: { name: "Stephen Curry", comment: "最牛逼的三分投手，最萌的庫(kù)日天", imagePath: "/images/fd.jpg" }, count: 123, score: 98 } }) - 接下來(lái)要把count+score的值渲染輸出到weekly.wxml視圖上顯示，說(shuō)明內(nèi)部狀態(tài)變量可以進(jìn)行一些運(yùn)算或組合后再進(jìn)行輸出。如下所示：
<view class="container"> <text>本周推薦</text> <image src="../../images/fd.jpg"></image> <text>庫(kù)里</text> <text>點(diǎn)評(píng)：最牛逼的三分投手，最萌的庫(kù)日天。</text> <text>{{count}}</text> <text>{{count + score}}</text> // 內(nèi)部狀態(tài)變量進(jìn)行一些運(yùn)算 </view> - 可以利用條件表達(dá)式對(duì)score內(nèi)部狀態(tài)變量進(jìn)行綁定，判斷出一個(gè)球員是否為優(yōu)秀、良好、中等、及格、差，并將其渲染在視圖中。
<view class="container"> <text>本周推薦</text> <image src="../../images/fd.jpg"></image> <text>庫(kù)里</text> <text>點(diǎn)評(píng)：最牛逼的三分投手，最萌的庫(kù)日天。</text> <text>{{count}}</text> <text>{{count + score}}</text> <text>{{(score >= 90)? "優(yōu)秀": "其他"}}</text> </view> - 接下來(lái)，對(duì)原始weekly.wxml視圖中的硬編碼進(jìn)行修改，利用thisWeekMovie內(nèi)部狀態(tài)變量進(jìn)行綁定。如下所示：
<view class="container"> <text>本周推薦</text> <image src="{{thisWeekMovie.imagePath}}"></image> <text>{{thisWeekMovie.name}}</text> <text>點(diǎn)評(píng)：{{thisWeekMovie.comment}}</text> <text>{{count}}</text> <text>{{count + score}}</text> <text>{{(score >= 90)? "優(yōu)秀": "其他"}}</text> </view> - 最后，可以在調(diào)試器窗口中的AppData中查看與修改每個(gè)頁(yè)面所包含的內(nèi)部狀態(tài)變量值與狀態(tài)。
10.小程序運(yùn)行環(huán)境與基本架構(gòu)
- 通過(guò)開(kāi)發(fā)者工具調(diào)試器的AppData這個(gè)type，我們可以實(shí)時(shí)的調(diào)試每個(gè)頁(yè)面的所有內(nèi)部狀態(tài)變量的取值。
- 運(yùn)行環(huán)境(宿主環(huán)境)：每個(gè)小程序都是運(yùn)行在它所在的微信客戶端上的，通過(guò)微信客戶端給它提供運(yùn)行環(huán)境，小程序可以直接獲取微信客戶端原生的體驗(yàn)和能力。
- 視圖層(渲染層)和邏輯層
- 各自的描述語(yǔ)言：wxml視圖文件和wxss樣式文件都是對(duì)渲染層的描述；腳本文件js都是對(duì)頁(yè)面的邏輯層的描述。
- 各自的運(yùn)行進(jìn)程：邏輯層的javascript代碼是統(tǒng)一運(yùn)行在JsCore進(jìn)程中；渲染層的每一個(gè)頁(yè)面都是在一個(gè)獨(dú)立的Webview進(jìn)程中進(jìn)行渲染。例如：about頁(yè)和weekly頁(yè)，都內(nèi)置了一個(gè)webviewId的內(nèi)部狀態(tài)變量，來(lái)記錄它們各自是在幾號(hào)Webview進(jìn)程當(dāng)中進(jìn)行渲染的。
- 基于數(shù)據(jù)綁定和事件機(jī)制進(jìn)行通訊
11.條件渲染
- wx:if：條件渲染——條件成立時(shí)組件才渲染生成。
- 我們現(xiàn)在想要做的一個(gè)改動(dòng)就是希望在視圖中，對(duì)于那些博主真正強(qiáng)烈推薦的NBA球員，我們要顯示一個(gè)強(qiáng)烈推薦的紅色標(biāo)識(shí)。
Page({ data: { thisWeekMovie: { name: "Stephen Curry", comment: "最牛逼的三分投手，最萌的庫(kù)日天。", imagePath: "/images/fd.jpg", isHighlyRecommended: true // 強(qiáng)烈推薦 }, count: 123, score: 98 } }) - 首先，把強(qiáng)烈推薦這個(gè)元素給定義出來(lái)。強(qiáng)烈推薦這個(gè)text元素，它的渲染生成的條件是：綁定到了thisWeekMovie.isHighlyRecommended屬性上。當(dāng)博主有對(duì)這個(gè)NBA球員標(biāo)記為強(qiáng)烈推薦時(shí)，返回的這個(gè)屬性的取值為true。那么這時(shí)候渲染生成條件成立，這個(gè)元素會(huì)被渲染生成；反正，則為false。那么這時(shí)候渲染生成條件不成立，這個(gè)元素不會(huì)被渲染生成。
<view class="container"> <text>本周推薦</text> <image src="{{thisWeekMovie.imagePath}}"></image> <text>{{thisWeekMovie.name}}</text> <text>點(diǎn)評(píng)：{{thisWeekMovie.comment}}</text> <text>{{count}}</text> <text>{{count + score}}</text> <text>{{(score >= 90)? "優(yōu)秀": "其他"}}</text> <text wx:if="{{thisWeekMovie.isHighlyRecommended}}" style="font-size: 16px; color: red;">強(qiáng)烈推薦</text> </view> - wx:if VS hidden屬性(傳統(tǒng)方法)
- 使用hidden屬性時(shí)，這個(gè)元素始終要先被渲染生成，hidden屬性只是控制了它的可見(jiàn)性而已。
- 對(duì)于元素可見(jiàn)性需要頻繁切換的場(chǎng)景，不建議使用條件渲染。
<view class="container"> <text>本周推薦</text> <image src="{{thisWeekMovie.imagePath}}"></image> <text>{{thisWeekMovie.name}}</text> <text>點(diǎn)評(píng)：{{thisWeekMovie.comment}}</text> <text>{{count}}</text> <text>{{count + score}}</text> <text>{{(score >= 90)? "優(yōu)秀": "其他"}}</text> <text hidden="{{!thisWeekMovie.isHighlyRecommended}}" style="font-size: 16px; color: red;">強(qiáng)烈推薦</text> </view>
12.列表渲染
- wx:for 列表渲染——重復(fù)的渲染生成組件。利用列表渲染可以一次性在weekly頁(yè)面中推薦多個(gè)NBA球員。首先修改weekly.js文件，增加多個(gè)球員的對(duì)象信息。
Page({ data: { weeklyMovieList: [{ name: "Stephen Curry", comment: "最牛逼的三分投手，最萌的庫(kù)日天。", imagePath: "/images/curry1.jpg", isHighlyRecommended: true }, { name: "Harden", comment: "最牛逼的碰瓷手，最長(zhǎng)的大胡子。", imagePath: "/images/harden1.jpg", isHighlyRecommended: true }, { name: "Durant", comment: "最牛逼的得分手，最強(qiáng)的死神。", imagePath: "/images/durant1.png", isHighlyRecommended: true }], count: 123, score: 98 } }) - 接著，對(duì)weekly.wxml視圖文件重新編寫(xiě)，注意其中的wx:for列表渲染語(yǔ)法。當(dāng)中，item和index屬性是列表渲染wx:for自帶的屬性。
<view class="movie" wx:for="{{weeklyMovieList}}"> <image class="movie-image" src="{{ item.imagePath}}"></image> <view class="movie-details"> <text>第{{index+1}}周：{{item.name}}</text> <text>點(diǎn)評(píng)：{{item.comment}}</text> <text wx:if="{{item.isHighlyRecommended}}" style="font-size: 16px; color: red">強(qiáng)烈推薦</text> </view> </view> - 最后，使用彈性盒子模型對(duì)頁(yè)面視圖進(jìn)行樣式布局。如下所示：
.movie { display: flex; } .movie-details { display: flex; flex-direction: column; width: 550rpx; } .movie-image { width: 200rpx; height: 200rpx; }
13.使用swipter組件
- 使用swipter組件——從列表展示變?yōu)榛脽羝啿フ故尽?strong>swipter元素用來(lái)表示一個(gè)滑動(dòng)容器，常用于幻燈片輪播或輪播圖效果。在設(shè)置幻燈片的寬高時(shí)，一般要在swipter元素上統(tǒng)一設(shè)置。
<view class=""> <swiper> <swiper-item class="movie" wx:for="{{weeklyMovieList}}" wx:key="key"> <image class="movie-image" src="{{ item.imagePath}}"></image> <view class="movie-details"> <text>第{{index+1}}周：{{item.name}}</text> <text>點(diǎn)評(píng)：{{item.comment}}</text> <text wx:if="{{item.isHighlyRecommended}}" style="font-size: 16px; color: red">強(qiáng)烈推薦</text> </view> </swiper-item> </swiper> </view> - 幻燈片輪播的樣式優(yōu)化
<view class=""> <swiper class="movie-swiper" indicator-dots="{{true}}" previous-margin="50rpx" next-margin="50rpx"> <swiper-item class="movie" wx:for="{{weeklyMovieList}}" wx:key="key"> <view class="container movie-card"> <image class="movie-image" src="{{ item.imagePath}}"></image> <text>第{{index+1}}周：{{item.name}}</text> <text>點(diǎn)評(píng)：{{item.comment}}</text> <text wx:if="{{item.isHighlyRecommended}}" style="font-size: 16px; color: red">強(qiáng)烈推薦</text> </view> </swiper-item> </swiper> </view> - 以下是weekly.wxss文件內(nèi)容：
.movie { display: flex; } .movie-swiper { height: 90vh; } .movie-card { height: 100%; width: 100%; background: #eee; margin: 0 20rpx; } .movie-image { width: 200rpx; height: 200rpx; }
14.頁(yè)面的生命周期函數(shù)
- 需求1：在swiper中如何默認(rèn)切換到最后一頁(yè)幻燈片？
<view class=""> <swiper class="movie-swiper" indicator-dots="{{true}}" previous-margin="50rpx" next-margin="50rpx" current="{{weeklyMovieList.length - 1}}"> <swiper-item class="movie" wx:for="{{weeklyMovieList}}" wx:key="key"> <view class="container movie-card"> <image class="movie-image" src="{{ item.imagePath}}"></image> <text>第{{index+1}}周：{{item.name}}</text> <text>點(diǎn)評(píng)：{{item.comment}}</text> <text wx:if="{{item.isHighlyRecommended}}" style="font-size: 16px; color: red">強(qiáng)烈推薦</text> <text bindtap="f0" wx:if="{{index < (weeklyMovieList.length - 1)}}" class="return-button">返回本周</text> </view> </swiper-item> </swiper> </view> - 上面在weekly.ml文件中直接添加swiper元素的current屬性，可以實(shí)現(xiàn)默認(rèn)切換到最后一頁(yè)幻燈片。但是，當(dāng)實(shí)現(xiàn)需求2時(shí)無(wú)法給返回本周按鈕綁定內(nèi)部狀態(tài)數(shù)據(jù)currentIndex。根本原因是：由于在小程序中邏輯層與渲染層是獨(dú)立的，小程序并沒(méi)有提供類(lèi)似于DOM這樣的API，讓邏輯層的javascript對(duì)渲染層進(jìn)行直接更新。因此，首先需要在渲染層建立對(duì)內(nèi)部狀態(tài)數(shù)據(jù)currentIndex的綁定。然后在邏輯層的javascript中通過(guò)對(duì)渲染層所綁定的內(nèi)部狀態(tài)數(shù)據(jù)更新，間接的對(duì)渲染層數(shù)據(jù)進(jìn)行更新。所以，先要在weekly.js文件中定義內(nèi)部狀態(tài)數(shù)據(jù)currentIndex。
Page({ data: { weeklyMovieList: [{ name: "Stephen Curry", comment: "最牛逼的三分投手，最萌的庫(kù)日天。", imagePath: "/images/curry1.jpg", isHighlyRecommended: true }, { name: "Harden", comment: "卡戴珊的最強(qiáng)對(duì)手，最穩(wěn)的罰球與歐洲步。", imagePath: "/images/harden1.jpg", isHighlyRecommended: true }, { name: "Durant", comment: "最牛逼的得分手，最強(qiáng)的死神來(lái)啦。", imagePath: "/images/durant.jpg", isHighlyRecommended: true }], count: 123, score: 98, currentIndex: 0 }, onLoad: function(options) { this.setData({ currentIndex: this.data.weeklyMovieList.length - 1 }) } }) - 接著，在weekly.wxml文件中重新給current綁定一個(gè)內(nèi)部狀態(tài)數(shù)據(jù)currentIndex，如下所示：
<view class=""> <swiper class="movie-swiper" indicator-dots="{{true}}" previous-margin="50rpx" next-margin="50rpx" current="{{currentIndex}}"> <swiper-item class="movie" wx:for="{{weeklyMovieList}}" wx:key="key"> <view class="container movie-card"> <image class="movie-image" src="{{ item.imagePath}}"></image> <text>第{{index+1}}周：{{item.name}}</text> <text>點(diǎn)評(píng)：{{item.comment}}</text> <text wx:if="{{item.isHighlyRecommended}}" style="font-size: 16px; color: red">強(qiáng)烈推薦</text> <text bindtap="f0" wx:if="{{index < (currentIndex)}}" class="return-button">返回本周</text> </view> </swiper-item> </swiper> </view> - 需求2：在非本周幻燈片頁(yè)面添加“返回本周”按鈕
.movie { display: flex; } .movie-swiper { height: 90vh; } .movie-card { height: 100%; width: 100%; background: #eee; margin: 0 20rpx; position: relative; } .movie-image { width: 200rpx; height: 200rpx; } .return-button { position: absolute; right: 0; top: 40px; font-size: 26rpx; font-style: italic; border: 1px solid blue; border-right: 0; border-radius: 10%; } - 頁(yè)面的生命周期及頁(yè)面生命周期函數(shù)：onLoad(options)、onShow(options)、onReady(options)、onHide(options)、onUnload(options)
- 小程序注冊(cè)完成后，加載頁(yè)面，觸發(fā)onLoad方法，一個(gè)頁(yè)面只會(huì)調(diào)用一次；
- 頁(yè)面載入后觸發(fā)onShow方法，顯示頁(yè)面，每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次；
- 首次顯示頁(yè)面，會(huì)觸發(fā)onReady方法，渲染頁(yè)面和樣式，一個(gè)頁(yè)面只會(huì)調(diào)用一次；
- 當(dāng)小程序后臺(tái)運(yùn)行或跳轉(zhuǎn)到其他頁(yè)面時(shí)，觸發(fā)onHide方法；
- 當(dāng)小程序從后臺(tái)進(jìn)入前臺(tái)運(yùn)行或重新載入頁(yè)面時(shí)，觸發(fā)onShow方法；
- 當(dāng)使用wx.readirectTo(OBJECT)或關(guān)閉當(dāng)前頁(yè)返回上一頁(yè)wx.navigateBack(),觸發(fā)onUnload
- 小程序的生命周期app.js
- 用戶首次打開(kāi)小程序，會(huì)觸發(fā)onLauch(全局只觸發(fā)一次)；
- 小程序初始化完成后，觸發(fā)onShow方法，監(jiān)聽(tīng)小程序顯示；
- 小程序從前臺(tái)進(jìn)入后臺(tái)，觸發(fā)onHide方法；
- 小程序從后臺(tái)進(jìn)入前臺(tái)顯示，觸發(fā)onShow方法；
- 小程序后臺(tái)運(yùn)行一定時(shí)間，或系統(tǒng)資源占用過(guò)高，會(huì)被銷(xiāo)毀；
?
本文摘自 ：https://blog.51cto.com/u
