作者：石桥码农
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
小程序从0到1：微信全栈工程师一本通试读：
前言
为什么要写这本书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位日行一刻艺术天使们两年来的默默支持。
感谢所有读者，希望这本书对您的学习有所帮助。石桥码农2017年7月于北京月亮河第一篇基础入门篇 第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.com/debug/wxadoc/dev/devtools/download.html
会看到三个版本的下载链接，分别是：
Windows 64、Windows 32、Mac
选择与自己的电脑系统适配的版本。如果是Windows7+系统，则选择Windows 64。如果是XP系统，则选择Windows 32。如果是Mac OS系统，则选择Mac。如果使用的是Windows 7#32位系统，则选择Windows 32版本。
2017年8月22日，微信在发布WXS的同时推出了全新界面的微信开发者工具的Beta版本，将“微信Web开发者工具”更名为“微信开发者工具”。Beta版本用于优先发布新特征、新组件、新功能，但不建议在正式项目中使用。Beta版本可与正式版本同时安装在一台机器之上，感兴趣的读者可打开下面的网址进行下载：
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/beta.html1.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所示。
或者按
本章完成了小程序账号的注册以及开发工具的安装和配置，创建了“quick start”项目。“quick start”项目相当于其他编程语言中的“Hello world”程序，旨在帮助初学者快速建立对小程序开发的认知。开发者也可以基于“quick start”项目开发自己的项目。从第2章开始，本书将进入小程序项目实战。图1-18第二篇项目实战篇 第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图2-5图2-6图2-7
app.json是小程序的全局配置文件，在这个文件中可以设置页面路径、窗口样式、网络超时时间及tarBar等。
在打开的app.json文件中，将光标定位在“pages/index/index”这一行，同时按
因为在1.2节中已经设置了编辑器自动保存文件，所以此处无须保存。
在文档树中单击展开pages目录，可以看到文件已经自动生成，如图2-6所示。
使用这种方法可以显著提高新建page页面文件的效率。
第二种标准的新建页面的方法如图2-7所示。
首先，在文档树中点选目标后面的“…”选项按钮；其次，单击“新建”；最后，选择新建的文件类型。
这种方法比较麻烦、低效，建议直接使用快捷自动创建法。至于自动生成的.json与.wxss文件，如果用不到也不用删除。项目在上传过程中会自动压缩，无须介意这些空文件。如果要用到.json页面配置文件，则省去了再次创建的麻烦。2.1.4 引用sim.js类库
sim.js类库是笔者开发的一个开源类库，旨在帮助初学者快速开发小程序前端。
在电脑上打开https://github.com/rixingyike/sim.js，或者直接扫描下方的二维码，下载sim.js类库压缩包。
打开github页面，单击Download Zip按钮，下载源码包，如图2-8所示。图2-8
另外还有一种方法，即在命令行终端中使用git clone指令下载源码，这种方法更普遍，稍后会有介绍。
现在将下载的源码，解压至豆豆电影小程序的根目录之下，如图2-9所示。图2-9
然后在文档树中打开app.js文件，在顶部引用sim.js类库：let app = require("./sim.js/index.js")
将第4行代码
试读结束[说明：试读内容隐藏了图片]