技術交流QQ群:1027579432，歡迎你的加入！

?

1.創(chuàng)建項目和目錄文件結構

• 小程序包含一個描述整體程序的app和多個描述各自頁面的page。
• 一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：
  
  
• 一個小程序頁面由四個文件組成，如下圖所示：
  
  
• 注意：為了方便開發(fā)者減少配置項，描述頁面的四個文件必須具有相同的路徑與文件名。
• 由于一個小程序可能有多個頁面，所以在根目錄下創(chuàng)建pages文件夾。假設小程序僅有一個詳情頁面about，因此為了便于管理在pages文件夾下創(chuàng)建about文件夾。里面新建4個與小程序頁面相關的文件：about.js、about.json、about.wxml、about.wxss。同時，在根目錄下創(chuàng)建小程序全局相關文件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": "關于"
  }
  

• 接著，在app.js文件中，最簡單的方法是注冊一個空的頁面對象。添加如下內(nèi)容：

  Page({})
  

2.view、text、image組件(元素)

• 所有的wxml組件元素都是既有開始標記又有結束標記。都是雙標簽!
• view組件元素相當于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)方式：相關的wxss屬性賦值非常分散。

  /* 傳統(tǒng)方式 */
  .container {
  background-color: #eee;
  height: 100vh;
  text-align: center;
  }
  
  text {
  display: block;
  }
  
  image, text {
  margin-bottom: 60px;
  }
  

• 彈性布局方式：相關的wxss屬性賦值比較統(tǒng)一，方式靈活。

  /* flex彈性布局方式 */
  .container {
  background-color: #eee;
  height: 100vh;
  display: flex;
  /* 修改主軸 */
  flex-direction: column;  
  justify-content: space-around;
  align-items: center;
  }
  

4.響應式長度單位rpx

• 問題的引入：如何讓元素大小適配不同寬度屏幕？使用px這種絕對長度單位無法始終保持圖片寬度和高度為屏幕的一半。
• 小程序規(guī)定所有設備的屏幕寬高均為750rpx。

  .about-banner {
  width: 375rpx;
  height: 375rpx;
  }
  

• iPhone6的屏幕尺寸為375px*667px，而小程序規(guī)定所有設備的屏幕的寬高均為750rpx。因此，兩者寬度的關系剛好是1:2關系(即px:rpx=1:2)，便于換算。

  /* 例如，在視覺設計稿中規(guī)定margin-left屬性設置為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)容，設置頁面的標題。

  {
  "navigationBarTitleText": "人物介紹"
  }
  

6.使用navigator組件實現(xiàn)從about頁面跳轉(zhuǎn)到weekly頁面

• 通過將about頁面的路徑作為第一個路徑頁登記，這樣就恢復成了小程序的初始頁面。

  {
  "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。默認值是navigate，當設置為redirect時，表示一般頁面發(fā)生跳轉(zhuǎn)后，無法點擊頁面左上角的返回按鈕進行返回。
• navigator組件中有一個重要的點擊態(tài)屬性hover-class。當鼠標點擊時，會出現(xiàn)鼠標點擊后的效果。在about.wxss文件中加入樣式。

  .nav-hover {
      color: red;
  }
  

• 使用hover-class時的注意點：當鼠標點擊導航鏈接前，就已經(jīng)給導航鏈接設置初始樣式為藍色。當鼠標點擊時，會發(fā)現(xiàn)導航鏈接并沒有變?yōu)榧t色。這是因為點擊導航鏈接時，會將nav-hover賦值為class屬性。而在css中，權重值相同時，會發(fā)生覆蓋現(xiàn)象(就近原則)。因此，在css中需要將.nav-hover的樣式寫在.nav-default之后即可解決上面的問題。

  .nav-default {
      color: blue;
  }
  

7.配置tabBar[標簽欄]——對若干一級頁面的入口鏈接

• 很多時候，對于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": "關于",
          "pagePath": "pages/about/about",
          "iconPath": "images/icons/index.png",
          "selectedIconPath": "images/icons/index-selected.png"
      }
      ],
      "color": "#000",
      "selectedColor": "#00f"
  }
  }
  

• 新的問題：點擊導航鏈接時，頁面無法實現(xiàn)跳轉(zhuǎn)。原因是：全局配置文件app.json中的list參數(shù)已經(jīng)加載了pagePath，但是tabBar還增加了標簽欄。因此，我們在進行鼠標點擊時，不能僅僅考慮頁面的跳轉(zhuǎn)，還要考慮tabBar標簽欄的跳轉(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.配置全局的頂部導航欄樣式

• 原先的about頁面頂部導航欄默認是黑色背景，黑字?？梢栽赼bout.json文件中修改為黑字，白色背景。

  {
  "navigationBarTitleText": "關于",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle": "black"
  }
  

• 同時，為了使weekly頁面的頂部導航欄樣式與about頁面頂部導航欄樣式一樣，因此，可以復制上面的代碼到weekly.json文件中。

  {
  "navigationBarTitleText": "人物介紹",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle": "black"
  }
  

• 但是，以上代碼直接復制的方法，必然會帶來代碼升級時的問題。因此，必須在全局配置文件app.json文件中寫入window屬性進行設置。

  {
  "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": "關于",
          "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人物周周看"   # 某個頁面默認的頂部導航欄標題，如果某個頁面沒有單獨設置此屬性，就用全局配置文件中的
  }
  }
  

9.數(shù)據(jù)綁定

9.1 基于DOM API手動更新視圖的傳統(tǒng)方法

• 在之前講到的about.wxml和weekly.wxml視圖文件中，相關的數(shù)據(jù)都是進行直接硬編碼。直接硬編碼對一些數(shù)據(jù)不變頻繁發(fā)生變化的頁面(如about頁面)是合適的。但是，對于像weekly頁面中大量的數(shù)據(jù)是頻繁變化的需要是不合適的。
• 直接硬編碼weekly頁面中的數(shù)據(jù)，在weekly.wxml文件是無法提前獲知的。需要在小程序運行的過程中，動態(tài)的從服務器端去獲取，然后再渲染輸出到這個weekly.wxml視圖中進行顯示。
• 傳統(tǒng)方式解決上述直接硬編碼問題：一般來說，會在頁面加載的過程中，通過一個Ajax調(diào)用來請求server返回本周推薦球員的詳細信息。假設客戶端收到了服務端返回的一個javascript對象，如下所示：

  var thisWeekMoive = {
      name: "Stephen Curry",
      comment: "最牛逼的三分投手，最萌的庫日天",
      imagePath: "/images/fd.jpg"
  }
  

• 接下來，通過如下的賦值語句，將javascript對象中的name、comment、imagePath作為id為t001的text元素的內(nèi)容進行設置。

  document.getElementById("t001").innerHTML = thisWeekMovie.name;
  

• 傳統(tǒng)方法的缺點：
  • 傳統(tǒng)方法需要我們在收到數(shù)據(jù)后，或者說每次這個數(shù)據(jù)被更新的時候，我們都需要執(zhí)行上面的一段代碼來對這個視圖進行更新。
  • 其次，上面這樣一段代碼它的維護是比較困難的。更新視圖中數(shù)據(jù)的代碼與頁面代碼緊耦合，不利于后期頁面的重新布局。

9.2 數(shù)據(jù)綁定(data binding)

• 我們應該有一種機制能夠讓視圖中的每一個部分與對應的數(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視圖上顯示，我們通過一個雙大括號進行基本的數(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)變量進行一些運算或者說對它們進行一些組合來進行輸出顯示。在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)變量可以進行一些運算或組合后再進行輸出。如下所示：

  <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)變量進行一些運算
  </view>
  

• 可以利用條件表達式對score內(nèi)部狀態(tài)變量進行綁定，判斷出一個球員是否為優(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視圖中的硬編碼進行修改，利用thisWeekMovie內(nèi)部狀態(tài)變量進行綁定。如下所示：

  <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)境與基本架構

• 通過開發(fā)者工具調(diào)試器的AppData這個type，我們可以實時的調(diào)試每個頁面的所有內(nèi)部狀態(tài)變量的取值。
  
• 運行環(huán)境(宿主環(huán)境)：每個小程序都是運行在它所在的微信客戶端上的，通過微信客戶端給它提供運行環(huán)境，小程序可以直接獲取微信客戶端原生的體驗和能力。
• 視圖層(渲染層)和邏輯層
  • 各自的描述語言：wxml視圖文件和wxss樣式文件都是對渲染層的描述；腳本文件js都是對頁面的邏輯層的描述。
  • 各自的運行進程：邏輯層的javascript代碼是統(tǒng)一運行在JsCore進程中；渲染層的每一個頁面都是在一個獨立的Webview進程中進行渲染。例如：about頁和weekly頁，都內(nèi)置了一個webviewId的內(nèi)部狀態(tài)變量，來記錄它們各自是在幾號Webview進程當中進行渲染的。
  • 基于數(shù)據(jù)綁定和事件機制進行通訊
    

11.條件渲染

• wx:if：條件渲染——條件成立時組件才渲染生成。
• 我們現(xiàn)在想要做的一個改動就是希望在視圖中，對于那些博主真正強烈推薦的NBA球員，我們要顯示一個強烈推薦的紅色標識。

  Page({
  data: {
      thisWeekMovie: {
      name: "Stephen Curry",
      comment: "最牛逼的三分投手，最萌的庫日天。",
      imagePath: "/images/fd.jpg",
      isHighlyRecommended: true    // 強烈推薦
      },
      count: 123,
      score: 98
  }
  })
  

• 首先，把強烈推薦這個元素給定義出來。強烈推薦這個text元素，它的渲染生成的條件是：綁定到了thisWeekMovie.isHighlyRecommended屬性上。當博主有對這個NBA球員標記為強烈推薦時，返回的這個屬性的取值為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;">強烈推薦</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;">強烈推薦</text>
  </view>
  

12.列表渲染

• wx:for 列表渲染——重復的渲染生成組件。利用列表渲染可以一次性在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: "最牛逼的得分手，最強的死神。",
      imagePath: "/images/durant1.png",
      isHighlyRecommended: true
      }],
      count: 123,
      score: 98
  }
  })
  

• 接著，對weekly.wxml視圖文件重新編寫，注意其中的wx:for列表渲染語法。當中，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">強烈推薦</text>
      </view>
  </view>
  

• 最后，使用彈性盒子模型對頁面視圖進行樣式布局。如下所示：

  .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元素用來表示一個滑動容器，常用于幻燈片輪播或輪播圖效果。在設置幻燈片的寬高時，一般要在swipter元素上統(tǒng)一設置。

  <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">強烈推薦</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">強烈推薦</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中如何默認切換到最后一頁幻燈片？

  <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">強烈推薦</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)默認切換到最后一頁幻燈片。但是，當實現(xiàn)需求2時無法給返回本周按鈕綁定內(nèi)部狀態(tài)數(shù)據(jù)currentIndex。根本原因是：由于在小程序中邏輯層與渲染層是獨立的，小程序并沒有提供類似于DOM這樣的API，讓邏輯層的javascript對渲染層進行直接更新。因此，首先需要在渲染層建立對內(nèi)部狀態(tài)數(shù)據(jù)currentIndex的綁定。然后在邏輯層的javascript中通過對渲染層所綁定的內(nèi)部狀態(tài)數(shù)據(jù)更新，間接的對渲染層數(shù)據(jù)進行更新。所以，先要在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: "卡戴珊的最強對手，最穩(wěn)的罰球與歐洲步。",
          imagePath: "/images/harden1.jpg",
          isHighlyRecommended: true
      },
      {
          name: "Durant",
          comment: "最牛逼的得分手，最強的死神來啦。",
          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">強烈推薦</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)用一次；
  • 當小程序后臺運行或跳轉(zhuǎn)到其他頁面時，觸發(fā)onHide方法；
  • 當小程序從后臺進入前臺運行或重新載入頁面時，觸發(fā)onShow方法；
  • 當使用wx.readirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack(),觸發(fā)onUnload
• 小程序的生命周期app.js
  • 用戶首次打開小程序，會觸發(fā)onLauch(全局只觸發(fā)一次)；
  • 小程序初始化完成后，觸發(fā)onShow方法，監(jiān)聽小程序顯示；
  • 小程序從前臺進入后臺，觸發(fā)onHide方法；
  • 小程序從后臺進入前臺顯示，觸發(fā)onShow方法；
  • 小程序后臺運行一定時間，或系統(tǒng)資源占用過高，會被銷毀；