产品特色
内容简介
本书提供了微信小程序开发必备的100 个Tip 和一个完整的电商案例京东购物微信小程序,100 个Tip分为四类:关于微信小程序的框架及工具16 个Tip、关于微信小程序丰富的组件24 个Tip、关于微信小程序必备API 技能50 个Tip、关于微信小程序高级交互设计10 个Tip,每一个Tip 都会有详细的介绍和相关的示例,方便开发人员快速学习这些Tip,同时也可以作为工具书指南进行查询,应用到哪个知识点可以到这里快速的查询进行使用。京东购物微信小程序是综合应用这些Tip,将这些Tip 综合应用到实际项目开发过程中。通过学习100 个Tip 和项目案例,让读者全面、深入、透彻地理解微信小程序开发,提高微信小程序开发能力和项目实战能力。
作者简介
刘刚 曾就职于中国擎天软件科技集团有限公司,现就职于航天四创科技有限公司,专心致力于软件项目研发、设计和管理,有丰富项目研发、设计和管理经验丰富;负责纪检监察廉政监督监管平台、国家邮政局项目、政务大数据项目、中施企协项目等的设计开发和项目管理工作;同时在教育教学方面有丰富的授课经验,教授Axure、用户体验、软件重构、项目经理等等方面的课程。
目录
第1 章 微信小程序的框架及工具 .................................................................................. 1
1.1 app.json 配置 .......................................................................................................... 1
1.1.1 决定页面文件路径 .................................................................................... 2
1.1.2 配置窗口表现 ............................................................................................ 3
1.1.3 配置tab 标签导航 ..................................................................................... 5
1.1.4 设置网络超时时间 .................................................................................... 8
1.1.5 配置debug 模式 ........................................................................................ 9
1.2 App()函数使用 ..................................................................................................... 10
1.3 Page()函数使用 .................................................................................................... 12
1.3.1 初始化数据 .............................................................................................. 13
1.3.2 生命周期函数 .......................................................................................... 13
1.3.3 相关事件函数 .......................................................................................... 14
1.4 数据绑定 .............................................................................................................. 14
1.5 wx:if 条件判断 ..................................................................................................... 15
1.6 wx:for 列表渲染 ................................................................................................... 16
1.7 定义和使用模板 .................................................................................................. 17
1.8 import 引用模板 ................................................................................................... 18
1.9 include 引用文件 .................................................................................................. 19
1.10 Console 面板 ...................................................................................................... 20
1.11 Sources 面板 ....................................................................................................... 21
1.12 Network 面板 ..................................................................................................... 22
1.13 Storage 面板 ....................................................................................................... 24
1.14 Appdata 面板 ...................................................................................................... 24
目 录 VII
1.15 Wxml 面板 ......................................................................................................... 26
1.16 Sensor 面板 ........................................................................................................ 27
第2 章 微信小程序丰富的组件 .................................................................................... 28
2.1 view 视图容器组件 .............................................................................................. 28
2.2 scroll-view 可滚动视图容器组件 ....................................................................... 31
2.3 swiper 滑块视图容器组件 ................................................................................... 34
2.3.1 海报轮播效果 .......................................................................................... 35
2.3.2 页签切换效果 .......................................................................................... 36
2.4 movable-view 可移动的视图容器组件 ............................................................... 40
2.5 icon 图标组件 ...................................................................................................... 42
2.6 text 文本组件 ....................................................................................................... 44
2.7 progress 进度条组件 ............................................................................................ 45
2.8 button 按钮组件 ................................................................................................... 46
2.9 checkbox 多项选择器组件 .................................................................................. 48
2.10 radio 单项选择器组件 ....................................................................................... 57
2.11 input 单行输入框组件 ....................................................................................... 59
2.12 textarea 多行输入框组件 ................................................................................... 61
2.13 label 改进表单组件 ............................................................................................ 63
2.14 picker 选择器组件 ............................................................................................. 70
2.14.1 picker 普通选择器组件 ......................................................................... 71
2.14.2 picker 时间选择器组件 ......................................................................... 73
2.14.3 picker 日期选择器组件 ......................................................................... 74
2.15 picker-view 嵌入页面的滚动选择器 ................................................................ 76
2.16 slider 滑动选择器组件....................................................................................... 78
2.17 switch 开关选择器组件 ..................................................................................... 80
2.18 form 表单组件 .................................................................................................... 85
2.19 navigator 页面链接导航组件 ............................................................................ 92
2.20 audio 音频组件 .................................................................................................. 95
2.21 image 图片组件 ................................................................................................ 102
2.22 video 视频组件 ................................................................................................ 104
2.23 map 地图组件 .................................................................................................. 106
2.24 canvas 画布组件 .............................................................................................. 112
VIII 微信小程序开发必备100 Tip
第3 章 微信小程序必备API 技能 ............................................................................... 118
3.1 wx.request 发起网络请求 .................................................................................. 118
3.2 wx.uploadFile 上传文件 .................................................................................... 122
3.3 wx.downloadFile 下载文件 ................................................................................ 123
3.4 WebSocket 会话连接 ......................................................................................... 125
3.5 wx.chooseImage 选择图片 ................................................................................ 133
3.6 wx.previewImage 预览图片 ............................................................................... 134
3.7 wx.getImageInfo 获取图片信息 ........................................................................ 135
3.8 wx.saveImageToPhotosAlbum 保存图片到相册 .............................................. 136
3.9 wx.startRecord 开始录音和wx.stopRecord 结束录音 ..................................... 138
3.10 voice 音频播放控制 ......................................................................................... 139
3.11 wx.createAudioContext 音频组件控制 ........................................................... 140
3.12 wx.playBackgroundAudio 播放音乐 ............................................................... 141
3.13 wx.seekBackgroundAudio(OBJECT)控制音乐播放进度 ................................. 143
3.14 wx.getBackgroundAudioPlayerState 获取音乐播放状态 ............................... 143
3.15 wx.createVideoContext(videoId)视频组件控制 .............................................. 145
3.16 wx.chooseVideo(OBJECT)选择视频 .............................................................. 146
3.17 wx.saveVideoToPhotosAlbum 保存视频到相册 ............................................ 147
3.18 wx.saveFile 保存文件 ..................................................................................... 148
3.19 wx.getSavedFileList 获取本地文件列表 ......................................................... 149
3.20 wx. getSavedFileInfo 获取本地文件信息 ....................................................... 151
3.21 wx. removeSavedFile 删除本地文件 ............................................................... 153
3.22 wx. openDocument 打开文档 .......................................................................... 154
3.23 wx.setStorage 和wx.setStorageSync 本地数据缓存 ....................................... 155
3.24 wx.getStorage 和wx.getStorageSync 获取本地数据缓存 .............................. 157
3.25 wx.getStorageInfo 和wx.getStorageInfoSync 获取缓存信息 ........................ 159
3.26 清理本地缓存数据 .......................................................................................... 161
3.27 wx.getLocation 获取位置 ................................................................................ 162
3.28 wx. chooseLocation 选择位置 ......................................................................... 167
3.29 wx.openLocation 打开内置地图 ...................................................................... 168
3.30 获取设备系统信息 .......................................................................................... 169
3.31 获取网络状态 .................................................................................................. 172
3.32 wx.onAccelerometerChange 加速度计 ............................................................ 172
目 录 IX
3.33 wx.onCompassChange 监听罗盘数据 ............................................................. 173
3.34 wx.makePhoneCall 拨打电话和wx.scanCode 扫码 ....................................... 173
3.35 剪贴板和屏幕亮度 .......................................................................................... 175
3.36 wx.addPhoneContact 添加联系人 ................................................................... 176
3.37 wx.showToast 和wx.showLoading 显示提示框 ............................................. 178
3.38 wx.showModal 显示模态弹窗 ......................................................................... 180
3.39 wx.showActionSheet 显示操作菜单 ............................................................... 182
3.40 设置导航条 ...................................................................................................... 183
3.41 wx.createAnimation 创建动画 ......................................................................... 184
3.42 获取第三方平台数据 ...................................................................................... 190
3.43 wx.login 登录 ................................................................................................... 191
3.44 wx.authorize 授权 ............................................................................................. 193
3.45 wx.getUserInfo 用户信息 ................................................................................ 195
3.46 wwx.requestPayment 微信支付 ....................................................................... 197
3.47 模板消息 .......................................................................................................... 199
3.48 转发信息 .......................................................................................................... 202
3.49 wx.chooseAddress 收货地址 ........................................................................... 203
3.50 卡券 .................................................................................................................. 204
第4 章 微信小程序高级交互设计 .............................................................................. 207
4.1 猫眼电影:海报轮播效果设计 ........................................................................ 207
4.2 许鲜全国送:页签切换效果设计 .................................................................... 210
4.3 新闻频道:水平滑动效果设计 ........................................................................ 215
4.4 京东到家:手风琴导航切换效果设计 ............................................................. 219
4.5 链家:列表式导航设计 .................................................................................... 223
4.6 支付宝:九宫格导航设计 ................................................................................ 230
4.7 58 同城:区域条件检索设计 ........................................................................... 237
4.8 12306 火车票:底部固定效果设计.................................................................. 242
4.9 当当购物:图文列表设计 ................................................................................ 245
4.10 中信信用卡申请:向导型表单设计 ............................................................... 255
第5 章 综合案例:京东购物小程序 ........................................................................... 278
5.1 需求描述 ............................................................................................................ 279
X 微信小程序开发必备100 Tip
5.2 相关知识点 ........................................................................................................ 285
5.3 商品数据准备 .................................................................................................... 286
5.4 首页设计 ............................................................................................................ 290
5.5 商品详情页设计 ................................................................................................ 305
5.6 立即购买页面 .................................................................................................... 320
5.7 商品搜索设计 .................................................................................................... 329
5.8 显示购物车商品设计 ........................................................................................ 339
5.9 我的订单页面设计 ............................................................................................ 350
5.10 优惠券设计 ...................................................................................................... 356
5.11 小结 .................................................................................................................. 366
前言/序言
前 言
为什么要写这本书?
微信小程序从正式发布后越来越受很多软件公司和开发人员的使用,目前图书市场上关于微信小程序的书籍还很匮乏,真正能把微信小程序开发必备技能提炼出来的少之又少,本书提供了微信小程序开发必备的100 个Tip 和一个完整的电商案例——京东购物微信小程序。
100 个Tip 分为四类:
? 关于微信小程序的框架及工具16 个Tip;
? 关于微信小程序丰富的组件24 个Tip
? 关于微信小程序必备API 技能50 个Tip;
? 关于微信小程序高级交互设计10 个Tip。
每一个Tip 都有详细的介绍和相关的示例,方便开发人员快速学习这些Tip,同时也可以作为工具书指南进行查询,应用到哪个知识点可以到这里快速查询并使用。京东购物微信小程序是将这些Tip 综合应用到实际项目开发过程中。通过学习100 个Tip 和项目案例,让读者全面、深入、透彻地理解微信小程序开发,提高微信小程序开发能力和项目实战能力。
本书有何特色?
1. 图文结合方式,逐步讲解
为了便于读者理解本书内容,提高学习效率,作者通过文字讲解及图表演示,逐步操作,避免枯燥乏味。
2. 提炼知识点、方便快速学习
本书针对微信小程序的框架和工具、组件、API、交互效果共提炼出100 个常用开发Tip,每个Tip 都有详细的示例或者实际应用的场景,方便读者快速学习和查阅使用。
3. 由浅入深、理论与实战相结合
本书先讲解100 个常用开发Tip,从框架和工具的使用到组件的使用,然后是常用API,再后是高级交互效果,最后使用一个完整案例贯穿知识点,由浅入深,一步步掌握微信小程序的开发。
4. 实战驱动,应用性强
本书每个开发Tip 都有详细的示例或者实际应用场景,读者可根据示例快速进行知识点的学习和使用,通过知识点在实际场景的应用,指引读者在项目实战过程中如何应用这些Tip。
5. 项目案例典型,实战性强,有较高的应用价值
本书提供了有代表性的高级交互效果和完整的典型案例。读者在实际项目开发过程中,可参考这些案例,缩短开发时间。
6. 提供完善的技术支持和售后服务
本书提供了专门的技术支持邮箱:yuan_kevin_525@126.com,读者在阅读本书过程中如有任何疑问都可以通过该邮箱获得帮助。
本书内容及知识体系
第1 章 微信小程序的框架及工具
本章介绍了微信小程序的框架及工具使用Tip 15 个,详细讲解了微信小程序框架和工具的使用,是小程序入门必备的知识点。
第2 章 微信小程序的丰富的组件
本章介绍了微信小程序组件的使用Tip 26 个,详细介绍了每个组件的使用以及实际项目应用场景,是小程序界面开发必备的知识点。
第3 章 微信小程序必备API 技能
本章介绍了微信小程序API 使用Tip 49 个,详细介绍微信小程序常用API 的使用,是小程序进行界面与后台逻辑处理开发必备的知识点。
第4 章 微信小程序高级交互设计
本章介绍了微信小程序高级交互设计Tip 10 个,介绍了10 类高级交互效果,是小程序交互设计必备的知识点。
第5 章 京东购物微信小程序案例
本章详细讲解了微信小程序的一个典型案例,通过对案例的学习,读者可掌握各个知识点的应用以及实际项目的开发过程和设计思路。
适合阅读本书的读者
? 微信开发者
? 前端开发工程师
? 学生
? 网站站长、待业青年
阅读本书的建议
? 本书可以作为工具书使用,查询各个知识点、交互效果的使用。
? 没有基础的读者,可以按照章节顺序进行学习,由浅入深,逐个突破。
? 有一定基础的读者,可以根据实际情况有重点地选择阅读各个模块和项目案例。
? 对于每一个模块和项目案例,先自己思考一下实现的思路,然后再阅读,学习效果会更好。
轻松注册成为博文视点社区用户(www.broadview.com.cn),扫码直达本书页面。
? 提交勘误:您对书中内容的修改意见可在 提交勘误 处提交,若被采纳,将获赠博文视点社区积分(在您购买电子书时,积分可用来抵扣相应金额)。
? 交流互动:在页面下方 读者评论 处留下您的疑问或观点,与我们和其他读者一同学习交流。
页面入口:http://www.broadview.com.cn/32691
《精通React:从入门到精通的实践指南》 本书简介 在飞速发展的现代Web开发领域,React以其声明式、组件化的强大特性,迅速成为构建交互式用户界面的首选框架。它不仅仅是一个库,更是一种全新的思维方式,能够帮助开发者高效地构建复杂、可维护且可扩展的应用。本书《精通React:从入门到精通的实践指南》旨在为想要深入理解React核心原理、掌握其高级特性并将其应用于实际项目开发的读者提供一份全面且深入的学习路线图。 我们深知,对于初学者而言,React的概念可能显得有些抽象;对于有一定基础的开发者,如何进一步提升技能、解决实际开发中的疑难杂症,也是一个持续的挑战。因此,本书从最基础的概念讲起,循序渐进地引导读者掌握React的精髓,并逐步深入到更高级的开发模式和最佳实践。我们不只是讲解“是什么”,更侧重于“为什么”以及“如何做”,确保读者不仅知其然,更知其所以然。 核心概念与基础构建 本书的开篇将系统性地介绍React的核心概念,如JSX的强大表达能力、组件化的设计理念、Props的单向数据流以及State在组件内部状态管理中的作用。我们将详细阐述函数组件和类组件的区别与联系,并通过大量实际示例演示如何创建、组合和复用组件,帮助读者建立起坚实的React基础。 JSX深度解析: 我们将深入剖析JSX的语法糖本质,解释它如何被编译成JavaScript,以及如何在JSX中优雅地嵌入JavaScript表达式、处理事件、渲染列表和条件性地渲染元素。您将了解到JSX的灵活性,以及如何在不同场景下充分利用它来提升开发效率。 组件化思维: 组件是React的基石。本书将重点讲解如何设计高内聚、低耦合的组件,如何通过props进行组件间的数据传递,以及如何利用context API实现跨层级数据共享,避免props drilling带来的痛点。我们将展示各种组件模式,例如容器组件与展示组件的划分,以及如何构建可复用的UI库。 State管理: 掌握组件内部状态的管理是构建动态应用的关键。本书将详细讲解useState、useReducer等Hooks,演示它们在处理异步操作、复杂状态逻辑等场景下的应用。对于需要更高级状态管理需求的场景,我们将引入Redux、Zustand等流行的状态管理库,并深入解析它们的原理和使用方法。 Hooks的强大力量 Hooks的出现极大地简化了React的开发,并让函数组件获得了与类组件媲美的能力。本书将花费大量篇幅深入讲解React Hooks,从基础的useState、useEffect、useContext,到进阶的useReducer、useCallback、useMemo,再到自定义Hooks的设计和应用。 Hooks的规则与最佳实践: 我们将清晰地阐述Hooks的两个主要规则(只在顶层调用Hooks,只在React函数组件或自定义Hooks中调用Hooks),并解释这些规则背后的原因。同时,我们还将提供关于如何避免常见Hooks陷阱的实用建议,例如如何正确处理useEffect的依赖项,以及如何通过useCallback和useMemo来优化组件性能。 自定义Hooks: 学习如何编写自己的自定义Hooks是提升代码复用性和抽象能力的绝佳方式。本书将通过多个实际案例,展示如何将组件中的逻辑提取为自定义Hooks,例如网络请求 Hooks、表单处理 Hooks、本地存储 Hooks 等,帮助读者构建更简洁、更易于测试的代码。 React Router与路由管理: 在构建单页应用(SPA)时,路由管理至关重要。本书将详细讲解React Router库,包括声明式路由、嵌套路由、动态路由、路由守卫以及代码分割与懒加载等高级特性,确保读者能够构建出功能完善、用户体验良好的SPA。 性能优化与高级主题 随着应用规模的增长,性能优化成为一个不可忽视的环节。本书将深入探讨React的性能优化策略,帮助读者构建出流畅、响应迅速的应用。 性能瓶颈分析与解决方案: 我们将介绍如何使用React DevTools等工具来识别组件渲染性能瓶颈,例如不必要的重渲染、过多的DOM操作等。随后,将讲解Memoization(`React.memo`)、`useCallback`、`useMemo`等技术,以及如何合理地使用它们来避免不必要的组件更新。 代码分割与懒加载: 对于大型应用,代码分割和懒加载是提升首屏加载速度的有效手段。本书将讲解如何在React中实现代码分割,例如使用`React.lazy`和`Suspense`,以及通过Webpack等打包工具进行配置,从而优化应用的加载性能。 状态管理进阶: 除了Redux,本书还将探讨其他主流的状态管理方案,如Zustand、Jotai、Recoil等,并分析它们在不同场景下的适用性。我们将深入讲解不同状态管理库的设计理念和使用技巧,帮助读者选择最适合自己项目的方案。 React Hooks的深入探索: 除了常见的Hooks,本书还将触及一些更高级或不那么常用的Hooks,例如`useDeferredValue`、`useTransition`等,并阐述它们在处理高优先级和低优先级更新时的作用。 服务端渲染(SSR)与静态站点生成(SSG) 在现代Web开发中,服务端渲染(SSR)和静态站点生成(SSG)越来越受到重视,它们能够显著提升应用的SEO表现和首屏加载速度。 Next.js的强大能力: 本书将重点介绍基于React的强大框架Next.js。我们将详细讲解Next.js在SSR、SSG、API路由、文件系统路由以及图片优化等方面的核心特性。通过Next.js,读者可以轻松地构建出高性能、SEO友好的React应用。 SSR与SSG的原理与应用: 我们将深入解析SSR和SSG的原理,包括它们如何将React组件在服务器端渲染成HTML,以及如何进行客户端hydration。通过实际案例,您将学会如何在Next.js中配置SSR和SSG,并根据项目需求做出合理选择。 数据获取策略: 在SSR/SSG应用中,数据获取方式与客户端渲染有所不同。本书将讲解`getServerSideProps`、`getStaticProps`等Next.js提供的函数,以及如何在它们中进行数据预取,并确保数据在客户端能够正确地被整合。 测试、部署与生态系统 一个完善的开发流程离不开测试和有效的部署策略。本书的最后部分将涵盖这些重要环节。 React应用测试: 我们将介绍React应用中常用的测试工具,如Jest和React Testing Library。通过大量示例,读者将学会如何编写单元测试、集成测试,以及如何测试组件的交互逻辑和渲染输出。 现代前端构建工具: 了解和掌握现代前端构建工具是React开发不可或缺的一部分。本书将介绍Webpack、Vite等打包工具的基本配置和常用插件,帮助读者理解应用打包、代码优化和资源管理的原理。 部署与CI/CD: 学习如何将React应用部署到不同的平台,例如Vercel、Netlify、AWS等。同时,我们将简要介绍持续集成/持续部署(CI/CD)的概念,帮助读者建立起高效的自动化部署流程。 React生态系统概览: 除了React本身,还有许多优秀的第三方库和工具构成了React的丰富生态。本书将简要介绍一些流行的UI组件库(如Ant Design、Material-UI)、动画库、图表库等,帮助读者根据项目需求选择合适的工具。 本书特色 理论与实践并重: 本书不仅会讲解React的理论知识,更会通过大量的实际代码示例、项目演练来巩固和加深读者的理解。 循序渐进的知识体系: 从基础概念到高级主题,本书的知识点安排合理,层层递进,适合不同层次的读者。 面向真实开发场景: 本书中的示例和讲解都紧密结合了实际开发中的常见问题和需求,帮助读者解决工作中遇到的挑战。 前沿技术的覆盖: 本书不仅涵盖了React的核心技术,还深入介绍了Next.js等现代React开发框架,以及SSR/SSG等前沿技术。 清晰易懂的语言风格: 本书力求用清晰、简洁的语言来解释复杂的概念,避免使用过于晦涩的术语。 无论您是初次接触React的新手,还是希望在React开发领域更进一步的开发者,《精通React:从入门到精通的实践指南》都将是您宝贵的学习伴侣。通过本书的学习,您将能够自信地构建出高性能、可维护且富有创意的React应用,并在竞争激烈的前端开发领域脱颖而出。 目标读者 希望系统学习React的初学者。 有一定React基础,但希望深入理解其原理和掌握高级开发的工程师。 需要构建复杂、高性能Web应用的团队开发者。 对前端技术发展趋势感兴趣,并希望学习SSR/SSG等前沿技术的开发者。 踏上您的React精通之旅,从这本书开始!