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