本书提供了微信小程序开发必备的100 个Tip 和一个完整的电商案例京东购物微信小程序，100 个Tip分为四类：关于微信小程序的框架及工具16 个Tip、关于微信小程序丰富的组件24 个Tip、关于微信小程序必备API 技能50 个Tip、关于微信小程序高级交互设计10 个Tip，每一个Tip 都会有详细的介绍和相关的示例，方便开发人员快速学习这些Tip，同时也可以作为工具书指南进行查询，应用到哪个知识点可以到这里快速的查询进行使用。京东购物微信小程序是综合应用这些Tip，将这些Tip 综合应用到实际项目开发过程中。通过学习100 个Tip 和项目案例，让读者全面、深入、透彻地理解微信小程序开发，提高微信小程序开发能力和项目实战能力。

前 言 为什么要写这本书？ 微信小程序从正式发布后越来越受很多软件公司和开发人员的使用，目前图书市场上 关于微信小程序的书籍还很匮乏，真正能把微信小程序开发必备技能提炼出来的少之又少， 本书提供了微信小程序开发必备的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

第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

刘刚 曾就职于中国擎天软件科技集团有限公司，现就职于航天科技有限公司，专心致力于软件项目研发、设计和管理，有丰富项目研发、设计和管理经验丰富；负责纪检监察廉政监督监管平台、国家邮政局项目、政务大数据项目、中施企协项目等的设计开发和项目管理工作；同时在教育教学方面有丰富的授课经验，教授Axure、用户体验、软件重构、项目经理等等方面的课程。