微信小程序开发图解案例教程（附精讲视频） pdf epub mobi txt 电子书 下载 2025

简体网页||繁体网页

☆☆☆☆☆

刘刚 著

图书标签:

• 微信小程序
• 小程序开发
• 前端开发
• 移动开发
• 图解教程
• 案例教程
• 编程入门
• 精讲视频
• 开发实战
• Web开发

出版社： 人民邮电出版社

ISBN：9787115450456

版次：1

商品编码：12072845

包装：平装

开本：16开

出版时间：2017-04-01

用纸：胶版纸

页数：344

正文语种：中文

产品特色

编辑推荐

适读人群 ：本书可供对微信小程序开发有兴趣的读者自学，也可作为院校、培训机构微信小程序开发课程的教材。
　　微信小程序可以实现App软件的原生交互操作效果，无需安装卸载，解放用户手机内存。商家使用微信小程序也可以被更多用户找到自己的产品，成为有利的宣传。2017年是小程序发布的元年，它的市场广阔，提供了很多就业的机会，成为一名小程序员吧！
　　《微信小程序开发图解案例教程》助你3步学会微信小程序设计
　　Step1图文代码快速理解小程序基本原理和应用方法
　　Step2海量案例，边练边学
　　Step3综合实战，感受真实商业项目制作过程
　　平台支撑，免费赠送资源
　　1.全部案例源代码、素材、文件
　　2.全书电子教案
　　3.北风网部分配套高清精讲视频教程
　　附赠资源可登陆人邮教育社区或根据书中网盘地址下载使用。

内容简介

　　《微信小程序开发图解案例教程》分两篇，介绍了微信小程序设计的基本知识和实战案例。为微信小程序快速入门，包括认识微信小程序、微信小程序框架分析、用微信小程序组件构建UI界面、微信小程序API、微信小程序设计及问答；第二篇为综合案例应用，包括仿智行火车票12306微信小程序、仿糗事百科微信小程序、仿中国婚博会微信小程序3个综合实战案例。本书采用图、表与详细说明的示例代码相结合的叙述方式，讲解微信小程序设计的基本原理和知识，简单易懂，提供了丰富详尽的实战案例，带读者边做边学，快速掌握微信小程序的设计和实现。

作者简介

　　小刚老师，本名刘刚，参与过多个软件项目的研发、设计和管理工作，拥有项目管理师高级认证、项目监理师中级认证，出版过《原型设计大师：AxureRP网站与APP设计从入门到精通》、《AxureRP原型设计图解微课视频教程（Web+App）》书籍。在中国擎天公司、神州软件子公司任职过，在项目管理和项目实践、软件设计等方面有一定经验。曾负责过纪检监察廉政监督监管平台产品的设计与开发、国家邮政局项目的设计与开发、政务大数据项目的设计与开发等等项目。

目录

第一篇 微信小程序快速入门
第１章　认识微信小程序
1．1　微信小程序介绍 1　1
1．1．1　初识微信小程序　1
1．1．2　微信小程序的功能　2
1．1．3　微信小程序能否取代App　3
1．1．4　微信小程序的发展历程　3
1．1．5　微信小程序带来的机会　3
1．2　微信小程序开发准备　3
1．2．1　基础技术准备　3
1．2．2　开发准备　4
1．3　微信小程序开发工具的使用　5
1．3．1　创建项目　5
1．3．2　编辑　7
1．3．3　常用快捷键　9
1．3．4　调试　10
1．3．5　项目　12
1．3．6　编译　13
1．3．7　前台 后台　13
1．3．8　缓存　14
1．4　沙场大练兵：Hello World 的创建　14
1．5　小结　17
第2章　微信小程序框架分析　18
2．1　微信小程序目录结构介绍　18
2．1．1　框架全局文件　18
2．1．2　工具类文件　23
2．1．3　框架页面文件　24
2．1．4　小试牛刀：制作猫眼电影底部标签导航　24
2．2　微信小程序注册程序的应用　27
2．3　微信小程序注册页面的使用　29
2．3．1　页面初始化数据　30
2．3．2　生命周期函数　30
2．3．3　页面相关事件处理函数　30
2．3．4　页面路由管理　31
2．3．5　自定义函数　32
2．3．6　setData设值函数　32
2．4　微信小程序如何绑定数据　33
2．4．1　组件属性绑定　33
2．4．2　控制属性绑定　34
2．4．3　关键字绑定　34
2．4．4　运算　34
2．4．5　小试牛刀：天气微信
小程序　35
2．5　微信小程序条件渲染　38
2．5．1　wx：if 判断单个组件　38
2．5．2　block wx：if 判断多个
组件　39
2．6　微信小程序列表渲染　39
2．6．1　wx：for 列表渲染单个
组件　39
2．6．2　block wx：for 列表渲染多个组件　39
2．6．3　wx：key 指定唯一标识符　40
2．7　微信小程序定义模板　40
2．7．1　定义模板　40
2．7．2　使用模板　41
2．8　微信小程序的引用功能　41
2．8．1　import引用　41
2．8．2　include引用　42
2．9　沙场大练兵：仿香哈菜谱微信小程序　42
2．9．1　底部标签导航设计　43
2．9．2　宫格导航设计　45
2．9．3　香哈头条初始化数据　48
2．9．4　香哈头条列表渲染及绑定数据　50
2．9．5　香哈头条模板的引用　54
2．10　小结　56
第3章　用微信小程序组件构建UI界面　57
3．1　视图容器组件　57
3．1．1　view视图容器　57
3．1．2　scroll-view可滚动视图区域　58
3．1．3　swiper滑块视图容器　61
3．2　基础内容组件　65
3．2．1　icon图标组件　65
3．2．2　text文本组件　66
3．2．3　progress进度条组件　67
3．3　丰富的表单组件　68
3．3．1　button按钮　68
3．3．2　checkbox多项选择器　70
3．3．3　radio单项选择器　71
3．3．4　input单行输入框　72
3．3．5　textarea多行输入框　75
3．3．6　label组件　77
3．3．7　picker滚动选择器　79
3．3．8　slider滑动选择器　85
3．3．9　switch开关选择器　87
3．3．10　form表单　89
3．4　导航组件　92
3．4．1　navigator页面链接组件　92
3．4．2　wx．navigateTo保留当前页
跳转　94
3．4．3　wx．redirectTo关闭当前页
跳转　95
3．4．4　wx．switchTab跳转到
tabBar页面　96
3．4．5　wx．navigateBack返回上一页　97
3．4．6　设置导航条　98
3．5　导媒体组件　100
3．5．1　audio音频　100
3．5．2　image图片　103
3．5．3　video视频　107
3．6　地图组件　110
3．7　画布组件　114
3．8　沙场大练兵：表单登录注册微信
小程序　116
3．8．1　登录设计　117
13．8．2　手机号注册设计　123
13．8．3　企业用户注册设计　128
3．9　小结　136
第4章　必备的微信小程序API　137
4．1　请求服务器数据API　137
4．2　文件上传与下载API　140
4．2．1　wx．uploadFile文件
上传　140
4．2．2　wx．downloadFile文件下载　143
4．3　WebSocket会话API　145
4．4　图片处理API　150
4．4．1　wx．chooseImage(OBJECT)选择图片　150
4．4．2　wx．previewImage
(OBJECT)预览图片　151
4．4．3　x．getImageInfo
(OBJECT)获得图片信息152
4．5．1　wx．saveFile保存文件到
本地　153
4．5　文件操作API　153
4．5．2　wx．getSavedFileList获取本地文件列表　154
4．5．3　wx．getSavedFileInfo获取本地文件信息　156
4．5．4　wx．removeSavedFile删除本地文件　156
4．5．5　wx．openDocument打开
文档　157
4．6　数据缓存API　158
4．6．1　数据缓存到本地　158
4．6．2　获取本地缓存数据　160
4．6．3　移除和清理本地缓存数据　164
4．7　位置信息API　165
4．7．1　获得位置、选择位置、打开位置　165
4．7．2　地图组件控制　169
4．8　设备应用API　170
4．8．1　获得系统信息　171
4．8．2　获取网络状态　172
4．8．3　重力感应　172
4．8．4　罗盘　173
4．8．5　拨打电话　173
4．9　交互反馈API　174
4．8．6　扫码　174
4．9．1　消息提示框　174
4．9．2　模态弹窗　176
4．9．3　操作菜单　177
4．10　登录API　179
4．11　微信支付API　183
4．12　分享API　184
4．13　沙场大练兵： 仿豆瓣电影微信小程序　185
4．13．1　电影顶部页签切换效果　186
4．13．2　电影海报轮播效果　190
4．13．3　电影列表方式布局　192
4．13．4　电影详情页布局　197
4．13．5　项目上传与预览　206
4．14　小结　207
第5章　微信小程序设计及
问答　208
5．1　微信小程序设计　208
5．1．1　突出重点，减少
干扰项　208
5．1．2　主次动作区分明显　208
5．1．3　流程明确，避免打断　209
5．1．4　局部加载反馈　210
5．1．5　模态窗口加载反馈　210
5．1．6　弹出式操作结果　211
5．1．7　模态对话框操作结果　212
5．1．8　结果页　212
5．1．9　表单填写友好提示　212
5．2　微信小程序问答　213
5．3　小结　215
第二篇　综合案例应用
第6章　综合案例：仿智行火车票
12306微信小程序　217
6．1　需求描述　218
6．2　设计思路及相关知识点　220
6．2．1　设计思路　220
6．2．2　相关知识点　221
6．3　准备工作　221
6．4　设计流程　222
6．4．1　底部标签导航设计　222
6．4．2　海报轮播效果设计　225
6．4．3　火车票查询界面设计　227
6．4．4　火车票列表设计　239
6．4．5　个人中心界面设计　254
6．4．6　抢票界面设计　263
6．4．7　项目上传和预览　272
6．5　小结　273
第7章　综合案例：仿糗事百科
微信小程序　275
7．1　需求描述　275
7．2．1　设计思路　277
7．2．2　相关知识点　277
7．2　设计思路及相关知识点　277
7．3　准备工作　277
7．4　设计流程　278
7．4．1　顶部页签菜单滑动设计　278
7．4．2　顶部页签菜单切换效果 设计　280
7．4．3　糗事列表页设计　282
7．4．4　视频列表页设计　292
7．4．5　分享设计　295
7．4．6　项目预览　297
7．5　小结　298
第8章　综合案例：仿中国婚博会
微信小程序　299
8．1　需求描述　300
8．2　设计思路及相关知识点　302
8．2．1　设计思路　302
8．2．2　相关知识点　303
8．3　准备工作　303
8．4　设计流程　305
8．4．1　底部标签导航设计　305
8．4．2　海报轮播效果设计　308
8．4．3　宫格导航设计　310
8．4．4　全部分类导航设计　314
8．4．5　现金券下拉菜单筛选条件设计　323
8．4．6　现金券列表页设计　326
8．4．7　婚博会索票界面设计　333
8．4．8　获知渠道弹出层设计　338
8．5　小结　345

告别枯燥，掌握实战！微信小程序开发从此易如反掌 你是否曾被复杂的编程语言和抽象的概念弄得头昏脑涨，望小程序开发而却步？你是否渴望拥有一款属于自己的小程序，却苦于找不到清晰易懂的学习路径？你是否在浩瀚的技术文档和零散的教程中迷失方向，不知从何下手？ 现在，是时候告别迷茫，拥抱变化，踏上轻松掌握微信小程序开发的旅程了！本书，并非一本让你啃读厚重理论、死记硬背代码的枯燥教材，而是一份为你量身打造的“图解实战指南”，一份带你从零开始，一步一个脚印，将想法变为现实的“魔法地图”。我们深知，学习的最好方式是“看得见，摸得着”，是将抽象的概念具象化，是将复杂的流程条理化。因此，本书的核心理念便是——“图解”与“实战”。 为什么选择“图解”？ 想象一下，当你面对一行行晦涩的代码时，它们如同冰冷的机器指令，难以理解其内在逻辑。而当这些代码被转化为一张张生动的流程图、结构图、界面原型图，它们瞬间便变得鲜活起来。我们运用大量的、精良的、与实际开发步骤高度契合的图形化元素，将小程序开发的每一个核心概念、每一个关键流程、每一个技术细节，都以最直观、最易于理解的方式呈现出来。 核心概念的直观解析： 从微信小程序的架构设计，到前端与后端的交互原理，再到数据在小程序中的流转过程，每一个抽象的概念，我们都用精心设计的示意图来阐释，让你一眼看穿其本质。不再需要费力地在文字中寻找蛛丝马迹，图示的冲击力将帮助你快速建立起对小程序世界的整体认知。 开发流程的清晰描绘： 从项目初始化、界面布局、事件处理，到数据请求、状态管理，再到组件的使用、API的调用，每一个开发步骤，我们都用流程图和截图相结合的方式，详细地为你梳理清楚。让你清楚地知道“下一步该做什么”，避免在开发过程中走弯路。 复杂功能的分解说明： 诸如用户授权、支付接口、网络请求、本地存储等看似复杂的功能，我们都会将其分解成若干个简单易懂的小模块，并配以相应的图示，让你清晰地掌握实现这些功能的具体步骤和关键代码。 典型场景的视觉呈现： 我们不会仅仅停留在理论层面，而是会通过展示真实小程序中常见的功能模块，如商品列表、详情页、购物车、订单管理、用户中心等，并辅以界面截图和操作演示图，让你看到所学知识如何在实际应用中发挥作用，激发你的学习兴趣和创造力。 为什么强调“实战”？ 理论知识再丰富，如果没有实际操作的支撑，终究是空中楼阁。本书的最大亮点在于，它始终将你的学习目标锁定在“开发出真正可用的、有价值的小程序”。我们不会让你沉溺于概念的海洋，而是会引导你快速动手，将所学转化为实践。 从零开始的循序渐进： 无论你是完全没有编程基础的“小白”，还是已经掌握了一些编程知识但对小程序陌生的“开发者”，本书都能带你顺利入门。我们从最基础的环境搭建、项目创建讲起，逐步深入，让你在实践中掌握每一个关键技能。 精选典型案例： 我们精选了当下微信小程序开发中最具代表性、最实用、最贴合实际业务需求的案例。这些案例涵盖了电商、社交、工具、生活服务等多个领域，让你能够学习到不同类型小程序的开发思路和实现方法。例如，你将学会如何开发一个功能完善的在线商城，如何搭建一个便捷的预约服务平台，如何构建一个信息分享社区等等。 代码与图解的完美结合： 在案例讲解中，我们不仅仅提供清晰的代码示例，更会结合前面提到的图解，详细解释每一段代码的作用，以及它如何与界面、逻辑、数据进行交互。让你不仅“知其然”，更“知其所以然”。 完整的项目演练： 每个案例都将是一个完整的项目演练，从需求分析、原型设计（以图解辅助），到功能实现、数据对接，再到最后的发布上线（指导），让你亲身体验小程序开发的完整生命周期。你将不仅仅是学习某个小功能，而是掌握如何将一个想法，一步步打磨成一个可运行的小程序。 即学即用，成就感爆棚： 通过一个个实际案例的完成，你将不断获得学习的成就感，从而激发更强的学习动力。你将惊喜地发现，原来开发一款小程序并没有想象中那么困难，原来你也可以拥有属于自己的、独一无二的微信小程序！ 本书能为你带来什么？ 扎实的基础知识： 彻底理解微信小程序的核心架构、运行机制、开发语言（WXML, WXSS, JavaScript）以及常用的API。 强大的实战能力： 掌握从零开始开发一个完整、功能丰富的小程序的全过程，能够独立解决开发中遇到的各种问题。 丰富的项目经验： 通过学习和实践多个典型案例，积累宝贵的项目开发经验，为未来的小程序开发之路奠定坚实基础。 敏锐的业务洞察： 学习如何将实际业务需求转化为小程序功能，培养用技术解决实际问题的能力。 无限的创新可能： 掌握小程序开发的通用技术和方法，为你的创意和想法插上翅膀，实现更多个性化、创新性的应用。 谁适合阅读本书？ 有志于成为小程序开发者的初学者： 无论你是否有编程基础，本书都将是带领你入门的最佳选择。 想要提升小程序开发技能的在职开发者： 本书的实战案例和进阶技巧，将帮助你快速扩展知识广度和深度。 希望将业务需求转化为小程序实现的创业者、产品经理： 本书将帮助你快速掌握小程序开发的技术要领，高效地与开发团队沟通，或亲自实现产品原型。 对微信小程序开发感兴趣的学生： 本书将为你提供一个系统、有趣的学习平台，为你的职业生涯打下坚实的技术基础。 开启你的小程序开发之旅，让我们用图解的方式，一步一个脚印，共同打造属于你的精彩！

评分☆☆☆☆☆

这本书真的让我眼前一亮！我一直想学习微信小程序开发，但市面上很多教程要么太理论化，要么代码写得晦涩难懂，看得我云里雾里的。这本《微信小程序开发图解案例教程》简直是我的救星。首先，它“图解”二字名副其实，每一章节都配有大量的、清晰的截图和流程图，把复杂的概念一步一步拆解开来，让你能直观地理解每一步操作的意义。比如，讲到页面布局时，它不是简单地给你一堆CSS代码，而是通过图示的方式，展示了Flexbox和Grid布局是如何工作的，各个属性又会产生什么视觉效果。这种“看得懂”的学习方式，极大地降低了入门门槛，让我这种零基础的读者也能快速上手。而且，它不是那种“看完就忘”的教程，书中的案例都非常实用，涵盖了从基础的“扫码点餐”到稍复杂的“社区团购”等，这些都是我们日常生活中经常接触到的应用，学起来更有成就感。书后附带的精讲视频更是锦上添花，视频里老师讲解得非常细致，还会穿插一些开发中的小技巧和注意事项，这对于我这种喜欢边看边练的人来说，简直是福音。我感觉自己不再是孤军奋战，而是有一个经验丰富的老师在旁边指导。

评分☆☆☆☆☆

这本书最大的特点在于其“实战性”和“易理解性”的完美结合。我之前也看过一些小程序开发的书籍，但往往要么过于理论化，要么案例不够贴近实际。《微信小程序开发图解案例教程》完全避免了这些问题。它从一个又一个精心设计的案例入手，从浅入深地讲解小程序开发的各项技术。我特别欣赏书中对组件化开发的讲解，它将复杂的界面拆分成一个个小的、可复用的组件，并详细讲解了组件的创建、通信以及生命周期，这让我对小程序中的组件化思想有了更深刻的理解。而且，书中的案例都紧密结合了微信小程序的原生能力，比如如何调用微信支付、如何获取用户信息等，这些都是在实际开发中不可或缺的。最重要的是，书后的精讲视频，为我提供了极大的便利。视频中的老师讲解得非常到位，他不仅解释了代码的含义，还会分享一些自己多年的开发经验，比如如何提高代码的可读性、如何避免常见的坑等等。通过视频，我能够更直观地看到代码的执行过程，以及一些细微的操作细节，这大大提升了我的学习效率。这本书让我感觉自己不再是独自摸索，而是在一位经验丰富的导师的带领下，稳步前进。

评分☆☆☆☆☆

说实话，我一开始抱着试试看的心态买了这本书，因为市面上的小程序开发书籍实在太多了，很难找到一本真正适合自己的。但拿到手之后，我发现它的内容组织得非常有条理，完全符合初学者的学习路径。它没有上来就讲很深奥的概念，而是从最基础的环境搭建、项目创建开始，一步一步引导。我特别欣赏书中对于页面生命周期、组件通信等核心知识点的讲解，它们不是简单地堆砌定义，而是通过形象的比喻和具体的代码示例，让这些抽象的概念变得易于理解。比如，它在讲到组件通信时，用了“父子对话”和“兄弟交流”的比喻，非常生动。而且，书中提到的很多小技巧，比如如何快速预览、如何调试代码，对于提高开发效率非常有帮助。我之前尝试过一些在线教程，但往往内容碎片化，而且更新速度慢。《微信小程序开发图解案例教程》给我一种系统性的学习体验，让我能够建立起一个完整的小程序开发知识体系。书后的视频讲解也起到了很好的补充作用，老师在视频中会演示一些在书中文字描述中难以完全展现的操作细节，让我感觉学习过程更加顺畅。

评分☆☆☆☆☆

我之前对小程序开发一直处于“想学但不知从何下手”的状态，看了很多零散的资料，感觉像是大海捞针。这本书就像一盏明灯，为我指明了方向。它的优点在于，将枯燥的技术知识，通过丰富的图文和实际案例，变得生动有趣。我尤其喜欢书中对于UI设计和交互逻辑的讲解，它不是只讲代码，而是会结合实际的用户体验，告诉你如何设计出更符合用户习惯的界面，如何处理用户操作带来的各种反馈。比如，在购物车案例中，它详细讲解了如何实现数量增减、商品移除等功能，并且考虑到了各种边界情况的处理，这对于初学者来说非常有价值。而且，这本书并没有止步于基础知识，它还涉及了一些进阶的知识点，比如数据缓存、网络请求优化等，这些都是在实际开发中非常常用的技术。书后附带的视频讲解，更是让学习事半功倍，视频中的老师能够直观地展示代码的编写过程，以及一些隐藏的开发技巧，这对于我这种视觉型学习者来说，简直是太友好了。这本书让我感觉学习小程序开发不再是一件困难的事情，而是充满乐趣和成就感的过程。

评分☆☆☆☆☆

这本书给我最大的惊喜在于它的“案例驱动”教学模式。它不是那种一本正经地罗列技术点，而是围绕着一个个真实可用的项目来展开。从一开始的“Hello World”，到后面的“商品列表展示”、“购物车逻辑”、“订单管理”等等，每一个功能模块都被拆解得非常细致，让你能够跟着书中的步骤，一步一步地构建出一个完整的小程序。我特别喜欢书中对于数据绑定和事件处理的讲解，它通过生动的案例，比如点击按钮弹出提示框，或者用户输入信息实时更新到页面上，让你深刻理解这些核心概念。而且，它不仅仅告诉你怎么做，还会告诉你“为什么”要这么做，比如为什么选择这种数据请求方式，为什么这样设计页面结构，这些背后的考量，对于提升开发者的思维能力非常有帮助。我之前在学习其他技术时，常常会遇到“知其然不知其所以然”的困境，但这本书成功地避免了这个问题。书中的代码片段也都经过精心挑选，既简洁又具有代表性，不会让你被冗余的代码所迷惑。而且，它还鼓励读者自己去修改和扩展案例，这对于培养独立解决问题的能力至关重要。

评分☆☆☆☆☆

很好，非常好！

评分☆☆☆☆☆

感觉很不错，刚看了一些，希望自己能够多学点

评分☆☆☆☆☆

挺好的，讲得很详细

评分☆☆☆☆☆

微信公众平台介绍　2

评分☆☆☆☆☆

还可以还可以还可以还可以

评分☆☆☆☆☆

很好，学习使用中

评分☆☆☆☆☆

京东自营的东西值得信赖，送货快

评分☆☆☆☆☆

挺好，入门书够用

评分☆☆☆☆☆

书的质量很好，双十一活动也很便宜，入手学习一下