小程序从0到1：微信全栈工程师一本通

    石桥码农 编著

    ISBN：978-7-111-58404-9

    本书纸版由机械工业出版社于2018年出版，电子版

    由华章分社(北京华章图文信息有限公司，北京奥

    维博世图书发行有限公司)全球范围内制作与发

    行。

    版权所有，侵权必究

    客服热线：+ 86-10-68995265

    客服信箱：service@bbbvip.com

    官方网址：www.hzmedia.com.cn

    新浪微博 @华章数媒

    微信公众号 华章电子书(微信号：hzebook)目录 推荐序

    前言

    第一篇 基础入门篇

    第1章 学前准备

    1.1 注册账号

    1.2 配置开发工具

    1.3 从quick start项目开始

    1.4 下载源码

    第二篇 项目实战篇

    第2章 豆豆电影

    2.1 从splash功能开始

    2.2 缓存本地数据

    2.3 实现页首splash效果

    2.4 实现横向滑动列表

    2.5 实现电影详情页

    2.6 实现电影列表页

    2.7 实现下拉刷新功能

    2.8 实现搜索功能

    2.9 提交

    第3章 计算皮相

    3.1 使用模板创建项目

    3.2 实现history页面

    3.3 实现index主页

    3.4 服务类目3.5 发布

    3.6 添加分享

    3.7 源码对照

    第4章 黑黑天气

    4.1 实现视图层

    4.2 如何使用weui

    4.3 关于static目录

    4.4 实现逻辑层

    第5章 笑林百家

    5.1 使用tabBar

    5.2 实现index页面

    5.3 实现image页面

    5.4 源码对照

    第6章 图灵聊聊

    6.1 实现index页面

    6.2 实现联系人页面

    6.3 实现聊天页面

    6.4 实现my页面

    6.5 实现about页面

    6.6 源码对照

    第7章 豆豆电影服务端

    7.1 开发后端程序

    7.2 改写小程序前端

    7.3 源码对照

    第8章 计算皮相服务端

    8.1 创建服务端程序8.2 改写小程序前端

    8.3 源码对照

    第9章 黑黑天气服务端

    9.1 创建服务端程序

    9.2 改写小程序前端

    9.3 源码对照

    第10章 笑林百家服务端

    10.1 创建服务端程序

    10.2 修改小程序前端

    10.3 源码对照

    第三篇 实用组件篇

    第11章 容器组件

    11.1 view

    11.2 scroll-view

    11.3 swiper

    11.4 movable-view

    11.5 cover-view

    第12章 基础内容组件

    12.1 icon

    12.2 text

    12.3 rich-text

    12.4 progress

    第13章 表单组件

    13.1 button

    13.2 checkbox

    13.3 form13.4 input

    13.5 label

    13.6 picker

    13.7 picker-view

    13.8 radio

    13.9 slider

    13.10 switch

    13.11 textarea

    第14章 多媒体及其他组件

    14.1 navigator

    14.2 audio

    14.3 image

    14.4 video

    14.5 map

    14.6 canvas

    第四篇 语言提高篇

    第15章 JavaScript语言基础

    15.1 语法基础

    15.2 实用的简写技巧

    第16章 WXSS样式基础

    16.1 语法基础

    16.2 CSS基础

    第17章 Go语言基础

    17.1 基础概念

    17.2 条件控制语法

    17.3 复杂类型17.4 方法和接口推荐序

    2017年1月9号，“微信之父”张小龙在微信公开

    课中发布了微信小程序，在微信庞大的生态下实现

    了一个“触手可及”的梦想。微信小程序一经发布，立刻引起广泛关注。因为其具有使用场景丰富、开

    发成本低廉、坐享流量红利、推广渠道灵活等特

    点，迅速吸引到大批开发者投入到小程序开发当

    中。吃饭、出行、购物、旅游、学校、医院、政

    府、银行，微信小程序渗透到人们生活的每一个点

    滴上。曾经大家说：“微信，改变了人们的社交方

    式。”那么现在，微信小程序正在改变着人们使用

    微信的方式。

    一年后，在2018年的微信公开课上，小程序官

    方公布一些微信小程序相关的数据：已上线小程序

    高达58万，开发者数量高达100万，小程序第三方

    平台达2300个，日使用小程序用户数已达1.7亿。由

    此可见微信小程序的发展之势。如此高速发展的小

    程序同时也唤起了互联网创业的第二春。有数据表

    明，在2017年，依靠微信小程序的多个创业项目先

    后被经纬中国、真格基金、创新工场、高盛中国等

    投资方青睐，融资总额高达上亿元人民币。更有不

    少研究者推测，2018年基于小程序的创业可能还会

    掀起一波更高的浪潮。那么乘风破浪，你准备好了吗？

    《小程序从0到1》正好是一本可以帮助零基础

    的人入门小程序开发的书籍，本书内容朴实，由浅

    入深，循序渐进。通过5个小程序实例去剖析小程

    序开发过程中所需掌握的基础知识，讲解细致，十

    分用心。相信即便是零编程基础的人，也可以跟随

    书中实例入门小程序开发。本书作者石桥码农，也

    是很早就投身到小程序开发中。作者本人有情怀，乐于总结与分享，这本书也是他在小程序开发当中

    历练与沉淀的结果。能把自己的经验分享出来帮助

    小程序初学者入门，这就是作者，以及本作的初

    衷。

    腾讯高级工程师、小程序开发框架WePY作者

    Gcaufy

    2018年4月17日前言

    为什么要写这本书

    2017年4月22日，我在知乎发起了一场“零基础

    周末学习小程序开发”直播，从当晚8点开始，我一

    边撰写教程笔记，一边与500多位学员在线互动。

    教学从注册账号开始，接着是下载微信开发者工

    具，然后创建第一个quick start项目，最后编写后端

    代码，并在微信上运行和测试所开发的小程序。从

    那天晚上到第二天凌晨4点，我发出了7篇教程。

    在这场直播中，我原本以为大家会提问一些诸

    如页面如何跳转、数据如何缓存等技术问题，但是

    大家提的却大都是一些有关小程序的边缘问题，诸

    如如何下载和安装小程序、如何获得小程序内测资

    格等。

    不少学员尚不知道小程序已于2017年1月9日正

    式上线；并且，个人也能注册账号；所谓的200个

    小程序内测资格已经成为过去式了；而且小程序不

    需要下载安装。

    很多学习小程序开发的学员甚至毫无编程基

    础，他们对如何开发一款小程序一无所知。由此我意识到，小程序初学者最迫切需要的并不是复杂和

    高深的教程，而是一本简单而全面地介绍小程序开

    发的图书。全面与快速入门是其第一需求，基于

    此，笔者编写了本书。

    小程序不是一门语言，它是一门新的综合应用

    技术。小程序无须下载，不用安装，拿来即用，正

    所谓“事了拂衣去，不留身与名”。凡是接触过原生

    iOS、Android应用开发的读者，都能理解传统开发

    技术带给开发者的痛苦，如机型繁多、适配困难、审核周期长(iOS应用)，等等。

    达尔文说过，“自然界生存下来的，既不是四

    肢最强壮的，也不是头脑最聪明的，而是有能力适

    应变化的物种。”

    国内App的运营成本一直在增长，目前获取一

    个新用户的成本甚至高达30元人民币。在这种环境

    下，微信的小程序应运而生。从小程序的更新历史

    来看，微信之父张小龙打造新技术生态圈的决心是

    异常坚决的。随着小程序技术的成熟，开发者社区

    的形成，在第一批小程序开发者赚到第一桶金时，这一新技术的火爆才刚刚拉开帷幕。

    2017年3月27日，微信小程序开放了个人账号

    申请，从此以后，不是企业也能开发小程序。2017年3月28日，微信小程序开放了蓝牙、卡

    券、获知访问场景、共享微信通讯录等功能，并支

    持JS ES6新语法。

    2017年4月17日，微信小程序代码包的大小限

    制由1MB提升到2MB，开放了第三方平台开发小程

    序的功能，开放了数据分析接口。

    2017年4月20日，微信小程序对所有公众号都

    开放了关联小程序的功能。

    2017年4月25日，微信小程序开放了公众号推

    送文章可插入小程序的功能。

    2017年5月19日，微信小程序可支持蓝牙。

    2017年6月21日，微信小程序开放了打开另一

    个小程序的功能。

    2017年7月11日，微信小程序添加了富文本支

    持。……

    随着微信小程序不断开放新接口与新功能，小

    程序的开发社区正在逐渐形成。学习一门新技术最

    好的契机，正是其方兴未艾之时。无论是初入校园的大一新生，还是刚刚走上工作岗位的职场新人，此时学习小程序技术，正是最佳良机。你与有数十

    年编程经验的老手站在了同一起跑线上，因为小程

    序对所有人来说都是全新的技术。今天的菜鸟，未

    必就不能成为明日高手。

    根据我在小程序培训中的观察，初学者最大的

    痛点是感觉技术太杂，要学的东西太多。买了一堆

    书堆在桌上，学完这个又学那个，难于将其融会贯

    通。行程未远，激情已耗大半。目前市面上还没有

    一本书从前端到后端、全面介绍小程序的开发技

    术，已有的书籍有的介绍了小程序组件而未介绍JS

    语言，有的介绍了JS语言却未讲解如何开发服务端

    程序，而本书首次全面介绍了小程序所需要用到的

    所有技术，从小程序组件到WXSS样式，从前端JS

    语言到后端Go语言，通过实战案例，由浅入深地介

    绍小程序开发涉及的所有内容，帮助读者快速成长

    为一名真正的微信全栈工程师。

    读者对象

    ·高校毕业生，中专技校毕业生。

    ·工作1～2年的、渴望获得加薪技能的职场新

    人。·渴望以软件开发为谋生手段的自由“手艺”人。

    ·准备报名或已参加小程序开发培训班的读

    者。

    有人说，大学里最美好的事情就是找到一个喜

    欢的人，认认真真地谈一场无关名利的恋爱。但大

    学里不只有恋爱，在新学期伊始就开始学习小程序

    开发吧，这将是送给四年后的自己最好的礼物。许

    多人后悔在2007年第一款iPhone发布时没有开始学

    习iOS开发，只能羡慕那些早期的iOS开发者获得平

    台的初期红利。现在小程序来了，企业市场对小程

    序的需求越来越旺，学好这门实用的技术，毕业后

    就不怕找不到工作；如果向往自由的生活，不想在

    公司打工，还可以自己接单，做SOHO一族。如果

    学得好，那么在校期间就可以接单，成为一名自食

    其力的编码“手艺人”。

    如何阅读本书

    本书主要包括四篇，内容分布如下。

    ·第一篇，即第1章学前准备，讲解了小程序开

    发环境的准备及账号的注册。完成第1章的学习相

    当于取得了小程序技术殿堂的入场券。·第二篇，第2～10章，本篇是项目实战部分，其中第2～6章讲解小程序前端案例，使用了后台地

    址但未涉及后台编程；第7～10章在已有案例的基

    础上添加了后端程序的支持。先学习前端，再学习

    后端，每次专注一个点学习，更易理解和掌握。

    ·第三篇，第11～14章，本篇详细地讲解了所

    有小程序组件的使用方法，所附示例几乎全部都是

    生产可用的，这就大大降低了初学者在美工上的学

    习门槛。

    ·第四篇，第15～17章，本篇是综合练习部

    分，系统地介绍了JS语言、Go语言、WXSS样式语

    法等必备知识与技能。这3章既可作为工具手册，以备开发查询之需；每一章节又都有独立的练习代

    码，可便于读者利用课余或业余的碎片时间提高编

    码水平。

    学习指引：

    1.读者从第1章开始到第14章，逐章学习，并运

    行测试所有的实例。每一章都附有源码，读者在学

    习的过程中如果遇到问题，可以下载作者的源码对

    照学习。

    2.待前14章全部学完，进入第15～17章的综合学习。在这个阶段的学习过程中，不妨直接用新学

    的知识直接深入修改前面业已完成的示例，将本书

    的示例变成自己的示例。如果有时间，建议将修改

    过程以博客的形式记录下来，并在社区发表，可以

    此加深印象。

    小组学习

    我至今最为怀念的时光，便是大学里和两位好

    友在机房里通宵学编程的日子。我们三个人相互鞭

    策又相互欣赏，经常比较谁的代码写得更优雅，谁

    的代码执行效率更高。

    我希望每个读者都能找到朋友或同学组成一个

    学习小组，或2人，或3人，共同学习，相互激励，这样学习的效率和动力会高许多。孔子曰“三人

    行，必有我师”，诚不我欺。

    勘误

    由于作者水平有限，写作时间又很仓促，书中

    难免有不妥之处，恳请读者批评指正。

    如果读者在阅读过程中发现了问题，或者有什

    么疑问，欢迎与作者联系。作者的邮箱是liyi@rixingyike.com。

    微信公众号

    在学习本书的过程中，也欢迎加入作者的小程

    序微信群，关注微信公众号“艺述思维”，回复“小

    程序”就能加入。未来作者会举办读者线下交流

    会，请留意群内通知。

    致谢

    感谢机械工业出版社华章公司的杨绣国老师，她的认真和敬业令我折服。

    感谢支持我进行《艺术论》创作的杨俊峰、何

    超超等微信好友，感谢李萌、余书卫、天津外贸手艺人李海君、大连长征跑创始人宋文宝、南阳著名

    甲骨文书法家郝新安、南宁著名国画家彭航、邯郸

    著名篆刻家杜文平、开封著名书法家王德云等130

    位日行一刻艺术天使的默默支持。

    感谢小程序开发框架WePY的作者Gcaufy拔冗

    作序，WePY是一个非常受开发者欢迎的小程序组

    件化开发框架，在GitHub上已有近1万Star，感兴趣

    的读者可前往这里查

    看：https:github.comTencentwepy 。

    感谢所有读者，希望这本书对您的学习有所帮

    助。

    石桥码农

    2017年7月于北京月亮河第一篇 基础入门篇

    ·第1章 学前准备第1章 学前准备

    小程序是2017年1月9日微信推出的一种免安

    装、用完即走的轻App。它基于微信环境运行，不

    需要用户安装。开发者可以基于微信开放的小程序

    技术规范，开发自己的小程序，并申请在微信上

    线，让自己的产品与微信8亿用户相连接。使用小

    程序技术开发的轻App，具有入门学习简单、开发

    简便快捷、上线审核门槛低等优势。

    工欲善其事，必先利其器。在开始学习小程序

    开发之前，需要先注册一个小程序账号，并在本机

    安装微信开发者工具。1.1 注册账号

    首先，在电脑上打开https:mp.weixin.qq.com

    ，在页面右上角单击“立即注册”，如图1-1所示。

    图 1-1

    选择要注册的账号类型，即小程序。然后按要

    求填写账号信息，如图1-2所示。图 1-2

    提交后，会看到激活账号的页面，如图1-3所

    示，上面显示已将确认邮件发送到之前注册的邮箱

    里。图 1-3

    进入邮箱，打开收自“weixinteam”的邮件，单

    击激活链接，如图1-4所示。图 1-4

    在“主体类型”的选项中选择“个人”，并填写相

    关信息。

    在注册过程中，会用到一个微信账号来扫码验

    证身份。这个微信账号即为管理员账号，在以后的

    开发过程中会用到。

    注意 每个微信仅能绑定为5个小程序账

    号的管理员，这与公众号的绑定限制是相同的。已

    经绑定了公众号账号的微信，不影响再与小程序账号进行绑定。

    对于公众号和微信账号，每个身份证都有5个

    名额的注册上限，但小程序账号目前没有这个限

    制。

    注册成功的截图如图1-5所示。图 1-5

    单击图1-5中的“前往小程序”按钮，自动登录小

    程序微信管理后台。

    然后从左侧菜单中，选择“设置”，如图1-6所

    示。图 1-6

    在设置面板中，选择“开发设置”标签，如图1-7

    所示。图 1-7

    注意，这里需要将小程序ID复制下来，存储备

    用。1.2 配置开发工具

    微信开发者工具是微信官方推出的小程序开发

    工具，集代码编写、调试、效果预览等功能于一

    体。

    1.2.1 下载

    打开下载网址 [1]

    ：

    https:mp.weixin.qq.comdebugwxadocdevdevtoolsdownload.html

    会看到三个版本的下载链接，分别是：

    Windows 64、Windows 32、Mac

    选择与自己的电脑系统适配的版本。如果是

    Windows7+系统，则选择Windows 64。如果是XP系

    统，则选择Windows 32。如果是Mac OS系统，则

    选择Mac。如果使用的是Windows 732位系统，则

    选择Windows 32版本。

    2017年8月22日，微信在发布WXS的同时推出

    了全新界面的微信开发者工具的Beta版本，将“微信

    Web开发者工具”更名为“微信开发者工具”。Beta版本用于优先发布新特征、新组件、新功能，但不建

    议在正式项目中使用。Beta版本可与正式版本同时

    安装在一台机器之上，感兴趣的读者可打开下面的

    网址进行下载：

    https:mp.weixin.qq.comdebugwxadocdevdevtoolsbeta.html

    1.2.2 安装

    此处小程序的安装，将以Mac OS系统为例进

    行讲解。获得dmg安装包之后，双击打开，如图1-8

    所示。

    图 1-8

    然后将“微信开发者工具”直接拖

    至“Applications”即可。如果已经安装了旧版本，则

    选择覆盖。

    1.2.3 设置编辑器属性安装完成后，就可以设置编辑器的属性了。以

    Mac为例，依次打开“菜单”→“设置”→“编辑设

    置”，如图1-9所示。

    在图1-9中，要同时选中“修改文件时自动保

    存”和“编译时自动保存所有文件”。单击“保存”按钮

    退出，这样设置可以减少开发过程中手动保存代码

    的麻烦，此处的设置对所有项目都生效。

    图 1-9

    [1] 手动输入地址比较麻烦，可以在微信公号“艺述

    思维”中发送“小程序开发工具下载”得到相关链

    接。1.3 从quick start项目开始

    现在，可以启动微信开发者工具了，选择“程

    序项目”，启动后的界面如图1-10所示。

    图 1-10

    如果未曾登录，使用管理员微信账号，扫码就

    可以登录“微信开发者工具”了。管理员微信账号是

    在1.1节注册小程序账号时所用的微信账号。

    1.3.1 创建项目

    若要创建新的项目，可通过如下步骤来实现。首先在图1-11所示的界面，选择“本地小程序

    项目”。

    图 1-11

    然后单击下方的“+”按钮增加新的项目，如图

    1-12所示。图 1-12

    之后会进入图1-13所示的界面，在其中的

    AppID中填写小程序ID，即在1.1节从小程序微信后

    台复制的字符串。至于项目名称，可随意填写，例

    如“小白从0到1学开发”。图 1-13

    之后在这里选择一个空目录，如图1-14所示。图 1-14

    因为只有选择了空目录，才能出现“在当前目

    录中创建quick start项目”这个选项，默认是勾选

    的，默许这个设置。

    单击“添加项目”，即可完成quick start项目的初

    建。

    1.3.2 运行项目

    首次运行quick start项目时，程序会提示授权，如图1-15所示。图 1-15

    允许这个请求。在手机上运行的时候，用户看

    到的也是类似的提示。

    这个地方很容易错点“拒绝”按钮，因为在一般

    情况下，主操作按钮总是居右的。

    quick start项目运行之后的主页面如图1-16所示。图 1-16

    单击自己的头像，进入“查看启动日志”的二级

    页面，如图1-17所示。

    每启动一次项目，这里就会多一条记录。图 1-17

    1.3.3 刷新项目

    要刷新项目，可单击“微信开发者工具”左侧工

    具栏中的编译按钮，如图1-18所示。

    或者按组合键(Windows用户

    按)，重启项目。再次查看上面的日志页

    面，便多了一条记录。

    本章完成了小程序账号的注册以及开发工具的

    安装和配置，创建了“quick start”项目。“quick

    start”项目相当于其他编程语言中的“Hello world”程

    序，旨在帮助初学者快速建立对小程序开发的认

    知。开发者也可以基于“quick start”项目开发自己的

    项目。从第2章开始，本书将进入小程序项目实

    战。图 1-181.4 下载源码

    使用微信扫描下方二维码，关注公众号“艺述

    思维”，回复关键字“小程序从0到1源码”，下载本

    书所附的所有实例源码。源码是分章节的，在接下

    来的学习中将会依次用到。第二篇 项目实战篇

    ·第2章 豆豆电影

    ·第3章 计算皮相

    ·第4章 黑黑天气

    ·第5章 笑林百家

    ·第6章 图灵聊聊

    ·第7章 豆豆电影服务端

    ·第8章 计算皮相服务端

    ·第9章 黑黑天气服务端

    ·第10章 笑林百家服务端第2章 豆豆电影

    本章将调用豆瓣接口，实现电影榜单的展示，以及检索、实时检索、信息展示等功能。这一章仅

    讲解前端操作，不涉及后端Go语言编程。在学习过

    程中，如果对个别的关于JS、WXSS的概念理解比

    较困难，可跳至第15章和第16章查看相关内容。2.1 从splash功能开始

    首次进入某些App时，通常在界面的底部有三

    个面板指示点，分别对应于三张图片，可以左右滑

    动查看。

    本节将以实现这个功能来开启小程序的实践之

    旅。

    2.1.1 创建项目

    接下来开始逐步实现splash功能，首先打开微

    信开发者工具，单击“+”号按钮创建新项目，如图2-

    1所示。

    相关参数在图2-1中已有展示，需要注意的

    是，“项目目录”必须选择一个空目

    录，“AppID”和“项目名称”需要根据自己的实际情

    况来填写，然后单击“添加项目”按钮。

    之后，单击工具栏中的“详情”按钮，得到图2-2

    所示的界面。

    在图2-2中，选中框线中的所有复选框，特别

    是其中的“开发环境不检验请求域名”、TLS版本以及http证书。如果不选中该复选框，那么请求豆瓣

    API将会失败。图 2-1图 2-2

    操作完成，至此即成功创建了一个新的项目。

    2.1.2 隐藏模拟器

    在创建项目之后，我们就来完成这项操作。在

    微信开发者工具中，单击工具栏中的“编辑”按钮，切换到编辑状态，如图2-3所示。

    图 2-3

    单击左上角的手机图标，使得模块器在编辑模

    式下隐藏，此举将便于编辑代码。如果需要预览，请切换至调试模式。

    2.1.3 快捷创建页面

    创建新页面的常用方法有以下两种：

    第一种方法是在文档树中单击打开app.json文

    件，如图2-4所示。图 2-4

    app.json是小程序的全局配置文件，在这个文

    件中可以设置页面路径、窗口样式、网络超时时间

    及tarBar等。

    在打开的app.json文件中，将光标定位

    在“pagesindexindex”这一行，同时按

    组合键两下，复制出两行新

    的“pagesindexindex”。将新复制的两行分别修改

    为“pagesdoubanindex”和“pagesdoubansplash”，如图2-5所示。

    图 2-5

    因为在1.2节中已经设置了编辑器自动保存文

    件，所以此处无须保存。

    在文档树中单击展开pages目录，可以看到文

    件已经自动生成，如图2-6所示。图 2-6

    使用这种方法可以显著提高新建page页面文件

    的效率。第二种标准的新建页面的方法如图2-7所示。

    图 2-7

    首先，在文档树中选择一个目录，例

    如“douban”，右击打开右键菜单；其次，单击“新

    建”；最后，选择新建的文件类型。

    这种方法比较麻烦、低效，建议直接使用快捷自动创建法。至于自动生成的.json与.wxss文件，如

    果用不到也不用删除。项目在上传过程中会自动压

    缩，无须介意这些空文件。如果要用到.json页面配

    置文件，则省去了再次创建的麻烦。

    2.1.4 引用sim.js类库

    sim.js类库是笔者开发的一个开源类库，旨在

    帮助初学者快速开发小程序前端。

    在电脑上打

    开https:github.comrixingyikesim.js ，或者直接扫

    描下方的二维码，下载sim.js类库压缩包。

    打开github页面，单击Download Zip按钮，下

    载源码包，如图2-8所示。图 2-8

    另外还有一种方法，即在命令行终端中使用git

    clone指令下载源码，这种方法更普遍，稍后会有介

    绍。

    现在将下载的源码，解压至豆豆电影小程序的

    根目录之下，如图2-9所示。图 2-9

    然后在文档树中打开app.js文件，在顶部引用

    sim.js类库：

    let app = require(.sim.jsindex.js)将第4行代码

    App({

    替换为

    App(Object.assign(app,{

    将最后一行替换为：

    }))

    经过以上步骤，sim.js引入完毕。这两步注入

    将sim.js类库提供的工具类方法，附在了App对象之

    上。在接下来的开发中，通过getApp来获取

    App对象将能通过它使用sim.js类库提供的这些方

    法。

    let是JS语言声明变量的关键字，关于变量的更

    多信息，请参见本书的15.1.1节。

    2.1.5 实现splash效果

    首先，在文档树中打开pagesdoubansplash.wxml文件，将代码修改为：

    

    

    

    这里使用了swiper组件，其中的indicator-dots是

    布尔属性，不需要填写任何值，仅仅放在那里就能

    表示其值为true，与填写任何值均等效。

    swiper-item是swiper组件的子项，有多少张图

    片便有多少个子项。它的宽高会被自动设置为

    100%，所以无须重复设置。对全屏起决定性作用

    的，则是swiper的style属性，它将宽高均设置为

    100%。关于swiper组件的更多内容，请参见本书的

    11.3节。

    image组件的mode属性，用于设置图像的缩放

    策略。aspectFill是最常用的缩放模式，它会保持一

    定的比例将图片完整地显示出来。关于image组件

    的更多内容，请参见本书的14.3节。

    然后，在文档树中打开pagesdoubansplash.js文

    件，将代码修改为： pagesdoubansplash.js

    Page({

    data: {

    subjects: [],},onLoad(options) {

    let app = getApp

    app.request(https:api.rixingyike.comdoubanapiv2moviecoming_soon?start= 0count=3).then(

    data => {

    this.setData({ subjects: data.subjects })

    })

    }

    })

    在上述代码中，subjects是wxml代码中用于数

    据绑定的数组。这里使用了app.request方法，用于

    请求豆瓣的API。获取到数据之后，即可使用

    setData方法渲染视图。这里的setData会实现如下两

    个功能。

    ·保存数据至subjects变量。

    ·通知页面视图，若数据有更新，则进行渲

    染。

    在app.request方法返回的对象上调用then

    方法，是处理接口调用成功之后的逻辑。then方法

    接受一个函数为参数，笔者在这里传入的是使用箭

    头符号简写的匿名函数。关于箭头函数，参见本书

    的15.2.9节。在2.1.4节引用sim.js类库，就是为了此时在这

    里使用。2.1.4节通过注入方法修改了默认的App定

    义，是为了把sim.js类库的request方法加到App对象

    上。选择App对象注入，可以最大限度地减少项目

    对框架的注入依赖。

    在任何页面，只要能通过getApp取得全局

    唯一的App对象，就可以使用sim.js类库的功能。

    1.如何设置首页

    在文档树中打开app.json文件，将光标定位到

    图2-10所示的这一行。

    图 2-10

    同时按下组合键，将“pagesdoubansplash”移至首行，因为首行意味着

    首页。2.如何添加样式

    此时已将“pagesdoubansplash”设置为首页，同

    时按下组合键(或组合

    键)刷新项目，什么都看不到。为什么？接下来将

    通过调试面板来寻找原因。

    在调试工具区域，切换至wxml面板，可以看

    到已经渲染了三个swiper-item，如图2-11所示。

    图 2-11

    但是swiper的高度为0。这是因为在小程序中，page容器的高度默认是0。将swiper组件的高度样式

    设置为100%是无用的，因为父容器没有高度。

    解决办法很简单，在文档树中打开app.wxss文

    件，在尾部添加以下样式：

    page{ height: 100%;

    background-color: f9f9f9;

    }

    这里除了高度以外，还添加了一个浅灰色的背

    景色。浅灰色的默认背景有助于设计产品的UI。

    再次按下组合键(或

    组合键)刷新项目，功能已然正常。之前没有显

    示，是因为swiper容器没有获得足够的高度，我们

    通过调试面板查出了问题所在。善用调试面板，有

    助于在开发中快速找到出错的缘由。

    2.1.6 源码对照

    在本小节的学习过程中，如果遇到问题，可打

    开总源码(见1.4节)目录中的“豆豆电影2.1”对照

    学习。

    如果需要讨论，可在公众号“艺述思维”回

    复“小程序”，进微信群与其他读者一同探讨。2.2 缓存本地数据

    通常，首次进入小程序应用时，会展示全屏图

    片滑动，第二次进入时则不再展示，本节就来实现

    这个功能。

    2.2.1 使用wx.setStorage接口

    接口wx.setStorage用于从本地缓存中异步获取

    指定key所对应的内容。其与接口wx.getStorage相对

    应。

    在文档树中打开app.json文件，将

    pagesdoubanindex调整为首页。

    打开pagesdoubanindex.js源码，修改onLoad函

    数，代码如下：

    onLoad(options) {

    wx.getStorage({

    key: 'has_shown_splash',fail: err => {

    wx.redirectTo({

    url: 'pagesdoubansplash',})

    }

    })

    }其中，wx.redirectTo是页面跳转接口，用于从

    当前页面跳转至pagesdoubansplash页面。

    打开pagesdoubansplash.js源码，在onLoad末尾

    添加如下代码：

    wx.setStorage({

    key: has_shown_splash,data: true

    })

    这里的has_shown_splash是键名，必须与

    pagesindexindex.js中的代码保持一致。

    2.2.2 使用Storage面板

    按组合键(或组合

    键)刷新项目，程序首先会进入

    pagesdoubanindex，随后会跳转到

    pagesdoubansplash页面。再次刷新，本地已有记

    忆，因此不会再看到splash页面。那么该功能是如

    何实现的呢？下面一起来看一下。

    在调试工具区域，打开Storage面板，如图2-12

    所示。图 2-12

    从这个面板中可以看到本地缓存中保存的所有

    数据，包括保存在pagesdoubansplash页面的

    has_shown_splash变量，这就是本地已有的记忆数

    据。

    若单击“删除”按钮，再按组合

    键(或组合键)刷新项目，就又可以看到

    splash全屏图片滑动的效果了。

    has_shown_splash变量上面的一行是quick start

    项目默认生成的代码所记录的缓存，相关代码在

    pageslogslogs.js中。

    2.2.3 省略function关键字

    在快捷方法自动生成的页面js代码中，onLoad

    函数默认是这样的：onLoad: function (options) {

    }

    而笔者声明的onLoad是这样的：

    onLoad(options) {

    }

    两者的不同之处在于，笔者的声明没有使用

    function关键字。

    笔者使用的是ES6语法，使用ES6语法不仅可

    以减少键盘作业，还可以在匿名函数内部使用this

    关键字。如下所示，方法then接受的参数即为匿名

    函数：

    app.request(https:api.rixingyike.comdoubanapiv2moviecoming_soon?start=0count=3).then(

    data => {

    this.setData({ subjects: data.subjects })

    })

    其中，data=>{}是一个ES6语法声明的匿名函

    数。data是匿名函数的形参。旧式写法是这样的：

    onLoad(options) {

    let app = getApp

    let that = this

    app.request(https:api.rixingyike.comdoubanapiv2moviecoming_soon?start=0count=3).then( function(data) {

    that.setData({ subjects: data.subjects })

    })

    }

    如上述代码所示，如果不使用ES6语法，则需

    要先于匿名函数之外声明一个that变量指向this，才

    能在匿名函数内部访问真正的this对象。

    在匿名函数内部直接使用this对象，将无法调

    用其setData方法。匿名函数内部的this对象，并不

    是当前页面的Page对象。读者可以自行测试一下。

    注意 在2.1.1节中，我们选择了项目属性

    面板中的“开启ES6转ES5”选项，只有这样才能在项

    目中使用ES6语法。每次新建一个项目时，都不妨

    首先开启这个选项。2.3 实现页首splash效果

    本节将学习如何在小程序页首实现图2-13所示

    的效果。图 2-13

    2.3.1 使用swiper组件

    2.1.5节使用swiper组件实现了全屏的splash效

    果，本节将再次使用这个组件实现页面顶部的

    splash效果。

    切换至编辑模式，在文档树中打开pagesdou-

    banindex.wxml文件，修改代码为：

    

    

    

    这里使用的仍然是swiper组件，与2.1.5节的不

    同之处在于，此次设置height为450rpx。rpx是

    responsive pixel的简称，是小程序开发中实现屏幕

    自适应UI的长度单位。在页面设计上，微信小程序

    规定屏幕的宽恒为750 rpx。iPhone6屏幕的宽度为

    375px，换算过来则是1rpx=0.5px，以此设计UI元素

    的尺寸。其他型号的手机，1rpx所代表的宽度将视

    屏宽而定。

    此处设置swiper高度为450rpx，比屏宽的一半

    略高，这也是常见的设计比例。

    在文档树中打开pagesdoubanindex.js页面，修

    改data声明为：

    data: {

    boards: [{ key: 'in_theaters' }, { key: 'coming_soon' }, { key: 'top250' }],},其中，“in_theaters”“coming_soon”等是豆瓣API

    需要用到的参数。2.3.2 批量调用接口

    在当前页面“pagesdoubanindex”的逻辑层代码

    中，我们需要调用豆瓣接口三次拉取三个不同的榜

    单数据。在全部拉取完成之后，再调用setData方法

    渲染页面。这种场景比较适合使用sim.js类库提供

    的app.promise.all方法批量调用接口。

    批量调用接口，可采用如下方式。

    添加一个retrieveData函数：

    retrieveData {

    let app = getApp

    var promises = this.data.boards.map(function (board) {

    return app.request(`https:api.rixingyike.comdoubanapiv2movie{board.key}?start= 0count=10`)

    .then(function (d) {

    if (!d) return board

    board.title = d.title

    board.movies = d.subjects

    return board

    }).catch(err => console.log(err))

    })

    return app.promise.all(promises).then(boards => {

    if (!boards || !boards.length) return

    this.setData({ boards: boards, loading: false})

    })

    }

    这个函数主要完成如下两件事情。·依据参数不同，从豆瓣API拉取三次列表。

    ·待三次拉取全部完成之后，调用setData设置

    数据通知页面渲染。

    sim.js类库中复合了bluebird类库，这是一个

    Promise类库，主要提供了如下四种功能。

    ·使用then实现链式调用。

    ·使用Promise.all实现并行调用。

    ·使用Promise.race实现竞赛调用。

    ·使用catch捕捉异常。

    sim.js框架将Promise对象注入到了App对象

    上，所以在这里可以使用app.promise.all进行并行调

    用。它与直接使用Promise.all的效果是等同的，但

    免去了在Page页面中再次引用js类库的麻烦。关于

    Promise，稍后会有更多的介绍。

    代码中出现的then的用法，在2.1.5节已经讲

    过，它表示异步调用成功之后应执行什么。

    2.3.3 使用wx.getStorage接口在2.1.5节，笔者在“pagesdoubansplash”页面向

    本地缓存中存入了“has_shown_splash”变量，用于

    标识已经进入过splash页面。本节将尝试取出这个

    变量，如果不为空，则调用“retrieveData”函数；如

    果为空，则跳转至“pagesdoubansplash”页面。

    在onLoad函数中增加对retrieveData的调用，代

    码如下所示：

    onLoad(options) {

    wx.getStorage({

    key: 'has_shown_splash',success: res => {

    this.retrieveData

    },fail: err => {

    wx.redirectTo({

    url: 'pagesdoubansplash',})

    }

    })

    }

    success是接口wx.getStorage异步调用成功后调

    用的函数。如果是首次进入小程序，没有找到缓

    存，则进入pagesdoubansplash页面；反之，则调用

    自建的retrieveData函数，批量拉取豆瓣数据。

    2.3.4 源码对照在本小节的学习过程中，如果遇到问题，可打

    开总源码(见1.4节)目录中的“豆豆电影2.3”对照

    学习。

    如果需要讨论，可在公众号“艺述思维”回

    复“小程序”，进微信群与其他读者一同探讨。2.4 实现横向滑动列表

    本节将实现可以左右滑动的列表，如图2-14所

    示。图 2-14

    2.4.1 列表渲染

    在文档树中打开pagesdoubanindex.wxml文

    件，添加如下代码：

    

    

    {{ item.title }}

    

    

    

    

    

    

    {{ item.title }}

    

    

    更多

    

    其中，scroll-view组件用于展示一个可滚动区

    域，scroll-x属性代表横向滚动。

    若要实现横向滚动，则容器内容必须超过屏幕

    宽度。在子视图view中，设置display样式为flex，flex是Flexible Box的缩写，意为“弹性布局”，设置

    为此属性，即view内容可以向右无限伸展。

    wx：for用于将数组渲染在视图上，数组有几

    项便渲染几行。从2.3.2节的代码可以得知，boards

    数组有三个元素，所以这里会渲染三个附有“weui-

    panel”样式的view。

    wx：for可以嵌套使用，在上面的wxml代码中，横向列表的渲染是通过嵌套渲染来实现的。被

    循环数组的当前项的默认变量名称是item，在被嵌

    套的wx：for里，子item会将父item覆盖。

    在图2-15中，第一个item指的是数组boards的

    子项，第二个及其后面的item指的是boards.movies

    的子项。

    图 2-15

    2.4.2 引用样式

    在文档树中打开app.wxss文件，在顶端添加如

    下代码：

    @import 'sim.jsweuiweui.wxss';

    这里的@import是CSS引用另一个样式文件的

    语法，它与wxml中使用的import并不相同。

    weui是一个样式库，非常符合微信小程序设计指南的要求，应用在项目中可以显著提高初学者的

    开发速度。

    2.4.3 源码对照

    在本小节的学习过程中，如果遇到问题，可打

    开总源码(见1.4节)目录中的“豆豆电影2.4”对照

    学习。

    如果需要讨论，可在公众号“艺述思维”回

    复“小程序”，进微信群与其他读者一同探讨。2.5 实现电影详情页

    单击主页列表中的单项，会进入电影详情页，并展示电影的一些基本信息，如图2-16所示，本节

    就来实现这样的功能。图 2-16

    2.5.1 格式化代码

    使用2.1.3节快捷创建页面的方法，添加

    pagesdoubanitem页面，用于展示电影详情。

    在文档树中，打开pagesdoubanitem.wxml文

    件，添加如下代码，引入weui样式库：

    @import 'sim.jsweuiweui.wxss';

    如果读者是从笔者的源码中复制的代码，那么

    在复制粘贴之后，应在文档区右击从弹出的右键菜

    单中选择“格式化代码”命令，这样可以快速将代码

    格式化，易读易改，如图2-17所示。图 2-17

    2.5.2 逻辑层

    在文档树中打开pagesdoubanitem.js文件，修

    改data变量为：

    data: {

    loading: true,movie: {}

    }

    将onLoad函数修改为：onLoad(options) {

    let app = getApp

    app.request(`https:api.rixingyike.comdoubanapiv2moviesubject {options.id}`)

    .then(d => {

    this.setData({ movie: d, loading: false });

    wx.setNavigationBarTitle({ title: d.title });

    }).catch(e => {

    console.error(e);

    })

    }

    在上述代码中，使用Promise方式从豆瓣API拉

    取数据，然后在then回调中取得数据并绑定。

    loading变量用于指示数据是否加载完成，可使

    用它在页面上显示一个加载提示。

    options是从其他页面传递过来的参数集合，可

    从中获取id，这将是2.5.4节wxml标签中自定义的参

    数名称。这里使用电影的id，从豆瓣API中拉取单

    个电影的详细信息。

    2.5.3 视图层

    在文档树中打开pagesdoubanitem.wxml文件，修改标签代码为如下形式：