重磅推荐
【编辑】
《微信小程序开发零基础入门 》是一本从零开始学习的微信小程序开发入门书，无需额外的基础。全书以项目驱动为宗旨，循序渐进、案例丰富，详细介绍了微信小程序的入门基础知识与使用技巧。
【内容简介】
本书是一本从零开始学习的微信小程序开发入门书，无需额外的基础。全书以项目驱动为宗旨，循序渐进、案例丰富，详细介绍了微信小程序的入门基础知识与使用技巧。 全书共分为12章，主要内容包括4个部分。*部分是入门篇，包括第1章和第2章的内容，这两章介绍了小程序的由来、首次注册和创建项目流程；第二部分是基础篇，包括第3章和第4章的内容，这两章介绍了小程序框架和组件；第三部分是应用篇，包括第5～11章的内容，这7个章节分别讲解了微信小程序中网络API、媒体API、文件API、数据API、位置API、设备API以及界面API的用法；第四部分是提高篇，包括第12章的内容，这一章节提供一个综合应用设计示例——高校新闻小程序的设计与实现，综合应用了全书所学知识，让读者所学即所用。全书包含完整例题应用110个，均在微信web开发者工具和真机中调试通过，并提供全套例题源代码、练习题和视频讲解。 本书可作为小程序爱好者的零基础入门选择，也可作为前端工程师和计算机相关专业学生的小程序开发工具书。
【作者简介】
周文洁 澳大利亚墨尔本大学信息技术专业毕业，工学硕士学位。 曾任职于微软大中华区客户服务与技术支持中心，现任职于安徽师范大学，从事教学、系统运维和研发等工作。2018年*批产学协同育人项目——微信事业部“微信小程序课程改革”负责人。主要从事Java程序设计、Android程序设计、HTML5网页前端设计等课程教学工作，擅长案例式教学模式，并开发过多个商业项目。近年来出版Web前端开发技术系列教材，独立编著了《HTML5网页前端设计》和《HTML5网页前端设计实战》等教材。
【目录】
目录
*部分 入 门 篇
第1章 微信小程序入门 3
1.1 微信小程序概述 3
1.1.1 小程序简介 3
1.1.2 小程序的诞生 3
1.1.3 小程序的功能 4
1.1.4 小程序的创建流程 5
1.2 开发小程序的准备工作 5
1.2.1 注册开发者账号 5
1.2.2 小程序的信息完善 13
1.2.3 小程序的成员管理 16
1.3 小程序的开发工具 17
1.3.1 软件的下载与安装 17
1.3.2 开发者工具的登录 18
1.3.3 其他辅助工具 21
1.4 小程序的未来展望 21
第2章 *个微信小程序 22
2.1 创建*个微信小程序 22
2.1.1 新建项目 22
2.1.2 真机预览和调试 25
2.1.3 代码的提交 27
2.1.4 小程序的版本 28
2.2 小程序的目录结构 29
2.2.1 项目配置文件 29
2.2.2 主体文件 30
2.2.3 页面文件 36
2.2.4 其他文件 37
2.3 开发者工具的介绍 38
2.3.1 菜单栏 38
2.3.2 工具栏 40
2.3.3 模拟器 41
2.3.4 编辑器 41
2.3.5 调试器 42
第二部分 基 础 篇
第3章 小程序框架 49
3.1 逻辑层 49
3.1.1 注册程序 49
3.1.2 注册页面 53
3.1.3 页面路由 58
3.1.4 模块化 60
3.1.5 API 60
3.2 视图层 61
3.2.1 WXML 61
3.2.2 WXSS 74
3.2.3 组件 77
3.3 flex布局 77
3.3.1 基本概念 77
3.3.2 容器属性 78
3.3.3 项目属性 83
第4章 小程序组件 88
4.1 组件的介绍和分类 88
4.1.1 组件的介绍 88
4.1.2 组件的分类 89
4.2 视图容器组件 89
4.2.1 view 89
4.2.2 scroll-view 91
4.2.3 swiper 93
4.2.4 movable-view 95
4.2.5 cover-view 99
4.3 基础内容组件 100
4.3.1 icon 101
4.3.2 text 103
4.3.3 rich-text 105
4.3.4 progress 109
4.4 表单组件 110
4.4.1 button 111
4.4.2 checkbox 115
4.4.3 input 117
4.4.4 label 122
4.4.5 form 123
4.4.6 picker 126
4.4.7 picker-view 133
4.4.8 radio 135
4.4.9 slider 137
4.4.10 switch 139
4.4.11 textarea 141
4.5 导航组件 143
4.6 媒体组件 145
4.6.1 audio 145
4.6.2 image 147
4.6.3 video 151
4.6.4 camera 154
4.7 地图组件 155
4.7.1 markers 156
4.7.2 polyline 158
4.7.3 circles 158
4.8 画布组件 160
第三部分 应 用 篇
第5章 网络API 165
5.1 小程序网络基础 165
5.1.1 小程序/服务器架构 165
5.1.2 服务器域名配置 168
5.1.3 临时服务器部署 169
5.2 发起请求和中断请求 170
5.2.1 发起请求 170
5.2.2 中断请求 171
5.3 文件传输 174
5.3.1 文件的上传 174
5.3.2 文件的下载 178
第6章 媒体API 182
6.1 图片管理 182
6.1.1 选择图片 182
6.1.2 预览图片 183
6.1.3 获取图片信息 183
6.1.4 保存图片 184
6.2 录音管理 186
6.3 音频管理 189
6.3.1 背景音频管理 189
6.3.2 音频组件控制 192
6.4 视频管理 195
6.4.1 选择视频 195
6.4.2 保存视频 195
6.4.3 视频组件控制 196
6.5 相机管理 199
第7章 文件API 203
7.1 保存文件 203
7.2 获取文件信息 205
7.3 获取本地文件列表 208
7.4 获取本地文件信息 211
7.5 删除本地文件 214
7.6 打开文档 217
第8章 数据缓存API 220
8.1 本地缓存 220
8.2 数据的存储 221
8.2.1 异步存储数据 221
8.2.2 同步存储数据 223
8.3 数据的获取 225
8.3.1 异步获取数据 225
8.3.2 同步获取数据 227
8.4 存储信息的获取 229
8.4.1 异步获取存储信息 229
8.4.2 同步获取存储信息 231
8.5 数据的删除 232
8.5.1 异步删除数据 232
8.5.2 同步删除数据 235
8.6 数据的清空 237
8.6.1 异步清空数据 237
8.6.2 同步清空数据 238
第9章 位置API 241
9.1 位置信息 241
9.1.1 经纬度坐标 241
9.1.2 坐标的类别 241
9.2 获取和选择位置 242
9.2.1 获取位置 242
9.2.2 选择位置 244
9.3 查看位置 245
9.4 地图组件控制 247
9.4.1 获取地图上下文对象 247
9.4.2 获取地图中心坐标 248
9.4.3 移动到指定位置 249
9.4.4 动画平移标记 250
9.4.5 展示全部坐标 252
9.4.6 获取视野范围 254
9.4.7 获取地图缩放级别 255
第10章 设备API 257
10.1 系统信息 257
10.1.1 获取系统信息 257
10.1.2 canIUse() 259
10.2 网络 261
10.2.1 网络状态 261
10.2.2 Wi-Fi 263
10.3 传感器 268
10.3.1 罗盘 268
10.3.2 加速度计 270
10.4 用户行为 272
10.4.1 截屏 272
10.4.2 扫码 272
10.4.3 剪贴板 274
10.4.4 通话 275
10.5 手机状态 279
10.5.1 内存 279
10.5.2 屏幕亮度 279
10.5.3 振动 282
第11章 界面API 283
11.1 交互反馈 283
11.1.1 消息提示框 283
11.1.2 加载提示框 285
11.1.3 模态弹窗 287
11.1.4 操作菜单 289
11.2 导航条设置 291
11.2.1 当前页面标题设置 291
11.2.2 导航条加载动画 292
11.2.3 导航条颜色设置 293
11.3 tabBar设置 295
11.3.1 tabBar标记 295
11.3.2 tabBar红点 296
11.3.3 onTabItemTap() 297
11.3.4 设置tabBar样式 297
11.3.5 显示与隐藏tabBar 298
11.4 页面导航 303
11.4.1 跳转到新页面 303
11.4.2 返回指定页面 304
11.4.3 当前页面重定向 304
11.4.4 重启页面 305
11.4.5 切换tabBar页面 305
11.5 动画 308
11.5.1 动画实例 308
11.5.2 动画的描述 309
11.5.3 动画的导出 310
11.6 页面位置 314
11.7 绘图 315
11.7.1 准备工作 315
11.7.2 绘制矩形 317
11.7.3 绘制路径 319
11.7.4 绘制文本 326
11.7.5 绘制图片 329
11.7.6 颜色与样式 331
11.7.7 保存与恢复 342
11.7.8 变形与剪裁 342
11.7.9 图像的导出 348
11.8 下拉刷新 350
11.8.1 监听下拉刷新 350
11.8.2 开始下拉刷新 350
11.8.3 停止下拉刷新 351
第四部分 提 高 篇
第12章 综合设计应用实例——高校新闻小程序 355
12.1 需求分析 355
12.2 设计与实现 355
12.2.1 项目的创建 355
12.2.2 文件的配置 356
12.2.3 视图设计 359
12.2.4 逻辑实现 368
12.3 *终效果展示 378
12.4 完整代码展示 379
12.5 项目小结 386
附录A 个人开发者服务类目 387
附录B 小程序场景值 389
附录C 小程序预定颜色 391
【前言】
前言
微信小程序（Mini Program）是一种轻量级的应用，它实现了应用“触手可及”的梦想，用户无须下载、安装即可在微信中使用小程序。微信小程序在基于Web前端技术基础的同时有其独特的语法和框架，提供微信同款UI和功能接口，大幅度提高了开发者的效率，不仅能让零基础入门的开发者迅速上手开发出美观且流畅的应用，也能给使用者带来优秀的体验。
本书是一本从零开始学习的微信小程序开发入门书，读者无需额外的基础。全书以项目驱动为宗旨，循序渐进、案例丰富，详细介绍了微信小程序的入门基础知识与使用技巧。
全书共4部分12章，分别组成如下。
*部分是入门篇，包括第1章和第2章的内容。其中，第1章是微信小程序入门，概要介绍了小程序的诞生、特点和主要功能，详细讲解了如何注册开发者账号和完善信息，以及开发工具的下载与安装；第2章是*个微信小程序，从零开始讲解新建项目、真机预览和调试、代码提交等操作，并基于该项目介绍了小程序的目录结构和开发者工具的基本功能。
第二部分是基础篇，包括第3章和第4章的内容。其中，第3章是小程序框架，主要讲解了逻辑层、视图层和基础布局模型flex的用法；第4章是小程序组件，按照功能分类依次介绍了视图容器、基础内容、表单、导航、媒体、地图和画布组件的用法。
第三部分是应用篇，包括第5～11章的内容。这7章分别讲解了微信小程序中的各类API，包括网络API、媒体API、文件API、数据缓存API、位置API、设备API以及界面API。
第四部分是提高篇，包括第12章的内容。这一章提供了一个综合设计应用实例——高校新闻小程序的设计与实现。该章从创建程序开始详细介绍了一个仿网易新闻小程序的完整项目开发过程，包括页面的布局样式设计、逻辑的处理，以及相关API的调用等。
本书*后是附录。本书包含完整例题应用110个，均在微信web开发者工具和真机中调试通过，并提供了全套例题源代码、练习题和视频讲解。
为方便读者综合应用本书所学知识进行实战项目的开发，本书作者精心为每章配套编制了多个综合实战项目，已编入《微信小程序开发入门实战》，可作为本书的配套实践指导书。
*后，感谢清华大学出版社的魏江江主任、本书责任编辑以及相关工作人员，非常荣幸能有机会与卓越的你们再度合作；感谢家人和朋友给予的关心和大力支持，本书能够完成与你们的鼓励是分不开的；特别感谢刘嵩和刘欣妍的支持，让我可以专注于书稿的编写与修订。
愿本书能够对读者学习微信小程序有所帮助，并真诚地欢迎读者批评指正，希望能与读者朋友们共同学习成长，在浩瀚的技术之海不断前行。
作 者
2018年9月
【免费在线读】
小程序框架
本章主要内容是小程序框架，包括逻辑层、视图层和flex模型。逻辑层是由JavaScript编写而成的，视图层由WXML和WXSS配合组件构成，flex布局可以确保页面需要适应不同屏幕尺寸及设备类型时元素在恰当的位置。
* 掌握注册程序和页面相关函数的用法；
* 掌握页面路由的方式和模块化的用法；
* 掌握WXML的数据绑定、列表/条件渲染、模板、事件和引用；
* 掌握WXSS的尺寸单位、使用方式和选择器的用法；
* 了解flex布局的基本概念；
掌握flex布局中的容器属性和项目属性。*
3.1 逻辑层
小程序开发框架的逻辑层又称为App Service，是由JavaScript编写和实现的。开发者 写的所有代码*后将被打包成一份JavaScript，并在小程序启动的时候运行，直到小程序被 销毁。
逻辑层的主要作用是处理数据后发送给视图层渲染以及接收视图层的事件反馈。
为了更方便地进行项目开发，小程序在JavaScript的基础上进行了一些优化，例如：
（1）新增App()和Page()方法，分别用于整个应用程序和单独页面的注册。
（2）新增getApp()和getCurrentPages()方法，分别用于获取整个应用实例和当前页面 实例。
（3）提供丰富的微信原生API，例如可以方便地获取微信用户信息、本地存储、扫一扫、微信支付、微信运动等特殊功能。
（4）每个页面具有独立的作用域，并提供模块化功能。
需要注意的是，由于框架不在浏览器中运行，所以JavaScript与浏览器相关的一些功能无法使用，例如document、window等。
3.1.1 注册程序
App()方法
小程序通过使用App(OBJECT)方法进行应用注册，用其指定小程序的生命周期函数。
OBJECT参数如表3-1所示。
表3-1 App()方法的OBJECT参数
属 性
类 型
描 述
触 发 时 机
备 注
onLaunch()
Function
生命周期函数——监听小程序的初始化
当小程序初始化完成时触发
全局只触发1次
onShow()
Function
生命周期函数——监听小程序的显示
当小程序启动或从后台进入前台显示时触发
onHide()
Function
生命周期函数——监听小程序的隐藏
当小程序从前台进入后台隐藏时触发
onError()
Function
错误监听函数
当小程序发送脚本错误或API调用失败时触发
onPageNotFound()
Function
页面不存在函数
当小程序需要打开的页面不存在时触发
其他自定义参数
Any
开发者可以添加自定义名称的函数或数据到OBJECT参数中
用this可以访问
注意：App()方法只能写在小程序根目录下的app.js文件中，并且只能注册1个。
用户可以使用微信web开发者工具在空白app.js文件中直接输入关键词app，此时会自动出现提示列表，如图3-1所示。
图3-1 app.js的代码提示列表
默认选择提示列表中的*项，直接按回车键就可以自动生成带有生命周期全套函数的代码结构，如图3-2所示。
事实上，App()中的这些函数均为可选函数，开发者可以根据实际需要删除其中的部分函数，或保留这些函数但空着不填充内容。
第12、19行注释语句均提到了小程序后台和前台的概念，具体说明如下。
* 小程序后台：指的是小程序没有在手机当前画面显示，但是并没有被销毁。当用户 单击左上角的按钮关闭小程序或者按设备的Home键离开微信时会进入后台运行 状态。
* 小程序前台：指的是小程序在手机当前画面被使用。当用户再次打开处于后台运行状态的小程序时会重新进入前台运行状态。
注意：只有当小程序进入后台一定时间或者系统资源占用过高时才会被真正地销毁。
