微信小程序入门

• 真正零基础无需HTML、CSS、JavaScript等技术基础，即可跟随本书学习。保证让你在学会小程序开发的同时，前端开发技能也达到中等水平。• 增一分太长，减一分太短本书力求覆盖开发所需的全部知识点，保证够用又杜绝浪费，杜绝介绍不重要的内容凑页数，以免耽误读者时间。• 讲明白，多练习技术的意义是让事情简单化，而不是造出一堆晦涩的名词让人困惑。对于CSS或JavaScript的个别难点（如flex布局、闭包等），皆以通俗语言重点说明，保证“一看就懂”。在介绍知识点的时候，没有通篇的概念原理，只有简明扼要的说明和易懂的示例，做到“通俗易懂，即能上手”。• 少些主义，多些干货本书是面向开发者的，不对小程序的运营及商业发展进行过多讨论，而是竭作者之所能，为读者奉上满满的技术干货，提供两个翔实的实战案例：实时公交小程序和电商平台小程序。 

“一条主线”，以小程序开发框架为主线。第1～3章从小程序概述及开发流程讲起，介绍了小程序开发框架的基础知识，并使其贯穿全书。
“两个重点”，以框架中的视图层和逻辑层为重点。第4～6章从页面的组件、CSS样式及布局共三个层面讲解如何开发小程序页面。第7～8章从基础的JavaScript语法到小程序API接口，深入浅出地介绍了代码逻辑的实现。
“两个案例”，以实时公交和电商平台综合案例结尾。第9～10章对前面的知识进行了回顾和实践，并简单介绍了程序设计和开发的思路。
本书面向零基础的微信小程序爱好者、有一定基础的前端工程师以及计算机相关专业的学生。

用“小而美”形容微信小程序再合适不过了：
微信小程序是一个轻量级的前端技术，对代码体积、页面层级都有明确限制，是为“小”；同时，其语法简洁、框架优雅、用户体验流畅，是为“美”。

我们正处在一个知识爆炸的时代，表面上获取信息的成本越来越低，百度、知乎、分答等，都可以帮助人们方便快捷地获取信息，但构建知识体系的成本却在增大。有效“信号”增加的同时，“噪音”增加得更多，人们不得不花费大量精力去伪存真。本书并不创造新知识，只是把作者的多年实践经验结合微信小程序梳理成册，分享给读者。希望这是一本有用的书，是一本节约读者时间的书，希望能够和读者一起见证小程序的成长，一起领略“小而美”。

本书涵盖了小程序开发所需要的全部内容，内容翔实，通俗易懂，不仅适合有一定基础的读者，也适合零基础的读者。

本书首先介绍了小程序是什么，为何而生，有什么特性，随后讨论了小程序的开发过程及开发框架。在此基础上，对开发框架所涉及的视图层及逻辑层分别展开介绍。页面组件、页面样式及页面布局，共同构成了视图层三部曲，掌握了这些就掌握了页面开发方法。随后，对框架的逻辑层所涉及的JavaScript语言以及微信小程序所提供的接口进行详细介绍。后，以两个综合案例，对前面的内容进行实践和回顾。

本书共10章，各章内容简介如下。

第1章介绍了小程序是什么、如何使用、有何特性，并从业务和技术角度分别与公众号和App、H5进行对比，并对读者比较关心的常见问题进行解答。

第2章介绍了小程序的开发流程，注册、完善信息、开发和上架，并对开发工具的使用进行重点介绍，让读者快速建立自己的个小程序。

第3章介绍了小程序开发框架，包括项目结构、配置文件、逻辑层、视图层，这些是小程序开发的基础，其中涉及微信自创的WXML及WXSS。第4章介绍了页面组件，详细介绍了从容器组件到内容组件、表单、导航、媒体组件、地图组件及客服组件的使用方法。

第5章介绍了页面样式，以CSS为线索介绍了WXSS的定义方法、选择器、基础样式定义及动态样式定义，并对CSS与WXSS的差异点加以说明。

第6章介绍了页面的布局，其内容基于第4、5章，也是界面开发的重点及难点，书中对传统页面布局及当下流行的flex布局进行了详细介绍，后对常见App的典型布局加以实战。

第7章介绍了JavaScript的基础知识，除了基础的语法知识外，对较难理解的立即执行函数、闭包、原型、继承都进行了透彻的讲解，初学者只要认真阅读，也一定能够理解，后补充了JavaScript规范ES6的主要用法。

第8章介绍了微信小程序API接口，有了JavaScript基础就可以使用微信特有的接口，文中介绍了网络操作、媒体操作、数据缓存、位置操作，还有与设备相关的操作，以及微信用户授权、模板消息、微信支付等接口的使用方法。

第9章以实时公交为例，介绍了小程序开发过程中的需求分析、视图层设计、逻辑层设计以及程序开发等步骤，并简单介绍了小程序设计和开发的思路。

第10章以更为实用的电商平台为例，介绍了一个界面种类较多、操作较丰富的小程序应用的实现过程，并对实现中的页面细节进行了详细介绍。

本书由互联网老兵厉业崧、哈尔滨工程大学的王向辉老师、黑龙江大学的杨国燕老师负责主要编写工作。其中，厉业崧编写第1～3及6～7章，王向辉编写第4～5章，杨国燕编写第8～10章。同时参与本书编写工作的还有彭永成、杨春艳，在这里对他们的辛苦工作表示衷心感谢。

为了完成本书，我经常加班到深夜，在此要感谢我的家人对我的理解和支持，我爱他们。

 

厉业崧

2017年8月◆微信小程序入门

第5章Chapter5
页 面 样 式5.1WXSS概述CSS(Cascading Style Sheets)是一套样式语言，用于描述HTML组件的样式，决定HTML组件如何显示。微信小程序的WXSS(WeiXin Style Sheets)也是一套样式语言，用于描述小程序的组件样式，决定小程序组件如何显示。WXSS在很大程度上借鉴了CSS的语法。WXSS保留了绝大部分CSS的特性，小程序官方并未给出专门文档。本章以CSS为主线展开，以介绍原理为主，不涉及过多细节，实践中可以通过查阅CSS手册掌握细节。同时，对WXSS与CSS的区别进行重点说明。5.1.1定义样式〖*2〗1. 角色在微信小程序中，WXML负责页面结构（类似HTML），WXSS负责页面样式和布局（类似CSS），而JavaScript负责页面交互及逻辑实现。WXSS在小程序中扮演的角色和CSS在前端开发中的角色类似。2. 语法WXSS对大小写敏感，书写规则由两部分构成： 选择器 声明，如图51所示。图51WXSS的书写规则 选择器： 要使某个样式应用于特定的页面元素，首先要找到该元素，负责达成这一任务的规则称为选择器，详见第5.2节。 声明： 用于设定样式属性值，在英文大括号｛｝中的就是声明，属性和值之间用英文冒号： 分隔。当有多条声明时，中间可以用英文分号;分隔。◆微信小程序入门第◆5章页面样式下面的示例中的p就是选择器，声明中设置了color和textalign两个属性值，如下所示：p{color:red;text-align:center;}3. 注释 CSS注释以 /* 开始, 以*/ 结束, 示例如下:/ 文件头注释,适用于文件头部  author:Jason.Lee  des:页面基础样式  date: 2017-5-1 //  多行注释,适用于某个模块 这是第二行 /p {text-align:center; / 单行注释,适用于要点说明 /color:black;font-family:arial;}5.1.2使用样式〖*2〗1. 内联样式页面中可使用style直接设定组件的样式，示例如下。虽然语法支持，但开发中应尽量避免这种将静态样式写入style的操作，以免影响渲染速度。内联样式常用于设置动态样式，详见第5.5节。我是内容2. 外部样式 为常用的做法是将样式独立定义在WXSS文件中，然后引入WXSS文件。下面的示例将外部样式定义在app.wxss文件中。示例代码如下：/ app.wxss /page {background-color: #fbf9fe;height: 100%;}在使用WXSS的样式时，有以下两种引用方式。（1） 自动引用 小程序定义了自己的工程结构及文件关联规则，符合要求的WXSS文件会自动引入。定义在 app.wxss中的样式为全局样式，作用于每一个页面。在page的wxss文件中定义的样式为局部样式，只作用在对应的页面，并且会覆盖 app.wxss 中相同的选择器。（2） import引用 使用import命令可以将一个WXSS文件引入到另一个WXSS文件中。@import后连接需要导入的外联样式表的相对路径，用;表示语句结束。示例代码如下：/ 被使用者: common.wxss /.small-p {padding:5px;}/ 使用者: app.wxss /@import “common.wxss”;.middle-p {padding:15px;}