筆記內(nèi)容：第四個頁面：制作電影資訊頁面
筆記日期：2018-01-18

崇信ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

點擊輪播圖跳轉(zhuǎn)到文章詳情頁面

之前的文章列表頁面還有一個小功能沒有實現(xiàn)，就是點擊點擊輪播圖就能跳轉(zhuǎn)到相應的文章詳情頁面，這個和點擊文章列表跳轉(zhuǎn)到文章詳情頁面的實現(xiàn)方式是一樣的。

post.wxml修改輪播圖代碼如下：

post.js文件增加如下代碼：

  onSwiperTap:function(event){
    // target和currentTarget的區(qū)別在于，前者代表的是當前點擊的組件，后者代表的是事件捕獲的組件
    // 在這段代碼里，target代表image組件，currentTarget代表swiper組件
    var postId = event.target.dataset.postid;
    wx.navigateTo({
      url: 'post-detail/post-detail?id=' + postId,
    });
  },

加入tab選項卡

現(xiàn)在我們就可以開始編寫電影資訊頁面了，為此我們需要給我們的小程序加入一個tab選項卡，這樣才能夠方便的切換到不同的主題頁面上。像這個tab選項卡這種常用的組件，微信已經(jīng)提供了現(xiàn)成的，無需我們自己去實現(xiàn)。

如果小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現(xiàn)，以及 tab 切換時顯示的對應頁面。

官方的說明文檔如下：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

注：tabBar 中的 list 屬性是一個數(shù)組，只能配置最少2個、最多5個 tab，tab 按數(shù)組的順序排序。

首先我們需要構(gòu)建電影資訊頁面的目錄、文件，在pages目錄下創(chuàng)建movies目錄并在該目錄下創(chuàng)建相應的文件：

在app.json里配置movies頁面以及tabBar：

{
  "pages": [
    "pages/welcome/welcome",
    "pages/posts/post",
    "pages/posts/post-detail/post-detail",
    "pages/movies/movies"  // 配置movies頁面
  ],
  "window": {
    "navigationBarBackgroundColor": "#405f80"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/posts/post",  // 跳轉(zhuǎn)的頁面
        "text": "閱讀"  // 選項卡的文本內(nèi)容
      },
      {
        "pagePath": "pages/movies/movies",
        "text": "電影"
      }
    ]
  }
}

配置完app.json后還需要修改welcome.js代碼中的跳轉(zhuǎn)方法，需要將原本的redirectTo方法修改成switchTab方法來實現(xiàn)頁面的跳轉(zhuǎn)。switchTab方法用于跳轉(zhuǎn)到有 tabBar 選項卡的頁面，并關閉其他所有非 tabBar 頁面。修改代碼如下：

Page({
  onTap:function(){
    wx.switchTab({
      url: "../posts/post",
    });
  },
})

官方文檔如下：

https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxswitchtabobject

完成以上修改后，編譯運行效果如下：

注：選項卡的順序是與list里的元素順序一致的。

完善tab選項卡

雖然我們已經(jīng)完成了簡單的選項卡效果，可是默認的樣式實在不忍直視，所以我們還得完善這個tab選項卡。其實也很簡單，加上兩張圖片就好了：

"tabBar": {
    "borderStyle":"white",
    "list": [
      {
        "pagePath": "pages/posts/post",
        "text": "閱讀",
        "iconPath":"images/tab/yuedu.png",  // 沒被選中時顯示的圖片
        "selectedIconPath":"images/tab/yuedu_hl.png"  // 被選中時顯示的圖片
      },
      {
        "pagePath": "pages/movies/movies",
        "text": "電影",
        "iconPath": "images/tab/dianying.png",
        "selectedIconPath": "images/tab/dianying_hl.png"
      }
    ]
  }

完成效果：

tabBar里還有一個position屬性，該屬性可以設置選項卡居頂部或居底部，例如我要選項卡居頂部，就可以在app.json文件中加上這一句配置：

"position":"top",

完成效果：

電影頁面嵌套template分析

我們需要做一個這樣的電影資訊頁面：

根據(jù)分析效果圖，可以看到頁面的布局是一排一排重復的的，每一排里都有三個電影，所以這樣的重復性的布局以及樣式我們可以做成一個template進行復用：

當點擊 “更多” 時進入的頁面效果圖如下：

從效果圖，可以看到圖片、電影名稱以及評分都是和電影資訊頁面上的布局以及樣式是重復的，所以我們還需要把這部分做成第二個template進行復用：

再來看一張效果圖：

這是電影的詳情頁面，這里也用到了一個評分樣式，這個樣式也是重復的，所以我們還需要把這個樣式做成第三個template進行復用。

3個嵌套template標簽的實現(xiàn)

先創(chuàng)建好各個template的目錄結(jié)構(gòu)：

我這里是先實現(xiàn)評分樣式的template：

stars-template.wxml內(nèi)容如下：

stars-template.wxss內(nèi)容如下：

.stars-container{
  display: flex;
  flex-direction: row;
}

.stars{
  display: flex;
  flex-direction: row;
  height: 17rpx;
  margin-right: 24rpx;
  margin-top: 6rpx;
}

.stars image{
  padding-left: 3rpx;
  height: 17rpx;
  width: 17rpx;
}

.star-score{
  color: #1f3463
}

然后就是電影列表的template了，movie-template.wxml內(nèi)容如下：