编辑推荐

移动应用开发已进入H5+native结合的时代，把握微信分发渠道的微信小程序应运而生，将会给移动应用的分发带来一种新的形式和巨大的流量入口，基于JavaScript、Xml和CSS技术的小程序应用将会大量出现，专业的小程序开发者也会大量涌现。

内容简介

这是一本帮助编程爱好者和从业人员从零开始学习微信小程序设计的书。本书紧跟微信小程序的技术发展，是目前在该领域率先进行系统的技术探讨和培训的著作。本书站在学习的角度，目的是让学习者通过21天的时间了解到微信小程序的技术框架结构、开发环境搭建、编程语言细节等。本书全面地讲解了微信小程序的逻辑层与视图层的架构特点、JavaScript语言的入门和进阶知识、WXML语言的语法特点、WXML视觉组件的使用、WXSS样式表语言的语法入门、常用样式描述语句、盒模型和Flex布局等，快速具备微信小程序开发的能力。这是一本从零学习微信小程序开发的专业书，不需要额外的专业基础就能让你读懂这本书。对于初学者，本书可以作为一本系统的学习教程来使用；对于有经验的前端开发者，本书可以作为微信小程序开发的参考书来阅读。

作者简介

作者王延平，毕业于华北电力大学，在武汉凯迪、北京博奇、中国华电集团等央企、上市企业从事9年技术研发和项目管理工作，后转行移动互联网，分别在麦包包、阿里等公司从事产品设计与开发，现任武汉思行合一科技有限公司总经理，从事移动互联网产品的设计、开发、运营与推广，主要产品有"打字学英语”APP，已上市，目前用户量30万+。

目录

第1部分 微信小程序
第1天 微信小程序概述
1．1 什么是微信小程序
1．2 小程序在个人移动互联时代的意义
1．3 微信大事记
1．4 新的消息
第2天 微信小程序的技术架构特点
2．1 微信小程序在开发上的特点
2．2 微信将会支持的小程序分发模式
2．3 微信小程序将会给前端设计带来的变革
2．4 学习微信小程序开发的路径
第2部分 开发前的准备
第3天 小程序的注册申请
3．1 申请微信小程序
3．2 微信认证
3．3 小程序绑定微信开放平台账号
第4天 开发环境的搭建
4．1 认识小程序管理后台
4．2 小程序开发环境的搭建
4．3 初识小程序开发工具
4．4 编辑模式
4．5 调试模式
4．6 项目管理
第3部分 微信小程序的技术框架
第5天 框架和配置文件
5．1 小程序的目录结构
5．2 JSON-小程序的配置文件
5．2．1 pages-页面配置
5．2．2 window-窗口表现配置
5．2．3 tabBar-导航栏配置
5．2．4 networkTimeout-通信超时事件配置
5．2．5 debug-调试模式配置
第6天 逻辑层（AppService）
6．1 小程序的初始化
6．2页面注册
6．3页面的路由
6．4逻辑层的模块化
第4部分 WXML语言与视觉组件
第7天 WXML语言和数据绑定
7．1 WXML语法规范
7．2 视觉组件
7．3 组件的数据绑定
7．3．1 数据的简单绑定
7．3．2 绑定时的运算
7．3．3 绑定时的数据组合
第8天 逻辑渲染语句
8．1 wx：if条件渲染语句
8．2 wx：for列表渲染语句
第9天WXML的高级特性
9．1 模板
9．2 事件
9．3 事件对象
9．4 引用
第5部分 WXSS样式表语言
第10天 WXSS语言基础
10．1 WXSS（CSS）简介
10．2 CSS基本语法
10．3 选择器
10．3．1 id选择器
10．3．2 class选择器
10．4 使用CSS样式表
10．4．1 内联样式
10．4．2 外部样式表
10．5 WXSS的新增特性
第11天 CSS常用属性
11．1 尺寸属性
11．2 背景属性
11．2．1 背景颜色
11．2．2 背景图像
11．3 文本格式
11．3．1 文本颜色
11．3．2 文本对齐方式
11．3．3 文本转换
11．3．4 文本缩进
11．4 字体属性
11．4． 1 字体系列
11．4．2 字体大小
第12天 CSS布局属性
12．1 盒模型(Box Model)
12．2显示方式与可见性
12．3 position定位
12．4 float浮动属性
12．5边框
12．5．1边框样式
12．5．2边框宽度
12．5．3边框颜色
12．6外边距和内边距
第13天Flex布局
13．1Flex布局简介
13．2模型
13．3容器属性
13．3．1主轴方向属性
13．3．2换行属性
13．3．3简写形式
13．3．4主轴对齐属性
13．3．5侧轴对齐属性
13．3．6多行对齐属性
13．4项目的属性
13．4．1顺序属性
13．4．2放大比例属性
13．4．3缩小比例属性
13．4．4伸缩基准属性
13．4．5简写形式
13．4．6单项对齐属性
第6部分JavaScript入门
第14天JavaScript语言基础
14．1文件的编辑和运行
14．2语句
14．2．1语句块
14．2．2注释语句
14．2．3小程序的调试输出语句
第15天变量与数据类型
15．1变量
15．2操作符
15．3数据类型
15．3．1数值
15．3．2字符串
15．3．3布尔型
15．3．4数据类型转换
15．3．5null和undefined
15．4数组
15．4．1创建和初始化数组
15．4．2数组元素的存取
15．4．3数组的操作
第16天流程控制语句
16．1条件语句
16．1．1if语句
16．1．2条件运算符
16．1．3逻辑操作符
16．1．4switch语句
16．2循环语句
16．2．1for循环
16．2．2for in循环
16．2．3while循环
16．2．4do while循环
16．2．5break退出循环语句
16．2．6continue继续循环语句
第7部分JavaScript进阶
第17天面向对象程序设计（OOP）
17．1类和对象
17．2创建对象
17．2．1直接创建Object类的对象实例
17．2．2用new关键字创建对象
17．2．3this关键字
17．3使用对象
17．4继承
第18天函数
18．1定义函数
18．1．1定义命名函数
18．1．2定义匿名函数
18．1．3用Function类创建匿名函数
18．2函数的参数
18．3函数的返回值
第19天JSON语法详解
19．1JSON的语法结构
19．2使用JSON
19．2．1从JSON中读数据
19．2．2向JSON中写数据
19．2．3修改JSON中的数据
19．2．4删除JSON中的数据
19．2．5遍历JSON对象
第20天ES6语法
20．1ES6简介
20．2ES6常用语法详解
20．2．1let变量声明语句
20．2．2const常量声明语句
20．2．3类操作语句
20．2．4arrow function箭头函数
第8部分工具和社区
第21天开发工具和学习社区
21．1Coolsite360可视化工具
21．2即速应用
21．3开发社区介绍
附录 微信小程序工具书
附录A小程序组件详解
A．1视图容器
A．1．1view
A．1．2scroll-view
A．1．3swiper
A．2基础内容组件
A．2．1icon
A．2．2text
A．2．3progress
A．3表单组件
A．3．1button
A．3．2checkbox-group
A．3．3form
A．3．4input
A．3．5label
A．3．6picker
A．3．7radio-group
A．3．8slider
A．3．9switch
A．3．10textarea
A．4导航组件
A．5媒体组件
A．5．1image
A．5．2video
A．6地图组件
A．7画布组件
附录B小程序API详解
B．1网络
B．1．1发起请求
B．1．2上传、下载
B．1．3Web Socket
B．2媒体
B．2．1图片
B．2．2录音
B．2．3音频播放控制
B．2．4音乐播放控制
B．2．5音频组件控制
B．2．6视频
B．2．7视频组件控制
B．3文件
B．4数据缓存
B．5位置
B．5．1获取位置
B．5．2查看位置
B．5．3地图组件控制
B．6设备
B．6．1系统信息
B．6．2网络状态
B．6．3重力感应
B．6．4罗盘
B．6．5拨打电话
B．6．6扫码
B．7界面
B．7．1交互反馈
B．7．2设置导航条
B．7．3导航
B．7．4动画
B．7．5绘图
B．8开放接口
B．8．1登录
B．8．2用户信息
B．8．3微信支付
B．8．4模板信息
B．8．5客服消息
B．8．6分享
附录CJavaScript的关键字和操作符
C．1JavaScript操作符
C．2 字符串方法(表C-8)
C．3Math对象
C．4Date对象(表C-13)

前言/序言

推荐序：价值观

从2016年11月开始公测以来，微信小程序的上线时间就一直成为众多圈内人士及用户密切关注的话题，在临近新年到来之际答案得以揭晓——2017年1月9日，微信小程序正式上线。

除了揭晓这个答案，在2017微信公开课PRO版这个非常重要的微信集中展示平台，腾讯公司高级执行副总裁、微信事业群总裁张小龙还重点介绍了小程序的发展历程，并全面阐述了其创作理念和开发者最关心的问题。其中的问题包括:有没有小程序的入口？会不会提供类似于小程序商店的地方供用户下载？小程序能不能推送消息？

对以上问题张小龙给出的答案皆为否定——没有！与之前的订阅号一样，用户需要订阅才能进入，在微信中没有专门的入口，小程序则可以通过二维码扫描进入；正如公众号没有公众号中心，微信里也不会做小程序的分发商店，只是可以查找和搜索；小程序不能推送消息，只会提供一些服务触达的方式。而且，除了这三点之外，微信小程序还没有订阅机制，没有粉丝；不能分享到朋友圈，只可以分享到聊天中；不能做游戏；与公众号是独立的关系。对这些设计，从常理来看有些人很不能理解，甚至觉得是贻笑大方，毕竟这几个拓展用户与产品接触面及扩充增值应用的方法是很多产品常用的，并且大多会有不错的实际收效。那么，为何张小龙率领的团队会有自己的打算呢？

在一年前的公开课上，张小龙分享过微信团队四点核心价值观：一切以用户价值为依归；让创造发挥价值；好的产品应该是用完即走的；让商业化存在于无形之中。

其中前面两点应该是所有团队、所有产品都应视为要旨而去遵循的价值观，相信这样的看法不会有太多的异议。毕竟，用户是产品最终的受众，不能深入挖掘用户需求的产品注定不会走远。再者，融入了智慧的创作过程就应该要产生价值，为用户，为合作伙伴，为社会，也为自己，这也是天经地义的。不过，不同的团队往往因为对这两点的理解不同而会有不同的推进方案和结果，也会出现上下落差极大的状况。而微信团队恰恰在这两点上做得最优秀，这也应该是其到目前为止非常成功的重要缘由。

而如果要深究他们为何能做到最优秀，后面的两点价值观则可以更进一步剖析。我们可以将前两点看作方向，是永远不可能达到极致但必须持续向最高远追求的理想，是形而上层面的道！后面两点则在一定程度上我们可以将之看成术，因为它指引了具体执行过程当中如何“为”的问题，所以它又是完全融合了前面所述“道”层面的术。而这正是其最高妙之处，展示了张小龙及团队对商业、用户,以及产品深邃而精准的理解。

“好的产品应该是用完即走的”，“让商业化存在于无形之中”，这两点表面上看似乎有悖于常道，但却暗合了道家“无为而治”思想的最高境界。老子《道德经》曾说“无为而无不为”，“无为”并不是说不作为，而是指不执着、不妄为，是要顺着事物的自然规律，顺着人的原初本性而为，这样能充分发挥万事万物天地自然的生命力而达到其自我实现，以至于全盘实现。所以之后还有“取天下常以无事”的说法，天下都能“无为而治”，团队管理与产品规划更不应是难事了。

关于“好的产品应该是用完即走的”，张小龙提到：“一个好的产品不是黏住用户，而是尽量让这个用户离开你的产品”，因为这对于用户来说是效率最高的结果，是自己最轻松自然的状态，从策划团队的指导思想来说这就是以用户价值为归依的体现，就是真正顺应了人这个本体所具有的本性状态，用户使用其产品自然会身心愉悦而无丝毫不快。在2017微信公开课PRO版上，张小龙再次着重强调了这个价值观。而且说去年提出了“用完即走”的观念后“一些业内人士都会来笑话我们”，但对此他们仍然岿然不动，因为他们坚信微信只是一个工具，其目的是帮助用户以最高效的方法去完成任务，这是工具的目的，工具的使命。用户完成自己的任务后，自然便不必再停留在产品中。而这一理念也一直贯穿在微信的所有产品线上，所以微信倡导去中心化，针对用户在哪里可以启动小程序这一问题，张小龙表示最希望的启动方式是扫二维码。这样，尽管在微信里面没有专门的入口，而每一个小程序关联的企业、卖场、产品包装、户外广告、影视传媒等都能够轻松显示二维码，这反而形成了“无入口而无处不是入口”的情况。而平常，很多团队的工作都是简单直接地围绕如何黏住用户来思考的，都是希望用户尽可能有更长的持续使用时间，都是以自我价值体现为出发点，以“为”的意识去策划，这样就忘却了产品的主体是用户，违背了用户自然的本性上的需求。没有用户会愿意浪费时间去做很多低效率的事情，哪怕他是在休闲时光享受着休闲的应用。所以就会出现“有为”却“为”不了，而表面上“无为”却大有所为。

“一个好的产品的商业化和用户的价值、用户的体验是并不矛盾，好的商业化应该是不骚扰用户，并且是只触达他需要触达的那一部分用户”，张小龙在阐述“让商业化存在于无形之中”的价值观时提到了这句话。“无形”是很多人看不到的用户真正需要的那些点，而这些点往往是用户最在乎的。“骚扰用户”就是被很多人所反感，往往不会因为一个应用好而忍气吞声，频繁骚扰的结果肯定是被直接卸载。所以小程序的推送也是不被允许的，除非用户自己选择愿意接收。

基于这样的理念和实际开发，如今呈现出来的小程序就是无须安装、触手可及、用完即走、无须卸载。对于用户来说就是使用起来最简单、最快捷，同时对用户对手机也最没有负担。用户使用前后脑子里不需要思考任何东西，想用马上就拿来，用后随即就完事。而对于微信团队来说这样的结果就是最不想黏住用户，反而是黏住用户最多最不想用户花费更多的时间，但确实会让更多的用户在微信上花更多的时间。所以，小程序也注定不会是“小”程序，它必将成为2017年移动互联网领域最热门的话题之一，也将带动大批关联的企业、团队、开发者加入其中，用户也能从微信平台获得更多的实用价值。

基于如此的移动互联网技术演进大势，作者非常合适宜地创作了这册图书《21天精通微信小程序开发》，出发点就是希望更多的开发者能够加入微信小程序这波洪流，并借此机会能进入更广阔、更深入的开发领域，因此其技术内容的创作及文字语句的写作都是专门针对相对比较基础的开发者。最贴心的是，作者还依照心理学家研究的成果“人养成或改变一个习惯只需要21天”来编排，将全部内容按日期分章节来规划阅读者的学习步骤，可谓考虑得非常周到。

当然，阅读本书的开发者最好也能够让自己所学的过程契合上文所述的“无为而无不为”的境界，于学习途中应忘记这个“21天”，明白它背后真正的要旨是期望大家能保证持续不间断地阅读及实作，克服怠惰或其他影响意志的不良习性依照本书循序渐进，勿三心二意，勿半途而废，借本次学习机会按照养成习惯的路径，由“刻意而不自然”的学习状态，经过“刻意而自然”直到“不经意，自然”的学习习惯。

在此基础上可以更进一层的是，大家借微信团队开发小程序及整个微信产品的价值观，想想自己需要的学习价值观和人生价值观，想想自己的理想和职业规划。一方面考虑清楚自己为何要阅读这本书，为何要学习小程序。是学得一技专长吗？还是作为一个契机和开始。如果能如此，你收获的一定不仅仅是微信小程序的开发技能，而将会收获到更多的平台和机遇，以及更美妙的未来！

范再生

掌脉科技COO （原《新潮电子》杂志社主编）

2017年元旦

前言

个人移动终端的轻应用时代已悄然来临。

微信小程序，一种依托微信轻应用理念的产品，尚未面世就掀起了一轮一轮的讨论热潮：微信的野心在哪里？小程序能做什么？开发者怎样去抓住小程序的风口？一个个问题摆在开发者面前，本书立足微信小程序已公开的技术架构，从技术和运营层面尝试解答开发者的问题，也尝试着能帮助没有开发经验的朋友，从零开始学习编程，快速掌握微信小程序的开发知识，成为一名“小程序员”。

本书有如下几个特点：

1�� 覆盖全面

本书全面介绍了微信小程序前端开发的相关支持，从微信的框架讲起，介绍了JavaScript、WXML、CSS等语言的基础知识和它们在微信小程序中的应用。

2�� 讲解详细

考虑我们的读者大多数是没有编程经验的朋友，我们对页面、组件、函数、面向对象等入门必须掌握的概念进行了深入浅出的讲解，内容丰富，语言平实，力求让每一位读者都能快速了解前端页面和逻辑开发的方法，走进程序员的大家庭。

时间仓促，加之笔者水平有限，书中难免会出现一些错误或者需要改进的地方，恳请读者批评指正。为了能更好地与您交流，您可以加我的微信或者QQ一起讨论小程序有关的话题，我的微信号和QQ号都是2264538870。

在本书撰写的过程中，得到了许多专业的、治学严谨的朋友的支持和鼓励，他们帮我整理思路、收集资料、校对书稿，没有他们的帮助，我也不可能在如此短的时间内完成书稿，在此谨向各位朋友的无私付出说一声谢谢：

陈波吴万海巢洁成雯谭小璐丁卓群熊丹洁徐翔明鉴张明彪洪森于莎莎尹金林程时丛赵云飞

感谢电子工业出版社的张迪编辑，感谢她在我的写作中提供的支持，也正因为她的认真与高效这本书才能如此迅速地与大家见面。

感谢腾讯公司的微信小程序团队，是他们创造了这样一款优秀的产品。

谨以此书献给我的家人，以及爱我和我爱的朋友们。

有帮助

21天精通微信小程序开发很实用！

书的质量还不错

没时间看

还没看不想看看了更不想看

好

可以当工具书用....

很　好

有帮助