一章　微信小程序基础　1
1.1　微信小程序介绍　1
1.1.1　什么是微信小程序　1
1.1.2　微信小程序发展历程　1
1.1.3　微信小程序提供的功能　2
1.1.4　微信小程序不提供的功能　3
1.1.5　微信小程序带来的机会　3
1.2　微信小程序开发工具的使用　4
1.2.1　获取微信小程序AppID　4
1.2.2　创建一个微信小程序项目　5
1.2.3　微信开发工具的使用　7
1.3　微信小程序框架文件　14
1.3.1　框架全局配置文件　14
1.3.2　工具类文件　19
1.3.3　框架页面文件　19
1.4　微信小程序逻辑层　20
1.4.1　App()注册程序　20
1.4.2　Page()注册页面　21
1.5　微信小程序视图层　22
1.5.1　绑定数据　22
1.5.2　条件渲染　24
1.5.3　列表渲染　24
1.5.4　定义模板　25
1.5.5　引用功能　26
1.6　微信小程序组件介绍　27
1.6.1　视图容器组件　27
1.6.2　基础内容组件　28
1.6.3　表单组件　30
1.6.4　导航组件　33
1.6.5　媒体组件　33
1.6.6　地图组件　36
1.6.7　画布组件　38
1.6.8　客服会话按钮组件　39
1.7　微信小程序API说明　39
1.7.1　请求服务器数据API　39
1.7.2　文件上传与下载API　40
1.7.3　WebSocket会话API　41
1.7.4　图片处理API　43
1.7.5　文件操作API　44
1.7.6　数据缓存API　46
1.7.7　位置信息API　49
1.7.8　设备应用API　51
1.7.9　交互反馈API　53
1.7.10　登录API　55
1.7.11　微信支付API　56
1.7.12　分享API　57
1.8　小结　57
1.9　实战演练　58
二章　美食类：仿菜谱精灵微信小程序　59
2.1　需求描述及交互分析　59
2.1.1　需求描述　59
2.1.2　交互分析　60
2.2　设计思路及相关知识点　60
2.2.1　设计思路　60
2.2.2　相关知识点　61
2.3　底部标签导航设计　62
2.4　幻灯片轮播效果设计　65
2.5　菜谱专题列表式显示设计　67
2.6　菜谱专题详情设计　74
2.7　小结　78
2.8　实战演练　78
第3章　资讯类：仿头条号微信小程序　79
3.1　需求描述及交互分析　79
3.1.1　需求描述　79
3.1.2　　交互分析　80
3.2　设计思路及相关知识点　80
3.2.1　设计思路　80
3.2.2　相关知识点　80
3.3　首页新闻频道框架设计　83
3.3.1　底部标签导航设计　83
3.3.2　顶部检索框设计　86
3.3.3　新闻频道滑动效果设计　87
3.4　首页新闻内容设计　92
3.5　首页新闻详情页设计　99
3.6　“我的”界面列表式导航设计　104
3.7　小结　113
3.8　实战演练　113
第4章　生鲜类：仿爱鲜蜂微信小程序　114
4.1　需求描述及交互分析　115
4.1.1　需求描述　115
4.1.2　交互分析　116
4.2　设计思路及相关知识点　116
4.2.1　设计思路　116
4.2.2　相关知识点　117
4.3　首页界面布局设计　121
4.3.1　底部标签导航设计　121
4.3.2　幻灯片轮播效果设计　123
4.3.3　首页界面布局设计　125
4.4　闪送超市纵向导航设计　135
4.5　添加商品到购物车设计　144
4.6　购物车商品显示设计　155
4.7　收货地址列表式显示设计　165
4.8　小结　170
4.9　实战演练　170
第5章　电影类：仿淘票票微信小程序　171
5.1　需求描述及交互分析　172
5.1.1　需求描述　172
5.1.2　交互分析　173
5.2　设计思路及相关知识点　174
5.2.1　设计思路　174
5.2.2　相关知识点　174
5.3　电影界面框架设计　177
5.3.1　顶部页签切换效果设计　177
5.3.2　底部标签导航设计　179
5.4　正在热映界面布局设计　180
5.5　即将上映界面布局设计　186
5.6　电影详情页设计　194
5.7　“我的”界面列表式导航设计　200
5.8　登录设计　208
5.9　电影界面分享　214
5.10　小结　216
5.11　实战演练　217
第6章　音乐类：仿酷狗音乐微信小程序　218
6.1　需求描述及交互分析　219
6.1.1　需求描述　219
6.1.2　交互分析　220
6.2　设计思路及相关知识点　220
6.2.1　设计思路　220
6.2.2　相关知识点　220
6.3　音乐首页界面布局设计　222
6.4　音乐播放设计　234
6.5　本地音乐顶部页签切换效果
设计　240
6.6　单曲列表设计　243
6.7　单曲检索设计　251
6.8　小结　252
6.9　　实战演练　253
第7章　电商类：仿京东购物微信小程序　254
7.1　需求描述及交互分析　255
7.1.1　需求描述　255
7.1.2　交互分析　256
7.2　设计思路及相关知识点　257
7.2.1　设计思路　257
7.2.2　相关知识点　257
7.3　搜索商品首界面布局设计　258
7.4　搜索商品设计　264
7.5　购物车设计　272
7.6　我的订单设计　281
7.7　优惠券设计　284
7.8　小结　291
7.9　实战演练　291
第8章　求职类：仿拉勾网微信小程序　292
8.1　需求描述及交互分析　293
8.1.1　需求描述　293
8.1.2　交互分析　295
8.2　设计思路及相关知识点　295
8.2.1　设计思路　295
8.2.2　相关知识点　296
8.3　首页招聘信息列表设计　297
8.4　言职界面九宫格导航设计　307
8.5　“我”界面列表式导航设计　311
8.6　完善简历界面布局设计　314
8.7　编辑基本信息设计　319
8.8　小结　322
8.9　　实战演练　323
第9章　教育类：仿猿题库微信小程序　324
9.1　需求描述及交互分析　325
9.1.1　需求描述　325
9.1.2　交互分析　327
9.2　设计思路及相关知识点　328
9.2.1　设计思路　328
9.2.2　相关知识点　328
9.3　练习界面九宫格导航设计　329
9.4　科目设置界面设计　333
9.5　语文科目练习界面设计　341
9.6　练习题目界面设计　350
9.7　发现界面列表式导航设计　357
9.8　排行榜设计　360
9.9　“我”界面列表式导航设计　370
9.10　小结　375
9.11　实战演练　375