小程序模板-评分星星

谁借莪１个温暖的怀抱￠ 2022-05-31 11:17 230阅读 0赞

# 概述 #

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

# 详细 #

#### 代码下载：[http://www.demodashi.com/demo/11185.html][http_www.demodashi.com_demo_11185.html] ####

#### 一、程序实现    ####

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

[![输入图片说明][1502766735279057361.jpg]][1502766735279057361.jpg 1]

首先我们来分析一下这个小程序，主要分为电影和个人中心（个人中心我们放后面讨论）。电影主要分为近期上映、热门电影、电视剧、综艺四个模块。 （后续看公共API能够获取到什么数据我们就用什么数据。） 通过观察发现，界面上好多一样的元素，如

[![输入图片说明][1502766735387011151.png]][1502766735387011151.png 1]

其中 [![输入图片说明][1502766735448018026.png]][1502766735448018026.png 1]这个星级评分在别的地方中也经常使用到。 正如我们在代码复用中常做的一样，我们会将一些公共的、经常使用的业务逻辑代码提取成一个公共的函数，这就是所谓的封装。 在界面上我们也可以通过封装来管理一些经常出现的界面。 小程序就提供了这样的封装方法叫做模板。（这句话不太对，这个意思！） 这个模板化在AngularJS（ionic1）中我们就有使用过，但是小程序只能把界面那部分内容封装起来。不能把逻辑代码分装。 我们先来创建小星星的那个模板。现在pages目录下新建public目录，用于存放公共的模板文件和公共方法。 在public目录下新建tpl目录，用于存放模板。 首先要有星星的三个状态，我是从豆瓣上拔下来的，三张图片。在最上层目录新建images文件夹。点击右侧...打开菜单栏，在硬盘中打开，然后把我们下载的三张图片放到这里面，刷新一下工具就有了。

[![输入图片说明][1502766735461093595.png]][1502766735461093595.png 1]

新建stars.wxss和stars.wxml.

[![输入图片说明][1502766735495091378.png]][1502766735495091378.png 1]

先编写代码如下：stars.wxml. 看上图我们知道，这模板分为左边的星星和右边的分数。 然后我们就可以是使用第一章第四节中提过的flex布局：[http://blog.csdn.NET/onil\_chen/article/details/76293294][http_blog.csdn.NET_onil_chen_article_details_76293294]

我们暂时先编写这个模板，没有样式，也没有数据，我们接着来看，如何使用这个模板。

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

[![输入图片说明][1502766735508095003.png]][1502766735508095003.png 1]

运行代码，我们能够看到刚才我们编写的stars模板已经被成功引用进来了。

[![输入图片说明][1502766735532066888.png]][1502766735532066888.png 1]

接下来我们开始编写样式，达到我们想要的效果。 首先我们可以看出星星和分数是左右布局的，五个星星也是左右布局的，所以我们可以声明最外层的view的display:flex;flex-direction: row; 然后再声明五个星星所在的view的display:flex;flex-direction: row;（不清楚的，可以查看第一章第四节[http://blog.csdn.net/onil\_chen/article/details/76293294）][http_blog.csdn.net_onil_chen_article_details_76293294] 我们编写stars.wxss文件如下：

[html] view plain copy .rankcontauber{
    display: flex;
    flex-direction: row;
    }
    .rankstars{
    display: flex;
    flex-direction: row;
    height: 25rpx;
    margin-right: 6rpx;
    margin-top: 12rpx;
    }
    .rankstars image{
    padding-left: 3rpx;
    height: 25rpx;
    width: 25rpx;
    }
    .rankscore{
    color: #4A6141
    }

运行效果和刚才一样，因为我们并没有引用stars.wxss文件，所以打开index.wxss文件，在文件头部加入 @import "../public/tpl/stars.wxss"; 运行效果如下：

基本上达到我们要的效果了。接下来我们修改一下stars.wxml文件，使得stars模板能够接收外部数据。 通过分析我们知道了，这个小模块需要绑定的数据就是五个星星的状态和分数。 严格来说，外部应该提供一个分数，我们就能够实现这些数据的绑定，如angularjs中，我们就是这么实现的。 但是由于小程序不能将逻辑代码分装到模板中，所以这里我们需要一个表示星星状态的数据和分数。 我们用0、1、2分别代表星星的三个状态。 五个一样的元素所以我们使用wx:for进行循环。 因为没有找到类似ng-src的属性，所以，使用三个wx:if来控制星星状态。 修改stars.wxml代码如下：

[![输入图片说明][1502766735567081211.png]][1502766735567081211.png 1]

然后修改index.wxml中引用starsTpl的地方。 这里作为直观的测试，我们将传递的数据直接写在wxm中。运行代码效果如下所示：

[![输入图片说明][1502766735580036345.png]][1502766735580036345.png 1]

我们在接着修改index.js,在初始化数据中加入两个变量。

[![输入图片说明][1502766735597066651.png]][1502766735597066651.png 1]

然后修改index.wxml中引用starsTpl的地方。 运行效果如下：

[![输入图片说明][1502766735617057896.png]][1502766735617057896.png 1]

[![输入图片说明][1502766735632031248.png]][1502766735632031248.png 1]

这样我们就实现了，从最外层的逻辑代码一层层的往下传递数据，实现数据绑定。

考虑了一下，还是外部传进一个分数，自动设置星星状态，会比较方便，代码修改如下：（源文件中没有修改）

[![输入图片说明][1502766735678053172.png]][1502766735678053172.png 1]

#### 二、项目结构截图 ####

![image.png][]

#### 三、运行效果 ####

运行效果如下：

[![输入图片说明][1502766735705089484.png]][1502766735705089484.png 1]

#### 代码下载：[http://www.demodashi.com/demo/11185.html][http_www.demodashi.com_demo_11185.html] ####

#### 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权 ####

[http_www.demodashi.com_demo_11185.html]: http://www.demodashi.com/demo/11185.html
[1502766735279057361.jpg]: http://www.demodashi.com/ueditor/jsp/upload/image/20170815/1502766735279057361.jpg
[1502766735279057361.jpg 1]: /images/20220531/edb6ad79f1d54f44a90074aeeda2366a.png
[1502766735387011151.png]: http://www.demodashi.com/ueditor/jsp/upload/image/20170815/1502766735387011151.png
[1502766735387011151.png 1]: /images/20220531/4285320e6e324ef8a8311a0474af8c3b.png
[1502766735448018026.png]: http://www.demodashi.com/ueditor/jsp/upload/image/20170815/1502766735448018026.png
[1502766735448018026.png 1]: /images/20220531/3f259be4d9064efeacf1aa8cf1053848.png
[1502766735461093595.png]: http://www.demodashi.com/ueditor/jsp/upload/image/20170815/1502766735461093595.png
[1502766735461093595.png 1]: /images/20220531/97b517b79d3d4de2ae1a953ba404eb85.png
[1502766735495091378.png]: http://www.demodashi.com/ueditor/jsp/upload/image/20170815/1502766735495091378.png
[1502766735495091378.png 1]: /images/20220531/d12c65b8e9c440669d1cd48f6c698e2b.png
[http_blog.csdn.NET_onil_chen_article_details_76293294]: http://blog.csdn.net/onil_chen/article/details/76293294
[1502766735508095003.png]: http://www.demodashi.com/ueditor/jsp/upload/image/20170815/1502766735508095003.png
[1502766735508095003.png 1]: /images/20220531/fdf25f44d6f34bf1b803091b5a7d2c7f.png
[1502766735532066888.png]: http://www.demodashi.com/ueditor/jsp/upload/image/20170815/1502766735532066888.png
[1502766735532066888.png 1]: /images/20220531/4863e77e45e84d2ab75a139c3c08a742.png
[http_blog.csdn.net_onil_chen_article_details_76293294]: http://blog.csdn.net/onil_chen/article/details/76293294%EF%BC%89
[1502766735567081211.png]: http://www.demodashi.com/ueditor/jsp/upload/image/20170815/1502766735567081211.png
[1502766735567081211.png 1]: /images/20220531/a9e7f4b8b6fb42a9a4ba9ce70ca8ca4d.png
[1502766735580036345.png]: http://www.demodashi.com/ueditor/jsp/upload/image/20170815/1502766735580036345.png
[1502766735580036345.png 1]: /images/20220531/cfcd6702b4e743c4b33936609e3b9bc8.png
[1502766735597066651.png]: http://www.demodashi.com/ueditor/jsp/upload/image/20170815/1502766735597066651.png
[1502766735597066651.png 1]: /images/20220531/72c3a426b6ac4e729aa0893dc9691c51.png
[1502766735617057896.png]: http://www.demodashi.com/ueditor/jsp/upload/image/20170815/1502766735617057896.png
[1502766735617057896.png 1]: /images/20220531/a0ca2e58c9cb409ead87f693ca0eb27a.png
[1502766735632031248.png]: http://www.demodashi.com/ueditor/jsp/upload/image/20170815/1502766735632031248.png
[1502766735632031248.png 1]: /images/20220531/674c66db2b2c4a22970523f934f8b096.png
[1502766735678053172.png]: http://www.demodashi.com/ueditor/jsp/upload/image/20170815/1502766735678053172.png
[1502766735678053172.png 1]: /images/20220531/d44e1a7b9e7b4fdd8c5d385d81fcca92.png
[image.png]: /images/20220531/6b53be1d9b3142f599430d836395e0d6.png
[1502766735705089484.png]: http://www.demodashi.com/ueditor/jsp/upload/image/20170815/1502766735705089484.png
[1502766735705089484.png 1]: /images/20220531/b74187a1a3f24213b46cd07166405166.png