第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
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
第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
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
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