作者：岂超凡
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
零基础学：微信小程序开发试读：
前言
微信小程序2016年由微信创始人张小龙提出，2017年第一批微信小程序正式上线。随着互联网的高速发展以及微信小程序“用完即走”的良好用户体验，微信小程序迅速发展、聚集了大量的用户和开发者。越来越多的人想要开发一款属于自己的微信小程序，微信小程序开发者也成为稀缺人才，很多相关人员和零基础人员也想快速踏入微信小程序的行列。本书将帮助你快速掌握微信小程序的开发知识点，通过实战项目，快速掌握微信小程序开发。
本书从微信小程序的结构及其常用的API开始，讲解了微信开发工具各面板的功能和使用、常用框架的搭建、UI组件的功能和使用、API的使用、事件的监听和处理、数据的交互和处理等知识点。书中包含大量的实战项目，方便读者更快地掌握微信小程序的知识运用、项目接口和各种功能模块的编写思路。
因作者水平和成书时间有限，书中难免有疏漏和不当之处，敬请指正。本书特色
1.内容覆盖全面
本书涵盖了微信小程序前端开发的相关技术，从微信的页面功能和框架讲起，介绍了微信小程序的数据展示处理、事件处理、UI组件的功能和使用、API的使用等，并在之后的实战项目中进行综合应用，由浅入深，从初步学习到彻底掌握，让初学者一步一步地快速掌握微信小程序开发。
2.大量实战项目
本书涵盖了大量不同类型的实战项目以及多个Demo，以便读者根据项目的难易程度，由易到难地进行全方位的综合练习。从项目开发的角度，引导初学者快速掌握微信小程序开发的思考方式和相关知识点的使用技巧，掌握框架的搭建以及项目的调试。
3.讲解循序渐进
本书根据微信小程序的知识点进行了整体梳理，然后拆分出项目结构、数据处理、事件处理、UI组件和API使用，分步骤、分模块地进行讲解，最后通过由易到难的项目进行综合练习，方便初学者快速理解、掌握。
4.配有视频讲解
为了提高学习效果，作者针对书中内容专门录制了大量视频（见华章官网），供读者快速掌握案例开发，加快学习进度。
5.读者交流学习
读者可以加入QQ群——21948169，群内有众多编程爱好者，大家可以在里面讨论问题、分享经验、结交朋友，一起更快更好地学习。本书内容及体系结构
本书分为两篇。第一篇为基础知识，包括第1～4章。
第1章主要介绍微信小程序的发展历程以及开发微信小程序需要哪些准备工作。通过创建“Hello World”项目让读者掌握微信小程序的项目创建和管理，以及开发工具各功能面板的使用。
第2章主要讲解微信小程序的项目配置、各文件的功能和使用。读者可以了解数据展示和事件处理的方法，掌握微信小程序和各个页面的生命周期，并且通过通信录项目了解循环数据的搭建和模板的使用。
第3章主要介绍微信小程序中常用的UI组件的功能和使用，并且通过计算器项目让读者了解控件的使用、事件的响应和数据的展示处理。
第4章分类介绍微信小程序提供的API及其使用，通过九宫格选图项目，让读者掌握API的使用以及控件的摆放。
第二篇为实战案例，包括第5～10章，通过实战项目帮助读者掌握微信小程序开发，巩固前面所学的知识。
第5章通过新闻阅读项目，让读者掌握使用tabBar进行结构搭建，掌握滚动视图的使用、数据的获取和处理、用户信息的获取以及对项目UI控件的排列和使用。
第6章通过单车共享项目，让读者掌握地图API的综合使用、项目框架的搭建，以及API的使用。
第7章通过视频快讯项目，让读者掌握tabBar项目的结构搭建、滚动视图的使用、重复样式的代码抽取，熟悉项目开发的流程。
第8章通过云音乐项目，让读者学会使用音乐播放API、自定义音乐播放控件、了解页面之间的跳转逻辑、掌握项目UI控件的排列和使用、熟悉项目开发的流程。
第9章通过对商城购物的讲解，让读者能够根据整体项目代码的逻辑进行拆分，学会调试项目。
第10章通过对外卖配送的讲解，让读者加深对整体项目代码的拆分思路的理解，学习如何对功能页面搭建框架，以及如何调试项目。读者对象
·微信小程序开发人员
·前端设计工程师
·JavaScript程序员
·互联网创业人员
·移动端程序员第一篇 基础知识第1章 认识微信小程序
当今，微信的普及程度已经很高了，几乎所有人的手机里都会安装微信，每天都有很多人使用微信聊天、工作、支付。2017年，微信发布了微信小程序，它属于微信公众号体系。1.1 微信小程序介绍
微信小程序是一种依托微信而建的、不需要安装的、随用随走的轻应用。随着网络的高度发展以及浏览器内核的优化，轻应用的微信小程序在这几年快速发展，像点餐，查、发快递，公交、地铁出行等小程序已经融入人们的生活，并且众多功能类的公众号，都开发出了对应的微信小程序，如中通快递的小程序等。1.1.1 什么是微信小程序“微信之父”张小龙这样定义微信小程序：微信小程序是一种不需要安装、下载即可使用、用完不需要卸载的应用，用户可以通过扫一扫或者搜索来打开应用，不使用的时候直接关闭即可，体现了“触手可及”的梦想和“用完即走”的理念。
从目前来看，微信小程序的实现方式是对HTML进行UI元素和功能的封装，用户打开的小程序其实是一个特殊的网页，并且微信对浏览器的内核做了专门的优化，这样使微信小程序的流畅度和用户体验感比普通的HTML页面更快，响应更好。例如，调用微信小程序提供的传感器API即可使用手机的传感器等。
在未来的发展中，个人移动设备的普及和数据网络传输速度的提升，使得网页类的应用体验和流畅度逼近原生应用，而且一套代码同时适配各种平台，可以大大地降低开发时间和开发成本，这些因素都会使网页应用开发更加普及。1.1.2 微信小程序的发展历史
2016年1月11日，张小龙指出，越来越多的产品通过公众号来做，因为在这里开发、获取用户和传播的成本更低。拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态——微信小程序。
2016年9月21日，微信小程序正式开启内测。在微信生态下，触手可及、用完即走的微信小程序引起广泛关注。
2017年1月9日，万众瞩目的第一批微信小程序正式上线。
2018年12月28日，微信更新6.6.6版本增加微信小游戏，使用户可以像使用微信小程序一样体验微信小游戏。1.1.3 微信小程序的功能和应用场景
根据微信开发文档提供的API来看，像获取用户信息、拍照、图片选取、地图展示导航、视频录制播放、音频录制播放等都是可以实现的；而且因为微信小程序是依托网页来开发的，所以在网页端可以实现的，在小程序端也可以实现。微信小程序对应用的大小是有要求的，一般要求上传后的小于1MB，所以一些音视频都需要从网络获取，而不能直接存放在本地。借助微信与其他公众号的账号体系，可以使用微信小程序来做功能，而使用公众号等来做运营、推广。
微信小程序目前已经拥有了广泛的应用场景，小到像商家平台的在线购物，出行的公交、地铁扫码，大到像58同城等租房求职，都可以通过微信小程序来完成。1.2 微信小程序开发准备
了解了微信小程序的应用场景和功能后，是不是已经迫不及待地想要开发一款自己的微信小程序了。开发微信小程序需要掌握HTML、CSS和简单的JavaScript知识，下面就先来介绍一下开发微信小程序需要哪些准备工作。1.2.1 基础准备
要进行微信小程序开发，首先要成为小程序开发者。登录微信公众平台，注册成为小程序开发者。具体操作如下：
打开网址https://mp.weixin.qq.com/，单击“立即注册”->“小程序”，然后填写信息、激活邮箱，如图1-1、1-2所示。
目前，微信小程序的注册发布主体包含企业、政府、媒体、其他组织等机构，个人也可以注册发布小程序。主体一经确认不能修改，所以要慎重。
个人账号无法进行微信认证，其他类型的账号必须进行微信认证才可以发布微信小程序。个人账号目前可以发布微信小程序，但是不具备支付功能。微信认证的官方时间为10～15个工作日，但是实际上一般1～3个工作日即可完成。
登录微信小程序账号，在“设置”->“基本设置”中可以对微信小程序的信息进行编辑、修改，但需要注意的是，修改是有次数限制的，具体可以参见“说明”部分。如小程序的名称一年只能修改2次，小程序的头像一个月只能修改5次。具体如图1-3所示。
在“服务类目”中，各个主体的服务类目各有不同，并且个人开发者的服务类目会随相关政策的变化而变化。图1-1 注册小程序图1-2 注册成为小程序开发者图1-3 小程序基本配置
在“暂停服务设置”中，可以对已经上线的小程序进行“可以访问”“不可以访问”等操作。
微信为小程序开发提供了专门的开发工具，在这个开发工具中，可以进行开发调试、代码编写、运行效果演示及程序发布配置等。小程序开发工具登录网址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html并根据电脑对应的操作系统进行下载安装即可，其中Windows系统分为32位和64位系统，苹果电脑系统为mac系统。如图1-4所示。
如果你有自己熟悉的IDE开发工具，也可以用它来编写代码，但是调试、运行效果演示、发布配置等功能还是要在微信小程序开发工具中进行。图1-4 下载小程序开发工具1.2.2 开发准备
登录微信小程序账号，在“用户身份”中可以增加、删除、编辑微信成员用户，也可以进行用户相应权限的设置。成员人数是有限制的，如个人开发最多可以绑定5个开发者、10个体验者，已认证小程序最多可以绑定20个开发者、40个体验者。如图1-5所示。图1-5 小程序用户身份配置
在“设置”->“开发设置”中，可以查看小程序的AppID，它是小程序的唯一标识符，在创建微信小程序的时候要用到。“服务器域名”配置，即微信小程序访问服务器时用到的域名，注意每个月只能修改5次，且只能使用https，不能使用IP地址或端口号，只能使用域名的方式。如图1-6所示。图1-6 小程序AppID和域名配置1.3 微信小程序开发工具介绍“工欲善其事必先利其器”，在开始编写代码之前，先来了解一下微信官方提供的微信小程序开发工具，这个开发工具可以对微信小程序进行项目管理、开发调试、发布、功能设置等。1.3.1 项目创建
打开微信小程序开发工具，如图1-7所示。上面为微信开发工具的版本号，中间为要创建的项目类型，底部为当前登录的微信账号。图1-7 微信开发工具首页
单击“小程序项目”可以编辑、调试小程序项目。如果本地没有项目，如图1-8所示，那么直接创建项目；如果项目已经存在，如图1-9所示，那么右侧会显示出已经存在的项目，包括程序的首页截图，项目的Logo、名称和路径，单击右下角的“+”创建新的项目。
也可以单击“管理项目”，然后单击右下角的“新增”来创建新的项目，如图1-10所示。图1-8 本地不存在项目图1-9 本地存在项目图1-10 利用项目管理新增项目
如果已经打开了项目，可以单击菜单栏中的“项目”->“新建项目”来新建项目。如图1-11所示。图1-11 利用菜单栏新建项目
图1-8中“项目目录”栏指的是项目存放的路径。AppID就是我们在1.2.2节开发准备中所提到的（在“设置”->“开发设置”中查看AppID），不填写AppID的话会有部分功能不能使用，如预览、上传等。“项目名称”即项目的名字，与发布后显示的名字无关。
勾选“建立普通快速启动模板”，系统会帮你建立一个小的Demo。
需要注意的是，最好将每一个项目都单独存放在一个目录下，同一个目录下不要存放多个项目，并且项目名称与项目路径中最好不要使用中文。1.3.2 项目删除
如果想删除项目，首先到如图1-10所示的项目管理页面，然后单击项目后面的“垃圾桶”图标进行删除，或者选中项目，单击左下角的“删除”。
单击菜单栏中的“查看所有项目”，如图1-12所示，可以进入如图1-9所示的页面，然后单击“管理项目”进入如图1-10所示的项目管理页面。图1-12 利用菜单栏查看所有项目
注意，微信小程序提供的项目删除功能不会删除本地文件，所以建议再手动删除本地项目文件。1.3.3 开发工具界面介绍
打开项目，如图1-13所示。图1-13 打开项目
上面为工具栏，左侧为模拟器窗口，右上为代码编辑窗口，右下为调试窗口。
工具栏如图1-14所示。图1-14 工具栏
从左往右开始介绍工具栏：首先是当前开发者的微信头像，可以查看接收的信息。然后是控制模拟器、编辑器、调试器窗口的开关，单击可以进行对应窗口的打开、关闭操作。往右是开发模式的选择，这里创建的是小程序，所以显示的是小程序模式。再往右是编译、预览，可以自定义编译模式来模拟用户进入小程序的状态，如扫描进入，单击分享进入等。预览则会生成一个二维码，用手机微信App扫描可以在真机上进行演示。
真机调试即手机远程调试，与预览效果差不多，区别是远程调试的打印日志会显示在电脑端的调试面板中。
切后台是模拟用户进入后台的各种效果、用户来电等情况。清缓存是模拟用户清除登录信息、存储信息、授权信息等情况。
模拟器窗口如图1-15所示。图1-15 模拟器窗口
左上角可以切换模拟器的屏幕尺寸，以查看不同分辨率下的页面展示效果，也可以进行自定义操作。往右是一个百分比，指定屏幕的缩放显示比例。单击右上图标可以把窗口独立出来，方便调整位置。
编辑窗口如图1-16所示。
左侧为文件目录，右侧为当前打开的文件内容。
调试窗口如图1-17所示，与网页端的调试一模一样。
单击窗口右上角的按钮可以使窗口独立出来，方便开发者移动位置。图1-16 编辑窗口1.3.4 项目调试介绍
Console面板：用于打印调试，如图1-18所示。图1-17 调试窗口图1-18 Console面板
当代码有错误的时候，错误信息会显示在Console面板中。同时，当执行console.log（）打印代码的时候，也会把里面的内容显示在Console面板中，也可以在Console面板中输入JavaScript代码并执行。
Sources面板：进行断点调试，如图1-19所示。图1-19 Sources面板
左侧显示的是项目的文件目录；中间是某个文件的内容，文件内容的左侧有行数标识，点击行数标识可以添加断点，进行断点调试；右侧Watch可以查看某个元素值的变化，Watch上面的按钮控制单步执行和断点执行。
Network面板：用于网络查看，如图1-20所示。图1-20 Network面板
查看发送的网络请求及参数、接收到的响应信息等具体情况，也可以看到每个请求的用时等详细情况。
Wxml面板：用于查看页面元素，如图1-21所示。图1-21 Wxml面板
查看页面上的元素的结构，查看CSS样式等，调试面板左上角的图标可以快速地选择要查看的Wxml元素。
AppData面板：用于查看当前页面的全局数据，如图1-22所示。图1-22 AppData面板
可以实时地查看当前页面的数据值，方便观察数据的变化情况。1.4 项目实战：“Hello World”项目
本节创建了一个原始项目，创建项目的步骤如下：（1）利用微信内置的模板，创建一个Demo项目。详细步骤同1.3.1节描述的项目创建那样。切记在创建的项目中勾选“建立普通快速启动模板”（如图1-8所示）。利用系统模板创建出来的项目的结构如图1-23所示。图1-23 系统项目模板目录（2）在模拟器中运行，单击“获取头像昵称”，模拟器会展示当前用户的头像昵称，在下面显示“Hello World”文字。（3）使用“Xml面板”查看元素，使用“Sources面板”对项目进行断点调试。项目界面如图1-24所示。
注意
·此模板会自动创建index页面和logs页面，其中首页展示的是index页面，点击用户头像会跳转到logs页面，utils为工具类。
·其中app.js、app.json、app.wxss、project.config.json为系统文件，模板会自动创建，如果不勾选“建立普通快速启动模板”，则需要开发者手动创建app.js、app.json、app.wxss这三个文件，但不论是否勾选该项，都会自动创建project.config.json文件。
·项目文件存放在创建项目时填写的项目路径目录下，项目的文件结构与项目的层级结构一致。app.js、app.json、app.wxss、project.config.json文件单独存放在项目路径文件夹下。快速查看方法：单击鼠标右键，在打开的快捷菜单中选择“硬盘打开”。图1-24 Hello World项目界面1.5 本章小结
本章主要介绍了微信小程序的定义、微信小程序的注册和配置、微信小程序项目的管理、微信小程序开发工具的基本使用。通过微信小程序内置的模板项目，练习使用微信小程序开发工具。第2章 微信小程序项目结构配置
微信小程序在快速创建的时候就提供了一个简单的Demo项目，项目文件结构如图2-1所示。本章将基于微信小程序提供的这个Demo项目，深入地了解微信小程序项目文件的作用和配置，以及项目框架搭建的合理性。图2-1 Demo项目文件结构2.1 文件介绍
微信团队为微信小程序的文件创建了单独的后缀类型：.wxml和.wxss。这两种文件后缀只有微信小程序能够识别，但是这两种文件又分别与网页中的.html和.css文件对应，并且使用方法也几乎一致。在以.js和.json为后缀的文件中，微信团队并没有对其做后缀的更改，与网页中的文件后缀一致。在微信小程序中，代码文件就是这四种，并且每一个独立的页面都拥有这四个文件（.wxml、.wxss、.js、.json）。同一个页面，这四个文件的文件名必须相同，微信团队在内部对这四个文件进行了关联，并且每一个页面都有其独立的作用域。因为微信小程序运行在微信应用的内核中，如果用浏览器打开的话，会无法解析，所以微信小程序只能运行在微信应用中。2.1.1 .wxml后缀的结构文件
.wxml文件是微信团队自创的一种文件格式，这个文件的功能与网页端的.html文件的功能是一样的，都是用来存放页面上的组件、元素的。不同的地方是微信小程序的.wxml文件不能存放JavaScript代码，并且没有头和体的概念，只能存放组件和行内CSS样式。2.1.2 .wxss后缀的样式文件
.wxss文件是微信团队自创的一种文件格式，这个文件的功能与网页端的.css文件的功能是一样的，都是用来设置元素样式的。而且，网页的布局、元素、属性、选择器等都与网页端的.css文件一致，也就是说，完全可以将网页的布局和选择器用于微信小程序的布局和选择器，且两者的布局和选择器可以互用。
app.wxss文件是一个外链的样式文件，可以不必在其他文件中单独引入而直接作用其样式，对应的样式级别也是最低的，一般用来存放全局的公共样式。2.1.3 .js后缀的逻辑文件
.js文件书写业务逻辑代码，单击、滑动、上下拉刷新等事件执行代码。.js文件用JavaScript代码书写，遵从JavaScript语法和规范。
官方在JavaScript的基础上增加了一些封装，例如APP（{}）和Page（{}）等，还提供了丰富的API，如图片选择、扫一扫等，使得微信小程序开发起来更加简单、方便。
app.js文件是比较特殊的，它是微信小程序的入口文件，掌控整个小程序的生命周期，同时有一些全局的属性、变量也存放在这个文件中。2.1.4 .json后缀的配置文件
.json是一种数据格式，微信小程序单独把.json数据拿出来，根据定义的.json数据字段来创建不同的页面样式效果。
app.json文件是小程序的公共配置文件，决定了可以加载的页面、导航栏样式、网络超时时间等配置信息。
在微信小程序中有一个特殊的.json文件，即project.config.json，这个文件是整个微信小程序的配置文件，整个项目的一些配置信息都存放在这个文件夹中。当在微信开发工具中进行配置修改时，这个文件内对应的值也会进行修改，并且在一个项目目录下，只能存在一个project.config.json文件，这也是为什么强调同一个目录下最好只有一个项目，以防project.config.json文件冲突。2.1.5 项目结构推荐配置
微信团队提供的Demo的文件目录分得非常清晰，页面单独存放在pages文件夹下，然后每一个页面单独创建一个文件夹，里面的四个文件的文件名与文件夹名称一致。把用到的一些第三方插件工具等放入utils文件夹中，如果要使用图片的话，还可以单独创建一个images文件夹，把使用到的图片放在images文件夹中。
全局的文件app.js、app.json、app.wxss、project.config.json文件单独放在项目文件夹中即可，注意这几个文件是不可以更改文件名的，并且是唯一的。如图2-2所示。图2-2 微信小程序目录结构2.2 微信小程序配置
一个项目的网络请求超时时间、导航栏的样式等，一般都是统一的。对于统一的信息，修改一个地方就能达到所有的地方都被修改的效果，这样做才是最合理的，否则，一个地方一个地方地修改不仅麻烦还容易遗漏。在微信小程序中，app.json和app.wxml就是用来进行统一的样式配置的。2.2.1 样式配置
app.json文件是统一的项目配置文件，每一个页面的配置文件为pageName.json。app.json文件的具体代码如下：{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }}
pages用来存放用到的所有页面的路径，写的是pageName.wxml的路径，但是不需要写后缀，系统会自动查找页面对应的其他文件。注意，最后一个不需要用“，”分隔。第一个页面路径为首页显示的页面。
window是窗口的样式设置，用来设置微信小程序的状态栏、标题、导航栏等的样式。颜色只接受十六进制的颜色值。其属性如表2-1所示，各属性对应的位置如图2-3所示。表2-1 window的配置项图2-3 window各属性的位置
tabBar是多tab应用时使用的，用户可以在微信小程序的底部切换页面，建议最少2个，最多5个。其属性如表2-2所示，各属性对应的位置如图2-4所示。表2-2 tabBar属性图2-4 tabBar各属性的位置
试读结束[说明：试读内容隐藏了图片]