微信小程序入门级教程-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"
}]
}
}
配置完成后的效果如下所示：
导航
正式开始电影页面的编写
我们需要的页面最终效果如下所示：
页面结构
-
新建电影页面文件夹
movies，然后在文件下新建movies.wxml / wxss / js / json四个文件。 -
由于每一行都是一样的，所以我们把每一行都封装成一个组件,在
movies下新建文件夹movieList，然后在其文件中新建movie-list-template.wxml和movie-list-template.wxss文件，因为模板文件只需要这两个文件即可，模板结构如下所示：
movieList模板结构
-
由于每一篇文章都是一样的结构，封面，标题和评分，所以每一篇文章也可以封装成一个组件，所以我们在
movies文件夹下新建文件夹movie，然后在其下新建movie-template.wxml和movie-template.wxss，模板结构如下所示：
movie模板结构
-
由于每篇文章中的评分都是一样的，所以我们也要把评分这个控件给单独列出来，在
movies文件夹下新建stars文件夹，然后在其下新建stars-template.wxss和stars-template.wxml，模板结构如下所示：
stars模板结构
movieList模板结构
movie模板结构
stars模板结构
那么最终的文件结构如下所示：
项目部分结构图
- 编写评分的模板文件
stars-template.wxml
<template name="starsTemplate">
<view>
<image src="/images/icon/star.png"></image>
<image src="/images/icon/star.png"></image>
<image src="/images/icon/star.png"></image>
<image src="/images/icon/star.png"></image>
<image src="/images/icon/star.png"></image>
<text></text>
</view>
</template>
- 编写文章的模板文件
movie-template.wxml
<import src="../stars/stars-template.wxml" /> // 引入编写的星星组件
<template name="movieTemplate">
<view>
<image src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2511355624.webp"></image>
<text>唐人街探案2</text>
<template is="starsTemplate" />
</view>
</template>
- 编写每一行文章的文章列表组件
movie-list-template.wxml
<import src="../movie/movie-template.wxml" /> // 引入文章模板组件
<template name="movieListTemplate">
<view>
<view>
<text>正在热映</text>
<view>
<text>更多</text>
<image src="/images/icon/arrow-right.png"></image>
</view>
</view>
<template is="movieTemplate" />
<template is="movieTemplate" />
<template is="movieTemplate" />
</view>
</template>
- 编写最终的movies页面
movies.wxml
<import src="movieList/movie-list-template.wxml" /> // 引入文章列表组件
<view>
<template is="movieListTemplate" />
<template is="movieListTemplate" />
<template is="movieListTemplate" />
</view>
- 查看页面是否正确引入所有模板文件
页面结构图
- 可以看到我们的页面中，所有嵌套的组件都已经全部展示了出来，没有任何问题，只是我们在这里还没有写样式，下面贴出样式，形成最终我们的效果图：
movie-list-template.wxml
<import src="../movie/movie-template.wxml" />
<template name="movieListTemplate">
<view class="movie-list-container">
<div class="inner-container">
<view class="movie-head">
<text class="slogan">正在热映</text>
<view class="more">
<text class="more-text">更多</text>
<image class="more-img" src="/images/icon/arrow-right.png"></image>
</view>
</view>
<view class="movies-container">
<template is="movieTemplate" />
<template is="movieTemplate" />
<template is="movieTemplate" />
</view>
</div>
</view>
</template>
movie-list-template.wxss
@import "../movie/movie-template.wxss";
.movie-list-container{
display: flex;
flex-direction: column;
background: #fff;
}
.inner-container{
margin: 0 auto 20rpx;
}
.movie-head{
padding: 30rpx 20rpx 22rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.slogan{
font-style: 24rpx;
}
.more-text{
margin-right: 10rpx;
color: #1f4ba5;
}
.more-img{
width: 9rpx;
height: 16rpx;
}
.movies-container{
display: flex;
flex-direction: row;
}
最终模板图
后言
那么在本节课中，我们就讲解了多层模板的嵌套和关于弹性盒子其中的一个新属性justify-content: space-between，大家可以自己百度一下，看看弹性盒子的属性，挺多的其实，但是对于布局，弹性盒子其实很不错。
项目源码：demigod-liu / douban-movies
说明
原创作品，禁止转载和伪原创，违者必究！
