258资源分享网

本章我们将以一个实战项目为主要内容，穿插讲解小程序的各种概念。因为没有UI和后端，所以，我们这里使用豆瓣电影的API和小程序豆瓣评分作为学习材料。最终我们将会完成一个类似下图的小程序。（大家可以搜索小程序，豆瓣评分，线上已经有了。）

首先我们来分析一下这个小程序，主要分为电影和个人中心（个人中心我们放后面讨论）。电影主要分为近期上映、热门电影、电视剧、综艺四个模块。

（后续看公共API能够获取到什么数据我们就用什么数据。）

通过观察发现，界面上好多一样的元素，如

其中

正如我们在代码复用中常做的一样，我们会将一些公共的、经常使用的业务逻辑代码提取成一个公共的函数，这就是所谓的封装。

在界面上我们也可以通过封装来管理一些经常出现的界面。

小程序就提供了这样的封装方法叫做模板。（这句话不太对，这个意思！）

这个模板化在AngularJS（ionic1）中我们就有使用过，但是小程序只能把界面那部分内容封装起来。不能把逻辑代码分装。

我们先来创建小星星的那个模板。现在pages目录下新建public目录，用于存放公共的模板文件和公共方法。

在public目录下新建tpl目录，用于存放模板。

首先要有星星的三个状态，我是从豆瓣上拔下来的，三张图片。在最上层目录新建images文件夹。点击右侧...打开菜单栏，在硬盘中打开，然后把我们下载的三张图片放到这里面，刷新一下工具就有了。

新建stars.wxss和stars.wxml.

先编写代码如下：stars.wxml.

看上图我们知道，这模板分为左边的星星和右边的分数。

然后我们就可以是使用第一章第四节中提过的flex布局：

[html] view plain copy

<template name="starsTpl">  

<!-- 这里要声明这个模板的名字 -->  

    <view class="rankcontauber">  

    <!-- 模板从这里开始的，每一个view在新家的时候工具会自动加一个classname，这里按自己喜欢修改一下 -->  

        <view class="rankstars">  

        <!-- 这是我们左边的星星数，我们先放5个星星全满的，用的静态数据，我们先看界面怎么编写 -->  

            <image src="/images/starfull.png"></image>  

            <image src="/images/starfull.png"></image>  

            <image src="/images/starfull.png"></image>  

            <image src="/images/starfull.png"></image>  

            <image src="/images/starfull.png"></image>  

        </view>  

        <!-- 右边的成绩，看得出来和上面的星星是左右布局的 -->  

        <text class="rankscore">10.0</text>  

    </view>  

</template>  

我们还是拿初始页来编写demo。