微信小程序由于适用性强、逻辑简要、开发迅速的特性，叠加具有海量活跃用户的腾讯公司背景，逐渐成为了轻量级单一功能应用场景的较佳承载方式，诸如电影购票、外卖点餐、移动商城、生活服务等场景服务提供商迅速切入了。
为了贴合实际的应用情况，本篇以豆瓣评分小程序为参考样例，边做边学小程序的入门开发知识。
Ŀ¼
效果图Demo源码开发环境了解官方样例 开发者工具 样例源码结构开发实战 底部Tab卡页 分析开发需求 评分条模板 rpx长度单位 数据绑定 条件渲染 列表渲染 电影海报模板 模板的使用 区块模板 主页 网络请求 逻辑实现 setData 点击事件 详情页 更多页扩展知识思考题
效果图
先看一下对比效果图，共三个页面，分别为首页、更多页和详情页，左侧为豆瓣评分官方小程序，右侧为仿作。因API数据问题，没有做搜索功能。
主页
img更多页
img详情页
imgDemo源码
本篇完整源码已提交在: https://github.com/cnwen/wechatapp_movie
开发环境
调试基础库：1.9.91（2018.03.07）
微信开发者工具：Windows版v1.02.1802270
了解官方样例
打开微信开发者工具，新建一个小程序项目。
1.选择项目代码存放的目录；
2.填入你的小程序AppID（若无AppID请点击“注册”获取，也可选择“体验小程序”，如需真机预览须有AppID）；
3.勾选“建立普通快速启动模板”。
点击“确定”按钮后，开发者工具将为我们建立一个简单的小程序模板，我们可以通过这个样例来建立对开发者工具和小程序的初步认识。
img开发者工具
我们观察开发者工具，发现由三个主要区域构成，分别是模拟器、编辑器和调试器。
img模拟器：顶端含有三个下拉列表，可以配置模拟的机型和所处的网络环境。
编辑器：分为源码目录区域和代码区域。
调试器：顶端含有控制台、网络、存储等选项卡页。
样例源码结构
根目录含有pages、utils文件夹和三个名称为app的文件。顾名思义，pages正是存放小程序各个页面的文件夹，一些公共的工具类建议放在utils文件夹，app文件是小程序的全局文件。
点击查看app.json文件的源码，可以看到含有pages和window两个键值对。
imgpages负责配置小程序的页面，里面有2条路径，分别对应index和logs页面。
Tips：1.第一条路径固定为小程序的首页，如果把logs路径放到首位，那么logs页面是首页；2.同一个页面的js/wxml/wxss文件的名称必须相同，因为路径是以文件名称来识别的，路径是“pages/index/index”，注意后面不带js/wxml/wxss等后缀，系统会在该路径寻找需要格式文件；3.需要显示的独立页面都需要在此处配置，template模板文件则不需要。
window负责全局的窗口配置，如导航栏背景色、导航栏文字等。你可以修改它们的值，保存后在模拟器上看到效果。
试试将navigationBarBackgroundColor的值改为#ffae00，将navigationBarTitleText的值改为“电影排行榜”，按Ctrl+S键保存看看模拟器中的效果吧。
Tips:1.backgroundTextStyle的值目前只有两种：light和dark；2.navigationBarTextStyle的值目前只有两种：black和white。
回到源码目录，对比index和logs页面的构成，发现index页面并没有.json文件，可见这个文件并非是必须的。但是，如果有这个文件，那么必然不能为空，否则控制台会报错，可在里面写入一个大括号{}保存即可。
开发实战
官方样例先认识到这里，我们对开发者工具和小程序源码构成有了一个初步的印象后，开始边做边学。
底部Tab卡页
我们使用鼠标右键将源码目录pages下的index/logs两个文件夹删除，并打开app.json，在pages的值中配置下图中的两条路径。
img按Ctrl+S键保存，开发者工具将自动在指定路径为我们创建两个页面，如下图所示。
img此时，模拟器中的首页已经变成了movies目录下的index页面，因为我们刚才把这个页面的路径配置在app.json文件中pages值的首位了。
img如果我们要查看mine页面怎么办呢？除了使用后文将提到的页面跳转功能，这里用Tab卡页的切换功能来试试。在app.json文件中添加tabBar内容，如下所示。
{ "pages":[ "pages/movies/index", "pages/mine/mine" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#ffae00", "navigationBarTitleText": "电影排行榜", "navigationBarTextStyle":"white" }, "tabBar": { "list": [ { "pagePath": "pages/movies/index", "text": "电影" }, { "pagePath": "pages/mine/mine", "text": "我的" } ], "borderStyle": "black", "selectedColor": "#ffae00" }} 模拟器预览效果如下图：
img在list的值中，我们配置了2个卡页，text是卡页的文字，pathPath代表了页面路径，当点击卡页时，将跳转到指定路径的页面。注意卡页数必须为2-5个才合规，否则控制台会报错。并且，这里的路径必须被包含在顶端的pages值中，因为所有可抵达页面都必须在pages中配置路径。
红色箭头指向处有一条水平灰色线，这是卡页和内容页的分界线，由borderStyle属性控制，其值默认为black，目前暂时只有black和white值可选。
selectedColor表示卡页选中时，其文字的颜色，用十六进制表示。另外卡页背景色也可配置。
选项卡可以含有图标，配置方法如下：
{ "pagePath": "pages/movies/index", "text": "电影", "iconPath": "images/tabbar/movie.png", "selectedIconPath": "images/tabbar/movieSelected.png"} 
img
img一个为默认图标，一个是选中时显示的图标。（请看图标路径，我在左侧目录树的根目录新建了images/tabbar目录，并放入了4张图标，图标资源在Github源码中有）
这样，首页Tab便完成了。接下来我们来分析页面结构，并实现一些公用的template模板文件。
分析开发需求
作为编码者，在开始编码之前，我们要养成先从整体层面上分析整体需求的好习惯，有利于后续的代码编写及维护。
img观察首页、更多页和电影详情页，可以很容易地归纳出一些可以共用的页面元素：1.首页由三大块组成，正在热映、即将上映和排行榜区块除了数据不同，页面结构是相同的（即红色框，后文我用block区块模板代指这块）；2.每个block模板中含有若干个海报模板，由电影海报、电影名称和评分条、评分数组成（蓝色框，后文称poster海报模板）；3.每个评分条是由5颗星星组成的（粉红框，后文称ratingbar评分条模板）。
评分条模板
模板页面（template）是官方提供的一种实现页面元素复用、减少重复工作的良好实现形式。
从上面的分析中，我们发现这里提到的三个模板是层层嵌套的，因此，作为入门学习者，我们先从最内层的模板开始实现，即先实现评分条ratingbar模板文件。
img评分星星有三种状态，我们在images目录中新建ratingbar目录，并将这三个星星图标放入。（Github源码中含有本文所需的所有素材）
img在movies目录右键鼠标，依次新建名为ratingbar的目录和Page。打开app.json文件，我们发现开发者工具自动在pages值为我们配置了ratingbar页面的路径。
img作为模板文件，是在其它页面中导入使用的，它不会单独被使用，因此其实它不需要在app.json的pages值中配置路径，并且该页面只需wxml和wxss即可，js和json文件都是用不上的，它所含的页面元素的数据和行为都是由引用它的页面来操纵的，后文会对此有所涉及。
但在此时，我们需要在模拟器中调试、查看其效果，所以要将它当作单独页面来使用一次，调试完后可将js/json文件删除，并删除在app.json中pages值中的路径，此是后话，暂且略过。
我们在app.json中将ratingbar页面路径移到pages值的首位（见上图），保存后发现模拟器的首页变成了ratingbar页面。
img页面上唯一的一条内容是由开发者工具在新建页面时自动生成的。我们打开ratingbar.wxml页面，将自动生成的标签内容删除，并输入以下内容，按Shift+Alt+F键格式化代码：
<!--pages/movies/ratingbar/ratingbar.wxml--><view class='ratingbar-stars'> <!--全黄星星--> <image src='/images/ratingbar/star_fill_whole.png'/> <image src='/images/ratingbar/star_fill_whole.png'/> <image src='../../../images/ratingbar/star_fill_whole.png'/> <!--半黄半灰星星--> <image src='/images/ratingbar/star_fill_half.png'/> <!--全灰星星--> <image src='../../../images/ratingbar/star_fill_none.png'/></view>
可以视为官方提供的一种容器，需要成对出现的，在这里它内部含有5个image组件。class表示其样式，它将会去同页面的wxss文件中查找并渲染值为.ratingbar-stars的样式（见下文）。image是图像组件，有一个属性src，表示要显示的图片的地址。像这类内容不需要再包含其它控件的控件，你也可以写成单闭合标签的形式。
这里src的路径出现了2种写法，绝对路径和相对路径，如果不了解的可另外拓展一下，这里的路径是一样的。
再点开ratingbar.wxss文件，并输入以下内容：
/* pages/movies/ratingbar/ratingbar.wxss *//* class="ratingbar-stars"的控件的样式 */.ratingbar-stars { display: flex; flex-direction: row; padding-right: 4rpx;}/* class="ratingbar-stars"的控件下所包含的image控件的样式 */.ratingbar-stars image { height: 17rpx; width: 17rpx; padding-top: 5rpx; padding-right: 4rpx;} 这里的首个.ratingbar-stars样式（请注意样式名前面有个小点号“.”），与的class相呼应，将会用于渲染该控件。
这里采用了CSS中著名的flex弹性盒子模型，flex-direction:row;意味着其内部控件将采用水平横向的方式排列，要表示竖直排列可将值改为column。
第二个.ratingbar-stars image样式（请注意中间有空格，且image前面没有点号），表示渲染class='ratingbar-stars'的控件内部包含的image控件，这里表示了高height、宽width、距离顶部的内边距padding-top、距离右侧的内边距padding-right。CSS的更多属性知识欢迎另行拓展，这是一个多记多练才能生巧的知识。
rpx长度单位
rpx是微信小程序推出的单位，可以根据不同手机不同的屏幕宽度进行内容自适应，使页面元素在不同屏幕宽度的手机上看起来具有一致性。
无论手机屏幕实际宽度是多少，小程序都会在底层将屏幕宽度换算成750份，如果设计师以iphone6的750*1334（物理像素）为标准出设计稿的话，1rpx=0.5px=1物理像素，你可以直接使用设计师标注的参数加上rpx即可。
上面的width:17rpx表示无论在什么样的移动设备上，其大小都为750份中的17份，宽屏则显示大一些，窄屏则显示小一些，视觉效果一致。
按Ctrl+S键保存现有代码，模拟器即时显示出了目前的页面效果：3颗黄星、1颗半星、1颗灰星。
img在wxml文件中，我们在内写了5个静态的image图像控件。然而在实际场景中，这个不可能是写死的，而应该是根据电影的不同评分进行相应的显示。
动态数据涉及到一些数据绑定等相关的知识，这里先简要介绍一下。
数据绑定
{{}}
WXML 中的动态数据均来自对应 Page 的 data，数据绑定使用 Mustache 语法（双大括号）将变量包起来，如：
<view wx:for="{{count}}"> <text>{{stars}}</text></view> 页面渲染时，系统将去对应页面的js文件的data属性中寻找count和stars变量。
条件渲染
wx:if
在框架中，使用 wx:if="{{条件语句}}" 来判断是否需要渲染该代码块：
<image wx:if="{{stars>30}}" src='/images/ratingbar/star_fill_whole.png' /> 上条语句表示当满足stars>30的条件时，渲染image控件。
除了if条件外，还有wx:elif 和 wx:else语句：
<image wx:if="{{stars>30}}" src='/images/ratingbar/star_fill_whole.png' /><image wx:elif="{{stars>20}}" src='/images/ratingbar/star_fill_half.png' /><image wx:else src='/images/ratingbar/star_fill_none.png' /> wx:if 有且只有一个；
wx:elif 是else if的意思，可以有多个；
wx:else 最多只有一个。
系统按顺序判断各个条件，遇到成立的条件时则渲染该控件，其余控件则不会渲染。
注意：内部的条件语句的结果为{{false}}才表示条件不成立，不带{{}}的值将会被视为文本从而判定为条件成立。
<view wx:if="{{false}}"/> <!--条件不成立--><view wx:if="false"/> <!--条件成立--><view wx:if="3"/> <!--条件成立--> 列表渲染
wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。数组长度为多少，就会重复渲染多少次。
<block wx:for="{{count}}"> <text>{{index}}:{{item}}</text></block> 在循环时，当前项的变量名默认为 item，其下标变量名默认为 index。
<block wx:for="{{count1}}"> <block wx:for="{{count2}}"> <text>{{index}}:{{item}}</text> </block></block> 如果遇到这种多重循环呢，如何在内部表示不同数组的当前项和下标呢？
可以用wx:for-item和wx:for-index分别指定当前项的变量名和下标的变量名：
<block wx:for="{{count1}}" wx:for-item="outer" wx:for-index="i"> <block wx:for="{{count2}}" wx:for-item="inner" wx:for-index="j"> <text>{{i}}:{{outer}}</text> <text>{{j}}:{{inner}}</text> </block></block> 数据绑定相关的知识大致了解了，我们打开ratingbar.js，并在data内定义两个变量：
// pages/movies/ratingbar/ratingbar.jsPage({ data: { count:[3,5,6,8,9], stars:16 }}) 然后将ratingbar.wxml文件内容修改为：
<!--pages/movies/ratingbar/ratingbar.wxml--><view class='ratingbar-stars'> <!--count数组长度为5，共5次循环显示5颗星星--> <block wx:for="{{count}}"> <!--全黄星星--> <image wx:if="{{stars/10>=index+1}}" src='/images/ratingbar/star_fill_whole.png' /> <!--半黄半灰星星--> <image wx:elif="{{stars/10>=index && stars%10!=0}}" src='/images/ratingbar/star_fill_half.png' /> <!--全灰星星--> <image wx:else src='/images/ratingbar/star_fill_none.png' /> </block></view> 按Ctrl+S保存看看模拟器的效果，把stars的值改为其它数（0-50之间）试试看星星的显示效果吧。Tips：这里的条件语句是研究豆瓣电影API里电影评分的规律得来的。它的stars取值为0/5/10……40/45/50。
据我们之前对豆瓣评分小程序的分析，评分条一般作为一个元素在相关页面中显示，不会独立作为页面来显示。小程序官方提供了机制来解决这种复用性的问题，代码片段一处编写，多处使用，极大地精简了代码的臃肿，也令程序员有更多精力专注于必要的地方。其结构如下：
<template name="模板名称"> <!--这里是要复用的代码片段--></template>
我们将刚才编写的ratingbar.wxml代码最外层加上模板标识：
<!--pages/movies/ratingbar/ratingbar.wxml--><template name="template-ratingbar-stars"> <view class='ratingbar-stars'> <!--数组长度为5，共5次循环显示5颗星星--> <block wx:for="{{[3,5,6,8,9]}}"> <!--全黄星星--> <image wx:if="{{stars/10>=index+1}}" src='/images/ratingbar/star_fill_whole.png' /> <!--半黄半灰星星--> <image wx:elif="{{stars/10>=index && stars%10!=0}}" src='/images/ratingbar/star_fill_half.png' /> <!--全灰星星--> <image wx:else src='/images/ratingbar/star_fill_none.png' /> </block> </view></template> 模板名称是template-ratingbar-stars，在其它页面引入本模板后，根据该名称即可找到此模板。因为评分条有且只有5颗星星，所以这里将count的值直接写在此处wx:for="{{[3,5,6,8,9]}}"，然后我们把ratingbar.js中的相关值注释掉：
Page({ data: { // count:[3,5,6,8,9], // stars:16 }}) 因为作为模板，将在多处调用，其所使用的值（如这里的stars）将由调用的地方传入，也正因为这样，才有复用性可言。其实，模板文件只有wxml和wxss有用，js和json文件删除亦可。
电影海报模板
接下来，我们来编写电影海报，就是蓝框这个：
img有多处使用了这样的结构，显然，也应当是一个模板文件。
我们可以参照编写评分条模板的步骤，先将其当作为一个页面，配置在小程序的首页，在js中模拟数据，调试成功后，再改成模板页面。
首先，在movies目录下新建poster目录和poster页面，在app.json的pages属性中，将poster页面路径放在首位（ratingbar路径可以删除），以便在模拟器中查看效果和调试。
{ "pages": [ "pages/movies/poster/poster", "pages/movies/ratingbar/ratingbar", "pages/movies/index", "pages/mine/mine" ], ……} 在poster.js中写入一些模拟数据：
// pages/movies/poster/poster.jsPage({ data: { title: "奇迹男孩 Wonder", images: { large: "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2507709428.jpg" }, rating: { average: 8.6, max: 10, min: 0, stars: "45" } }}) 我们将在页面中通过绑定数据来获取这些数据，如电影名称{{title}}、海报图片{{images.large}}、电影评分{{rating.average}}等。
在poster.wxss中写入：
/* 导入评分条模板wxss文件，注意是@import */@import "../ratingbar/ratingbar.wxss";.movie { display: flex; flex-direction: column; padding-right: 12rpx; }.poster { width: 200rpx; height: 270rpx; padding-bottom: 10rpx;}.movie-name { color: #333333; font-size: 24rpx; line-height: 24rpx; margin: 10rpx 0 5rpx 0;}.ratingbar { display: flex; flex-direction: row;}.ratingbar-score{ color: #999999; font-size: 20rpx;} 模板的使用
这里用到了评分条模板，因此在开头导入了评分条模板的wxss样式。每个.样式都对应着下文相关控件的class。
在poster.wxml中写入：
<!--导入评分条模板wxml文件，注意别少了后面的 / 符号--><import src="../ratingbar/ratingbar.wxml" /><view class='movie' catchtap='catchTapMovie' data-movieid='{{id}}'> <!--海报图--> <image class="poster" src='{{images.large}}'></image> <!--电影名称--> <text class='movie-name'>{{title}}</text> <!--评分星星和数字--> <view class='ratingbar'> <!--评分条--> <template is="template-ratingbar-stars" data="{{...rating}}" /> <!--评分分数--> <text class='ratingbar-score'>{{rating.average}}</text> </view></view> 同理，开头也导入了评分条模板的wxml文件，并通过以下方式使用。
<!--评分条--><template is="template-ratingbar-stars" data="{{...rating}}" /> is属性值正是评分条模板的name名称，data值将相关数据传入评分条模板。
poster.js的data属性中含有rating数据，其格式见下文。上文中的…rating即是将rating数据散开，将其内容传入评分条模板，评分条模板里可以直接使用{{stars}}，而不需要通过{{rating.stars}}的方式。
rating: { average: 8.6, max: 10, min: 0, stars: "45" } 这里还出现了诸如下文的属性名，我们将留到后面讲解。
<view class='movie' catchtap='catchTapMovie' data-movieid='{{id}}'> 现在，将poster.js的data属性中的模拟数据注释或删除掉，并将poster.wxml封装成模版，如下文所示。
<!--导入评分条模板wxml文件，注意别少了后面的 / 符号--><import src="../ratingbar/ratingbar.wxml" /><!--封装成名称为template-poster的模板--><template name="template-poster"> <view class='movie' catchtap='catchTapMovie' data-movieid='{{id}}'> <!--海报图--> <image class="poster" src='{{images.large}}'></image> <!--电影名称--> <text class='movie-name'>{{title}}</text> <!--评分星星和数字--> <view class='ratingbar'> <!--评分条--> <template is="template-ratingbar-stars" data="{{...rating}}" /> <!--评分分数--> <text class='ratingbar-score'>{{rating.average}}</text> </view> </view></template> 区块模板
有了电影海报模板后，接下来我们进行下一步。观察到首页是由三个结构一模一样的红色区块组成，显然，这也可以是一个模板，暂且称之为block吧。
img步骤和先前个模板一样，为节省篇幅，这里会更简略地以贴代码为主。首页在movies目录下新建block目录和页面，并在app.json文件的pages中将block页面的路径移到首位，以便观察模拟器效果。
在images目录新建block目录，放入下面这张名为arrow-right.png的右箭头图片。
img在block.js文件的data属性中写入模拟的数据（如下），有两个键值对，一为blockTitle区块标题，一为blockMovies为区块电影数据（与豆瓣API返回的格式一致，有删减字段，但结构不变）。
// pages/movies/block/block.jsPage({ data: { blockTitle:"正在热映", blockMovies: { "count": 4, "start": 0, "subjects": [{ "casts": [{ "avatars": { "large": "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1509423054.09.jpg" }, "name": "阿德瓦・香登" }, { "avatars": { "large": "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p13628.jpg" }, "name": "阿米尔・汗" }, { "avatars": { "large": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1494080264.12.jpg" }, "name": "塞伊拉・沃西" } ], "comments_count": 5951, "countries": [ "印度" ], "directors": [{ "avatars": { "large": null }, "name": "阿德瓦・香登" }], "genres": [ "剧情", "音乐" ], "id": 259, "images": { "large": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2508925590.jpg" }, "original_title": "神秘巨星 Secret Superstar", "rating": { "average": 8.2, "max": 10, "min": 0, "stars": "40" }, "reviews_count": 292, "summary": "14岁的印度少女尹希娅（塞伊拉・沃西 饰）热爱唱歌，因父亲阻挠，她只能蒙面拍摄并上传自弹自唱原创歌曲的视频，孰料凭借天籁歌喉在网上一炮而红，备受争议的音乐人夏克提・库马尔（阿米尔・汗 饰）也向她抛出橄榄枝，尹希娅的生活发生了翻天覆地的变化……", "title": "神秘巨星 Secret Superstar", "warning": "数据来源于网络整理，仅供学习，禁止他用。如有侵权请联系公众号：小楼昨夜又秋风。我将及时删除。", "wish_count": 22447, "year": 2017 }, { "casts": [{ "avatars": { "large": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p19485.jpg" }, "name": "李芳芳" }, { "avatars": { "large": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1359895311.0.jpg" }, "name": "章子怡" }, { "avatars": { "large": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1472787652.32.jpg" }, "name": "黄晓明" } ], "comments_count": 58027, "countries": [ "中国大陆" ], "directors": [{ "avatars": { "large": null }, "name": "李芳芳" }], "genres": [ "剧情", "爱情", "战争" ], "id": 265, "images": { "large": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2507572275.jpg" }, "original_title": "无问西东", "rating": { "average": 7.5, "max": 10, "min": 0, "stars": "40" }, "reviews_count": 4354, "summary": "如果提前了解了你所要面对的人生，你是否还会有勇气前来？吴岭澜、沈光耀、王敏佳、陈鹏、张果果，几个年轻人满怀诸多渴望，在四个非同凡响的时空中一路前行。\\n吴岭澜（陈楚生 饰），出发时意气风发，却很快在途中迷失了方向。沈光耀（王力宏 饰），自愿参与了最残酷的战争，他一直在努力去做那些令他害怕，但重要的事。王敏佳（章子怡 饰）最初的错误，只是为了虚荣撒了一个小谎；最初的烦恼，只是在两个优秀的男人中选择一个。但命运，却把她拖入被众人唾骂的深渊。陈鹏（黄晓明 饰）把爱情摆在了理想前面，但爱情却没有把他摆在前面。他说，“我有人要照顾”，纵然这意味着与所有人作对，意味着要和她一起被放逐千里。张果果（张震 饰），身处尔虞我诈的职场，“赢”是他的习惯。为了赢，他总是见招拆招，先发制人。而有一天，他却面临了一个比“赢”更重要的选择。这几个年轻人，在最好的年纪迎来了最残酷的...", "title": "无问西东", "warning": "数据来源于网络整理，仅供学习，禁止他用。如有侵权请联系公众号：小楼昨夜又秋风。我将及时删除。", "wish_count": 32890, "year": 2018 }, { "casts": [{ "avatars": { "large": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p57551.jpg" }, "name": "斯蒂芬・卓博斯基" }, { "avatars": { "large": "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1456737567.18.jpg" }, "name": "雅各布・特伦布莱" }, { "avatars": { "large": "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p8889.jpg" }, "name": "朱莉娅・罗伯茨" } ], "comments_count": 4854, "countries": [ "美国" ], "directors": [{ "avatars": { "large": null }, "name": "斯蒂芬・卓博斯基" }], "genres": [ "剧情", "家庭", "儿童" ], "id": 269, "images": { "large": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2507709428.jpg" }, "original_title": "奇迹男孩 Wonder", "rating": { "average": 8.6, "max": 10, "min": 0, "stars": "45" }, "reviews_count": 162, "summary": "电影《奇迹男孩》改编自全球畅销小说《奇迹》，讲述了一个温暖千万家庭的成长故事。10 岁的奥吉（雅各布・特伦布莱 Jacob Tremblay 饰）天生脸部畸形，此前一直在家中和妈妈（朱莉娅・罗伯茨 Julia Roberts 饰）自学。当他小学五年级时，奥吉进入父母为他精心挑选的学校上学。在这里，奥吉将与校长、老师以及性格迥异的同学相处，他不寻常的外表让他成为同学们讨论的焦点，并终日受到嘲笑和排斥，就连好不容易交到的新朋友也似乎不太值得信任。幸运的是，在成长过程中，奥吉的父母、姐姐一直是他最坚强的后盾，在他们的支持与关爱下，奥吉凭借自身的勇气、善良、聪敏影响激励了许多身边的人，并收获了友谊、尊重与爱，最终成长为大家心目中的不可思议的“奇迹”。", "title": "奇迹男孩 Wonder", "warning": "数据来源于网络整理，仅供学习，禁止他用。如有侵权请联系公众号：小楼昨夜又秋风。我将及时删除。", "wish_count": 29417, "year": 2017 }, { "casts": [{ "avatars": { "large": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p20143.jpg" }, "name": "丁晟" }, { "avatars": { "large": "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1509429399.29.jpg" }, "name": "王凯" }, { "avatars": { "large": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1422629943.25.jpg" }, "name": "马天宇" } ], "comments_count": 6927, "countries": [ "中国大陆", "香港" ], "directors": [{ "avatars": { "large": null }, "name": "丁晟" }], "genres": [ "剧情", "动作" ], "id": 260, "images": { "large": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2508615612.jpg" }, "original_title": "英雄本色2018", "rating": { "average": 5.2, "max": 10, "min": 0, "stars": "25" }, "reviews_count": 711, "summary": "周凯（王凯 饰）参与走私，被身为缉毒警察的弟弟周超（马天宇 饰）逮捕入狱。三年后，周凯出狱，改过自新。曾经的手下阿仓（余皑磊 饰）已为毒贩头目，为获取周凯的海外客户资料，设计加害周凯。江湖中的好兄弟马柯（王大陆 饰）为了替周凯报仇，失去一条腿。自己的亲弟弟周超不相信哥哥周凯已金盆洗手，不断搜集证据，欲亲手逮捕周凯。最终，周凯与警方合作，逮捕了阿仓，两兄弟重归于好。", "title": "英雄本色2018", "warning": "数据来源于网络整理，仅供学习，禁止他用。如有侵权请联系公众号：小楼昨夜又秋风。我将及时删除。", "wish_count": 4552, "year": 2018 } ] } }}) 在block.wxss文件中写入以下数据：
/* pages/movies/block/block.wxss *//* 导入电影海报模板的WXSS */@import "../poster/poster.wxss";.block-title-bar { display: flex; flex-direction: row; justify-content: space-between; padding: 30rpx 20rpx 0rpx 20rpx;}.block-title { color: #333333; font-size: 30rpx;}.block-more { display: flex; flex-direction: row; align-items: center;}.block-more-text { color: #ffae00; font-size: 24rpx;}.block-more-icon { width: 12rpx; height: 20rpx; padding-left: 6rpx; }.block-scroll-view { display: flex; flex-direction: row;}.block-movie-row{ display: flex; flex-direction: row; padding: 20rpx 0 20rpx 20rpx;}.block-movie-card { display: flex; flex-direction: row; margin-right: 10rpx;} 在block.wxml中写入：
<!--pages/movies/block/block.wxml--><!--导入电影海报模板--><import src="../poster/poster.wxml" /><view> <!--区块顶栏--> <view class='block-title-bar'> <!--类别标题，如正在热映--> <text class='block-title'>{{blockTitle}}</text> <view class='block-more' catchtap='catchMore' data-title='{{blockTitle}}'> <!--更多--> <text class='block-more-text'>更多</text> <!--右箭头--> <image class='block-more-icon' src='/images/block/arrow-right.png'></image> </view> </view> <!--电影海报展示条--> <scroll-view scroll-x="{{true}}" class='block-scroll-view'> <view class='block-movie-row'> <block wx:for="{{blockMovies.subjects}}" wx:for-item="poster"> <!--单个电影海报--> <view class='block-movie-card'> <template is="template-poster" data="{{...poster}}" /> </view> </block> </view> </scroll-view></view> 按Ctrl+S保存后，模拟器效果如下。第一个出现了电影名称过长的情形，我们后续会写一个stringUtil.js的工具类来截断。
img我们在block页面导入了poster模板的wxml和wxss文件，并通过下文代码使用了。
<!--导入电影海报模板--><import src="../poster/poster.wxml" />……<!--电影海报展示条--><scroll-view scroll-x="{{true}}" class='block-scroll-view'> <view class='block-movie-row'> <block wx:for="{{blockMovies.subjects}}" wx:for-item="poster"> <!--单个电影海报--> <view class='block-movie-card'> <template is="template-poster" data="{{...poster}}" /> </view> </block> </view> </scroll-view> …… 这里使用了一个新的控件滑动条，有scroll-x和scroll-y属性，用以设定滑动的方向是水平还是竖直。
在滑动条内部，通过wx:for循环取出blockMovies.subjects的值，用poster表示当前项。
电影海报通过海报模板导入，通过{{…poster}}的形式散开poster的值传入海报模板中，为海报模板中的同名变量提供对应的值。
<!--类别标题，如正在热映--><text class='block-title'>{{blockTitle}}</text><view class='block-more' catchtap='catchMore' data-title='{{blockTitle}}'> 在上文中又出现了catchtap和data-形式的属性名，这是界面上“更多”按钮的点击事件和自定义属性，后文详细讲解。
最后将block.js中data里的相关数据注释或删除，并在block.wxml里封装模板。
<!--导入电影海报模板--><import src="../poster/poster.wxml" /><!--封装成区块模板--><template name="template-block"> <view> …… </view></template>
别忘了在app.json文件的data属性中将主页的路径“pages/movies/index”提到首位，我们即将要编写主页了。
到目前为止，我们所需要的三个模板已经全部封装完了。
block模板里导入了poster模板，后者又嵌入了ratingbar模板，极大的精简了相关的代码，加强了代码的易维护性。不信？看主页，我们只需寥寥数行代码即可。
下篇：https://mp.weixin.qq.com/s/Isfk9s2cgtyXdh5Olap9QA
