笔记内容：第四个页面：制作电影资讯页面
笔记日期：2018-01-18

崇信ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联建站的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！

点击轮播图跳转到文章详情页面

之前的文章列表页面还有一个小功能没有实现，就是点击点击轮播图就能跳转到相应的文章详情页面，这个和点击文章列表跳转到文章详情页面的实现方式是一样的。

post.wxml修改轮播图代码如下：

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

  onSwiperTap:function(event){
    // target和currentTarget的区别在于，前者代表的是当前点击的组件，后者代表的是事件捕获的组件
    // 在这段代码里，target代表image组件，currentTarget代表swiper组件
    var postId = event.target.dataset.postid;
    wx.navigateTo({
      url: 'post-detail/post-detail?id=' + postId,
    });
  },

加入tab选项卡

现在我们就可以开始编写电影资讯页面了，为此我们需要给我们的小程序加入一个tab选项卡，这样才能够方便的切换到不同的主题页面上。像这个tab选项卡这种常用的组件，微信已经提供了现成的，无需我们自己去实现。

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

官方的说明文档如下：

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

注：tabBar 中的 list 属性是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

首先我们需要构建电影资讯页面的目录、文件，在pages目录下创建movies目录并在该目录下创建相应的文件：

在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",  // 跳转的页面
        "text": "阅读"  // 选项卡的文本内容
      },
      {
        "pagePath": "pages/movies/movies",
        "text": "电影"
      }
    ]
  }
}

配置完app.json后还需要修改welcome.js代码中的跳转方法，需要将原本的redirectTo方法修改成switchTab方法来实现页面的跳转。switchTab方法用于跳转到有 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选项卡

虽然我们已经完成了简单的选项卡效果，可是默认的样式实在不忍直视，所以我们还得完善这个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分析

我们需要做一个这样的电影资讯页面：

根据分析效果图，可以看到页面的布局是一排一排重复的的，每一排里都有三个电影，所以这样的重复性的布局以及样式我们可以做成一个template进行复用：

当点击 “更多” 时进入的页面效果图如下：

从效果图，可以看到图片、电影名称以及评分都是和电影资讯页面上的布局以及样式是重复的，所以我们还需要把这部分做成第二个template进行复用：

再来看一张效果图：

这是电影的详情页面，这里也用到了一个评分样式，这个样式也是重复的，所以我们还需要把这个样式做成第三个template进行复用。

3个嵌套template标签的实现

先创建好各个template的目录结构：

我这里是先实现评分样式的template：

stars-template.wxml内容如下：

stars-template.wxss内容如下：

.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内容如下：