边做边学入门微信小程序之仿豆瓣评分

微信小程序由于适用性强、逻辑简要、开发迅速的特性，叠加具有海量活跃用户的腾讯公司背景，逐渐成为了轻量级单一功能应用场景的较佳承载方式，诸如电影购票、外卖点餐、移动商城、生活服务等场景服务提供商迅速切入了。

为了贴合实际的应用情况，本篇以豆瓣评分小程序为参考样例，边做边学小程序的入门开发知识。

目录

效果图
Demo源码
开发环境
了解官方样例
    开发者工具
    样例源码结构
开发实战
    底部Tab卡页
    分析开发需求
    评分条模板
        rpx长度单位
        数据绑定
        条件渲染
        列表渲染
    电影海报模板
        模板的使用
    区块模板
    主页
        网络请求
        逻辑实现
        setData
        点击事件
    详情页
    更多页
扩展知识
思考题

效果图

先看一下对比效果图，共三个页面，分别为首页、更多页和详情页，左侧为豆瓣评分官方小程序，右侧为仿作。因API数据问题，没有做搜索功能。

主页

更多页

详情页

Demo源码

本篇完整源码已提交在: https://github.com/cnwen/wechatapp_movie

开发环境

调试基础库：1.9.91（2018.03.07）

微信开发者工具：Windows版v1.02.1802270

了解官方样例

打开微信开发者工具，新建一个小程序项目。

1.选择项目代码存放的目录；

2.填入你的小程序AppID（若无AppID请点击“注册”获取，也可选择“体验小程序”，如需真机预览须有AppID）；

3.勾选“建立普通快速启动模板”。

点击“确定”按钮后，开发者工具将为我们建立一个简单的小程序模板，我们可以通过这个样例来建立对开发者工具和小程序的初步认识。

开发者工具

我们观察开发者工具，发现由三个主要区域构成，分别是模拟器、编辑器和调试器。

模拟器：顶端含有三个下拉列表，可以配置模拟的机型和所处的网络环境。

编辑器：分为源码目录区域和代码区域。

调试器：顶端含有控制台、网络、存储等选项卡页。

样例源码结构

根目录含有pages、utils文件夹和三个名称为app的文件。顾名思义，pages正是存放小程序各个页面的文件夹，一些公共的工具类建议放在utils文件夹，app文件是小程序的全局文件。

点击查看app.json文件的源码，可以看到含有pages和window两个键值对。

pages负责配置小程序的页面，里面有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的值中配置下图中的两条路径。

按Ctrl+S键保存，开发者工具将自动在指定路径为我们创建两个页面，如下图所示。

此时，模拟器中的首页已经变成了movies目录下的index页面，因为我们刚才把这个页面的路径配置在app.json文件中pages值的首位了。

如果我们要查看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"
  }
}

模拟器预览效果如下图：

在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"
}

一个为默认图标，一个是选中时显示的图标。（请看图标路径，我在左侧目录树的根目录新建了images/tabbar目录，并放入了4张图标，图标资源在Github源码中有）

这样，首页Tab便完成了。接下来我们来分析页面结构，并实现一些公用的template模板文件。

分析开发需求

作为编码者，在开始编码之前，我们要养成先从整体层面上分析整体需求的好习惯，有利于后续的代码编写及维护。

观察首页、更多页和电影详情页，可以很容易地归纳出一些可以共用的页面元素：1.首页由三大块组成，正在热映、即将上映和排行榜区块除了数据不同，页面结构是相同的（即红色框，后文我用block区块模板代指这块）；2.每个block模板中含有若干个海报模板，由电影海报、电影名称和评分条、评分数组成（蓝色框，后文称poster海报模板）；3.每个评分条是由5颗星星组成的（粉红框，后文称ratingbar评分条模板）。

评分条模板

模板页面（template）是官方提供的一种实现页面元素复用、减少重复工作的良好实现形式。

从上面的分析中，我们发现这里提到的三个模板是层层嵌套的，因此，作为入门学习者，我们先从最内层的模板开始实现，即先实现评分条ratingbar模板文件。

评分星星有三种状态，我们在images目录中新建ratingbar目录，并将这三个星星图标放入。（Github源码中含有本文所需的所有素材）