第1章 微信小程序简介 1
1.1什么是微信小程序 2
1.2什么类型的应用适合用小程序开发 5
1.3小程序与原生App (iOS、 Android)的优劣对比 6
1.4小程序会淘汰原生App吗 10
1.5 Web前端的未来 10
1.6 Web前端开发者与小程序 11
1.7 MINA框架与微信小程序 12
1.8微信小程序beta测试版 12
第2章 小程序环境搭建与开发工具介绍 13
2.1微信Web开发者工具下载及安装 14
2.2新建第一个项目 14
2.3微信Web开发者工具界面功能介绍 16
2.3.1编辑选项卡 17
2.3.2调试选项卡 19
2.3.3项目选项卡 22
2.3.4编译选项 23
2.3.5后台选项 24
2.3.6缓存选项 24
2.3.7关闭选项 24
2.3.8快速打开官方API文档 24
2.3.9开发工具的更新 24
2.3.10常用小程序快捷键 25
第3章 从第一个简单的“Welcome”页面开始小程序之旅 26
3.1认识小程序的基本文件结构 27
3.2开始动手编写第一个小程序页面 28
3.3构建welcome页面的元素和样式 31
3.4小程序所支持的CSS选择器 35
3.5 Flex布局 36
3.6小程序自适应单位rpx简介 39
3.7全局样式文件app.wxss 42
3.8页面的根元素page 42
3.9 app.json中的window 配置项 44
第4章 文章列表页面 47
4.1文章列表页面元素分析及准备工作 48
4.2 swiper组件 50
4 3 Boolean值的陷阱 53
4.4构建文章列表的骨架和样式 54
4.5 image组件的4种缩放模式与9种裁剪模式 57
4.5.1 scaleToFill 58
4.5.2 aspectFit 58
4.5.3 aspectFill 59
4.5.4 widthFix 60
4.5.5 9种裁剪模式 60
4.6完成静态文章列表 61
4.7 -js文件的代码结构与Page页面的生命周期 64
4.8数据绑定 68
4.8.1初始化数据绑定 69
4.8.2在哪里可以查看数据绑定对象 70
4.8.3绑定复杂对象 71
4.8.4数据绑定更新 72
4.9列表渲染wx:for 76
4.10配置单个页面导航栏背景色 79
4.11从欢迎页面跳转到文章页面 80
4.11.1事件 80
4.11.2 redirectTo与navigateTo 82
4.11.3小程序最多只能有5层页面 83
4.11.4冒泡事件与非冒泡事件 84
第5章 模块、模板与缓存 85
5.1将文章数据从业务中分离 86
5.2小程序的模块 87
5.3小程序的模板化 89
5.4消除template模板对外部变量名的依赖 90
5.5 include与import引用模板的区别 92
5.6 CSS的模块化 93
5.7令人遗憾的模板化而非组件化 94
5.8使用缓存在本地模拟服务器数据库 95
5.8.1应用程序的生命周期 95
5.8.2使用Storage缓存初始化本地数据库 96
5.8.3缓存的强制清理及注意事项 99
5.9编写缓存数据库操作类 99
5.10使用缓存数据库操作类 101
5.11使用ES6改写缓存操作类 102
5.12完善文章数据 103
5.13完整的datajs数据 104
第6章 文章详情页面 110
6.1跳转到文章详情页面 111
6.2不要在template上注册事件 112
6.3页面间传递参数的3种方式 113
6.3.1组件的自定义属性 113
6.3.2通过dataset获取组件自定义属性 114
6.3.3获取页面参数值 115
6.4编译时设置初始化页面及参数 115
6.5读取文章详情数据 116
6.6文章id号的数据流向图 117
6.7编写文章详情页面 118
6.8垂直居中问题的经典解决方法 121
6.9动态设置导航栏标题 122
6.9.1使用配置文件配置导航栏标题 122
6.9.2使用wx.setNavigationBarTitle(OBJECT)设置导航条 123
第7章 收藏、评论、点赞与计数功能 124
7.1收藏、评论、点赞、计数功能准备工作 125
7.2文章收藏功能 127
7.2.1条件渲染:wx:if与wx:else 127
7.2.2实现收藏点击功能 128
7.2.3交互反馈wx:showToast 130
7.3文章点赞功能 131
7.4本地缓存的重要性及应用举例 133
7.5支持文字、图片、拍照、语音上传的文章评论 134
7.6文章评论页面的实现步骤与思路 134
7.7获取并绑定文章评论数据 135
7.8显示文章评论数据 140
7.9实现图片预览 145
7.10实现提交评论的界面 146
7.11 wx:if与hidden控制元素显示和隐藏 152
7.12实现文字评论框和语音评论框的切换 152
7.13 input组件 153
7.14 bindinput事件 154
7.15屏蔽评论关键字 155
7.16实现自定义发送按钮 157
7.17同时支持模拟器回车、真机点击“完成”发送评论 161
7.18图片与拍照评论的界面实现 161
7.19实现从相册选择照片与拍照 164
7.20 icon图片 166
7.21删除已选择的图片 167
7.22在小程序中使用CSS 3动画 168
7.23实现图片评论的发送 170
7.24实现语音消息的发送 171
7.25实现语音消息的暂停与播放 174
7.26用户授权 176
7.27解决真机运行时评论页面滑动卡顿的问题 177
7.28文章阅读计数功能 177
第8章 背景音乐播放 180
8.1显示音乐播放图标 181
8.2切换音乐播放图标 182
8.3背景音乐播放的特点 182
8.4实现单页面背景音乐播放 183
8.5监听音乐播放 185
8.6全局变量与全局音乐播放 186
8.7音乐总控开关 192
8.8显示音乐的封面图片 194
第9章 丰富文章页面 195
9.1将页面分享给朋友和微信群 196
9.2从swiper组件跳转到文章详情页面 197
9.3使用小程序动画实现点赞特效 199
第10章 电影 204
10.1小程序的tab选项卡 205
10.2电影页面介绍 208
10.3编写豆瓣星星评分组件:stars-tpl模板 210
10.4编写movie-tpl模板 212
10.5编写movie-list-tpl模板 213
10.6电影首页的骨架与样式 215
10.7豆瓣电影API分析 216
10.8电影首页的js编写 217
10.9 wx.request发送http/https请求 219
10.10设置wx.request的超时时间 221
10.11处理返回的电影数据 221
10.12绑定处理后的电影数据 224
10.13 http和https在小程序中的使用说明 226
10.14跳转到更多电影页面 227
10.15 编写movie-grid-tpl模板 229
10.16编写“更多电影”页面 231
10.17实现页面下拉刷新的“三部曲” 234
10.18在模拟器中可执行下拉刷新但在真机中无法执行下拉刷新的常见错误 237
10.19 json中的backgroundColor配置的是哪里的颜色 238
10.20实现上滑加载更多数据 239
10.21动态设置导航栏loading图标 241
10.22电影搜索 244
10.23电影详情页面 249
10.24电影详情页面的骨架和样式 251
10.25编写电影详情页面的业务逻辑代码 258
10.26预览电影海报 261
10.27设置电影页面的导航栏标题 262
第11章 设置 264
11.1设置页面 265
11.2获取用户基本信息 272
11.3数据缓存的异步操作 275
11.4获取系统信息 277
11.5获取网络状态 281
11.6获取当前位置信息与当前速度信息 282
11.7使用微信内置地图查看位置信息 283
11.8监听罗盘数据制作一个简易指南针 284
11.9在小程序中实现摇一摇 286
11.10扫码 289
11.11获取小程序页面二维码 292
11.12下载并预览pdf、 word等多种类型文档 293
第12章 开放接口 300
12.1准备工作 301
12.2用户登录 301
12.3用户信息校验 307
12.4解析用户加密数据获取openId及UnionId 313
12.5模板消息 316
12.6 form表单及picker组件 321
12.7发送模板消息 323
12.8微信支付 328
12.9真实的微信小程序登录状态维护 336
第13章 杂项 338
13.1 wx:key 339
13.2 scroll-view组件:在js中控制滚动条 343
13.3深入理解小程序的单向数据绑定机制 348
13.4深入理解scroll-view组件的bindscrolltolower、 lower-threshold属性 349
13.5微信小程序发布流程 350