微信小程序由于适用性强、逻辑简要、开发迅速的特性，叠加具有海量活跃用户的腾讯公司背景，逐渐成为了轻量级单一功能应用场景的较佳承载方式，诸如电影购票、外卖点餐、移动商城、生活服务等场景服务提供商迅速切入了。
为了贴合实际的应用情况，本篇以豆瓣评分小程序为参考样例，边做边学小程序的入门开发知识。
目录
效果图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页面。