小程序从0到1

本书分为四个篇章：第壹篇即为第1章，介绍开发环境的准备及账号的注册。学完本章内容，相当于取得了入场券。第二篇包括第2—10章，是项目实战部分。其中第2-6章是小程序前端案例，使用了后台端口但未涉及后台编程；第7-10章是在已有案例的基础上添加了后端程序的支持。先学习前端，再学习后端，由浅入深，这样更易于理解和掌握。第三篇包括第11-14章，详细讲解所有小程序组件的使用方法，几乎全部组件都具有生产可用的UI，所附示例源码可以直接用于实际项目中，大大降低了初学者开发一个小程序时在美工上的门槛。第四篇包括第15-17章，是综合练习部分，系统地介绍JS语言、Go语言、WXSS样式语法等必备知识与技能。其中各节有独立的练习代码，可供读者实际练习之用。这部分也可作为工具文档，供开发者参考使用。

李艺（石桥码农），毕业于清华大学计算机科学与技术专业，曾就职于腾讯、呱呱财经、安利中国、PMG集团等公司，有15年以上软件开发经验，长期活跃于技术社区并撰写编程技术教程。
现专注于Go语言与微信小程序技术开发，著有《Swift语言快速入门》一书。

前　言 Preface为什么要写这本书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人，共同学习，相互激励，这样学习的效率和动力会高许多。孔子曰“三人行，必有我师”，诚不我欺。
勘误由于作者水平有限，写作时间又很仓促，书中难免有不妥之处，恳请读者批评指正。
如果读者在阅读过程中发现了问题，或者有什么疑问，欢迎与作者联系。作者的邮箱是[email protected]。
微信公众号在学习本书的过程中，也欢迎加入作者的小程序微信群，关注微信公众号“艺述思维”，回复“小程序”就能加入。未来作者会举办读者线下交流会，请留意群内通知。
致谢感谢机械工业出版社华章公司的杨绣国老师，她的认真和敬业令我折服。
感谢支持我进行《艺术论》创作的老杨同志、何超超、云哥、琥珀人生、杨龙晨等微信好友，感谢李萌、李书卫、南阳著名甲骨文书法家郝新安、国画家彭航、邯郸著名书法篆刻家杜文平、开封著名书法家王德云等130位日行一刻艺术天使们两年来的默默支持。
感谢所有读者，希望这本书对您的学习有所帮助。
石桥码农2017年7月于北京月亮河

目录 Contents
推荐序
前言
篇　基础入门篇
第1章　学前准备2
1.1　注册账号2
1.2　配置开发工具5
1.2.1　下载6
1.2.2　安装6
1.2.3　设置编辑器属性6
1.3　从quick start项目开始7
1.3.1　创建项目8
1.3.2　运行项目10
1.3.3　刷新项目10
第二篇　项目实战篇
第2章　豆豆电影14
2.1　从splash功能开始14
2.1.1　创建项目14
2.1.2　隐藏模拟器16
2.1.3　快捷创建页面16
2.1.4　引用sim.js类库17
2.1.5　实现splash效果18
2.1.6　下载源码21
2.2　缓存本地数据21
2.2.1　使用wx.setStorage接口21
2.2.2　使用Storage面板21
2.2.3　省略function关键字22
2.3　实现页首splash效果23
2.3.1　使用swiper组件23
2.3.2　批量调用接口24
2.3.3　使用wx.getStorage接口25
2.3.4　下载源码25
2.4　实现横向滑动列表26
2.4.1　列表渲染26
2.4.2　引用样式27
2.4.3　下载源码27
2.5　实现电影详情页27
2.5.1　格式化代码28
2.5.2　逻辑层28
2.5.3　视图层29
2.5.4　页面跳转30
2.5.5　下载源码30
2.6　实现电影列表页30
2.6.1　使用finally方法 31
2.6.2　模板组件32
2.6.3　加载更多34
2.6.4　如何调试35
2.6.5　刷新视图36
2.6.6　下载源码37
2.7　实现下拉刷新功能37
2.7.1　小程序中的下拉更新API37
2.7.2　下载源码38
2.8　实现搜索功能38
2.9　提交42
2.9.1　修改信息42
2.9.2　使用Sketch生成头像43
2.9.3　配置域名器域名43
2.9.4　在手机上预览44
2.9.5　上传版本44
2.9.6　提交审核45
2.9.7　下载源码46
第3章　计算皮相47
3.1　使用模板创建项目48
3.2　实现history页面48
3.3　实现index主页49
3.3.1　冒泡事件51
3.3.2　样式选择器51
3.3.3　实现计算的逻辑52
3.3.4　使用wx.setStorageSync接口56
3.3.5　下载源码57
3.4　服务类目57
3.5　发布57
3.6　添加分享58
3.7　下载源码58
第4章　黑黑天气59
4.1　实现视图层60
4.1.1　关于rpx60
4.1.2　绝对定位61
4.2　如何使用weui62
4.3　关于static目录63
4.4　实现逻辑层64
4.4.1　js函数split与push66
4.4.2　下载源码66
第5章　笑林百家67
5.1　使用tabBar68
5.2　实现index页面69
5.2.1　定义模板组件 70
5.2.2　import与include的区别71
5.2.3　js数组函数 71
5.2.4　js正则表达式73
5.3　实现image页面74
5.3.1　将函数作为参数传递74
5.3.2　关于lower-threshold属性74
5.3.3　使用wx.previewImage接口75
5.4　下载源码75
第6章　图灵聊聊76
6.1　实现index页面77
6.1.1　建立server目录模拟服务器数据78
6.1.2　在文件作用域中声明app80
6.1.3　调用图像预览接口 80
6.1.4　用户友好的时间格式化方法formatTimeline80
6.1.5　js语言中的展开符81
6.1.6　变量自增81
6.1.7　js的忽略符81
6.1.8　通用的下拉区域82
6.2　实现联系人页面82
6.2.1　js中的引用传递84
6.2.2　js数组的push方法84
6.2.3　接口返回数据的通用格式85
6.3　实现聊天页面86
6.3.1　在视图渲染中使用三目运算符87
6.3.2　js中的全等于与等于运算符87
6.3.3　wx:if条件渲染87
6.3.4　使用css遮罩实现消息框样式87
6.3.5　调用图灵接口89
6.3.6　js中的逻辑或操作90
6.3.7　js中的let关键字90
6.4　实现my页面92
6.5　实现about页面93
6.6　下载源码94
第7章　豆豆电影服务端95
7.1　开发后端程序95
7.1.1　安装Golang语言包95
7.1.2　安装仓库管理工具git96
7.1.3　安装Go语言编辑器96
7.1.4　使用sim.go类库96
7.1.5　创建豆瓣接口97
7.2　改写小程序前端100
7.3　下载源码 101
第8章　计算皮相服务端102
8.1　创建服务端程序102
8.1.1　启用sqlite3数据库与小程序服务端的自动登录功能102
8.1.2　安装命令行工具curl103
8.1.3　关于一般性通用接口的解读103
8.1.4　使用SQLiteStudio104
8.1.5　扩展新的控制器105
8.2　改写小程序前端110
8.2.1　使用POST方法新增数据110
8.2.2　调用分页接口拉取数据110
8.3　下载源码 111
第9章　黑黑天气服务端112
9.1　创建服务端程序112
9.1.1　使用万能的JSON字段113
9.1.2　特改特定的接口逻辑113
9.1.3　解析动态JSON数据的方法114
9.2　改写小程序前端116
9.2.1　使用不同的模拟器测试项目117
9.2.2　使用默认的页面数据避免渲染错误118
9.2.3　分离代码逻辑提高可阅读性118
9.2.4　在WXML页面中直接绑定字典数据121
9.3　下载源码122
第10章　笑林百家服务端123
10.1　创建服务端程序123
10.1.1　启用七牛云上传功能124
10.1.2　注册七牛账号与创建存储空间124
10.1.3　Go语言的作用域125
10.2　修改小程序前端127
10.2.1　使用模板组件实现顶部导航栏128
10.2.2　关于navigator组件的open-type属性129
10.2.3　在tabBar中新增操作按钮129
10.2.4　使用icon组件130
10.2.5　在小程序中直接上传图片131
10.3　下载源码133
第三篇　实用组件篇
第11章　容器组件136
11.1　view136
11.2　scroll-view137
11.3　swiper142
11.4　movable-view145
1