微信小程序入门级教程-09

前言

  本系列教程从第一篇到上节课一共讲述了八篇文章了，讲的都是一些本地假数据和一般的文章列表，详情等基础的东西，那么从这节课开始，我们将正式开始进入好玩的部分知识了-电影模块了！闲话少说，正式开始吧。

目录

https://www.jianshu.com/p/9c9b555b52e8

Tab导航栏

我们在之前页面上最开始随便写了一些导航，如下所示：

导航栏

在本节教程中，我们就要开始正式使用小程序的tab导航栏了：

{
  "pages": [
    "pages/movies/movies",
    "pages/talk/talk",
    "pages/talk-details/talk-details"
  ],
  "window": {
    "navigationBarBackgroundColor": "#d4d4d4"
  },

  // 配置导航栏
  "tabBar": {
    "color": "#fff", // 默认文字为白色
    "selectedColor": "#87ceeb", // 获取焦点的文字颜色
    "borderStyle": "black", // 边框风格：黑色
    "backgroundColor": "#2c2e3b", // 导航背景颜色
    // 导航的栏目必须在2-5个之间，否则无效，切记！
    "list": [{
      "pagePath": "pages/talk/talk", // 点击导航跳转的页面路径
      "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"
    }]
  }
}

配置完成后的效果如下所示：

导航

正式开始电影页面的编写

我们需要的页面最终效果如下所示：

页面结构

1. 新建电影页面文件夹movies，然后在文件下新建movies.wxml / wxss / js / json四个文件。

2. 由于每一行都是一样的，所以我们把每一行都封装成一个组件,在movies下新建文件夹movieList，然后在其文件中新建movie-list-template.wxml和movie-list-template.wxss文件，因为模板文件只需要这两个文件即可，模板结构如下所示：
   

   

   movieList模板结构

3. 由于每一篇文章都是一样的结构，封面，标题和评分，所以每一篇文章也可以封装成一个组件，所以我们在movies文件夹下新建文件夹movie，然后在其下新建movie-template.wxml和movie-template.wxss，模板结构如下所示：
   

   

   movie模板结构

4. 由于每篇文章中的评分都是一样的，所以我们也要把评分这个控件给单独列出来，在movies文件夹下新建stars文件夹，然后在其下新建stars-template.wxss和stars-template.wxml，模板结构如下所示：
   

   

   stars模板结构

那么最终的文件结构如下所示：

项目部分结构图

5. 编写评分的模板文件stars-template.wxml

6. 编写文章的模板文件movie-template.wxml

 // 引入编写的星星组件