微信小程序开发实战/黑马程序员

第 1章 微信小程序入门 1

【教学导航】　1

1.1　初识微信小程序　1

1.1.1　什么是微信小程序　1

1.1.2　微信小程序的账号　3

1.1.3　微信小程序的特点　4

1.1.4　微信小程序的发展前景　4

1.2　开发环境搭建　5

1.2.1　注册微信公众号　5

1.2.2　安装微信开发者工具　7

1.3　小程序的开发体验　8

1.3.1　创建项目　8

1.3.2　开发者工具的使用　9

1.3.3　目录结构　11

1.3.4　项目设置　13

1.3.5　快捷键　14

1.4　团队开发与项目上线　15

1.4.1　项目成员及权限　15

1.4.2　提交审核及发布　17

本章小结　17

课后习题　17



第 2章　微信小程序开发基础　19

【教学导航】　19

2.1　【案例1】比较数字大小　19

2.1.1　案例分析　19

2.1.2　创建项目　20

2.1.3　页面组件　21

2.1.4　页面样式　23

2.1.5　配置文件　27

2.1.6　页面逻辑　29

2.1.7　注册程序　34

2.1.8　实现比较功能　35

2.2　【案例2】调查问卷　40

2.2.1　案例分析　40

2.2.2　编写表单页面　41

2.2.3　服务器数据交互　42

2.2.4　表单数据绑定　44

2.3　【案例3】计算器　46

2.3.1　案例分析　46

2.3.2　编写计算器页面　46

2.3.3　实现计算逻辑功能　50

本章小结　51

课后习题　51



第3章　“音乐”小程序项目　53

【教学导航】　53

3.1　开发前准备　53

3.1.1　项目展示　53

3.1.2　项目分析　54

3.1.3　项目初始化　55

3.2　【任务1】标签页切换　55

3.2.1　任务分析　55

3.2.2　前导知识　56

3.2.3　编写页面结构和样式　58

3.2.4　实现标签页切换　60

3.3　【任务2】音乐推荐　61

3.3.1　任务分析　61

3.3.2　前导知识　62

3.3.3　内容区域滚动　65

3.3.4　轮播图　66

3.3.5　功能按钮　67

3.3.6　热门音乐　68

3.4　【任务3】播放器　69

3.4.1　任务分析　69

3.4.2　前导知识　70

3.4.3　定义基础数据　72

3.4.4　实现音乐播放功能　73

3.4.5　编写播放器页面　75

3.4.6　控制播放进度　76

3.5　【任务4】播放列表　78

3.5.1　任务分析　78

3.5.2　编写页面结构和样式　79

3.5.3　实现换曲功能　80

本章小结　80

课后习题　80



第4章　“婚礼邀请函”小程序

项目　82

【教学导航】　82

4.1　开发前准备　82

4.1.1　项目展示　82

4.1.2　项目分析　84

4.1.3　项目初始化　84

4.2　【任务1】邀请函页面　86

4.2.1　任务分析　86

4.2.2　背景音乐播放　87

4.2.3　页面结构和样式　89

4.2.4　一键拨打电话　91

4.3　【任务2】照片页面　92

4.3.1　任务分析　92

4.3.2　实现纵向轮播图　93

4.4　【任务3】美好时光页面　93

4.4.1　任务分析　93

4.4.2　前导知识　94

4.4.3　编写页面结构和样式　98

4.4.4　利用WXS增强页面功能　98

4.5　【任务4】婚礼地点页面　99

4.5.1　任务分析　99

4.5.2　前导知识　100

4.5.3　编写婚礼地点页面　103

4.6　【任务5】宾客信息页面　103

4.6.1　任务分析　103

4.6.2　前导知识　103

4.6.3　编写页面结构和样式　106

4.6.4　表单验证　107

4.6.5　发送婚礼请帖回复通知　108

本章小结　112

课后习题　112



第5章　API应用案例（上）　114

【教学导航】　114

5.1　【案例1】用户登录　114

5.1.1　案例分析　114

5.1.2　前导知识　115

5.1.3　搭建开发者服务器　117

5.1.4　实现用户登录　119

5.1.5　检查用户是否已经登录　120

5.1.6　获取用户信息　121

5.1.7　开放数据校验与解密　125

5.2　【案例2】个人中心　127

5.2.1　案例分析　127

5.2.2　前导知识　129

5.2.3　实现底部标签页切换　131

5.2.4　编辑个人资料　132

5.2.5　订单物流查询　135

5.2.6　选择收货地址　137

5.2.7　客服联系电话　140

5.3　【案例3】天气预报查询　141

5.3.1　案例分析　141

5.3.2　前导知识　141

5.3.3　动态获取输入的城市名　142

5.3.4　请求天气接口数据　142

5.3.5　渲染界面展示数据　143

5.4　【案例4】查看附近的

美食餐厅　143

5.4.1　案例分析　143

5.4.2　前导知识　144

5.4.3　设计地图界面　147

5.4.4　单击控件回到中心点　149

5.4.5　视野变化获取中心点坐标　149

本章小结　150

课后习题　150



第6章　API应用案例（下）　152

【教学导航】　152

6.1　【案例5】模拟时钟　152

6.1.1　案例分析　152

6.1.2　前导知识　153

6.1.3　钟表页面布局　156

6.1.4　钟表页面绘制　157

6.2　【案例6】罗盘动画　160

6.2.1　案例分析　160

6.2.2　前导知识　160

6.2.3　设计罗盘界面布局　161

6.2.4　手指触摸旋转罗盘　162

6.2.5　单击按钮操作罗盘　163

6.3　【案例7】文件上传与下载　165

6.3.1　案例分析　165

6.3.2　前导知识　165

6.3.3　录音和上传　167

6.3.4　文件的下载　168

6.4　【案例8】在线聊天系统　169

6.4.1　案例分析　169

6.4.2　前导知识　170

6.4.3　编写Node.js服务器端代码　172

6.4.4　实现通信功能　173

6.4.5　编写聊天页面　174

本章小结　177

课后习题　177



第7章　小程序开发框架　179

【教学导航】　179

7.1　小程序模块化开发　179

7.1.1　模块　179

7.1.2　模板　180

7.1.3　自定义组件　181

7.1.4　插件　184

7.2　小程序基础样式库—

WeUI　187

7.2.1　初识WeUI　187

7.2.2　【案例】电影信息展示　187

7.3　使用Vue.js开发小程序—

mpvue　192

7.3.1　初识mpvue　192

7.3.2　开发工具　192

7.3.3　项目结构　194

7.3.4　【案例】计数器　195

7.4　小程序组件化开发框架—

WePY　196

7.4.1　初识WePY　197

7.4.2　开发工具　197

7.4.3　项目结构　198

7.4.4　【案例】商品展示　200

本章小结　201

课后习题　202



第8章　综合项目—点餐

系统　203

【教学导航】　203

8.1　开发前准备　203

8.1.1　项目展示　203

8.1.2　项目分析　205

8.1.3　项目初始化　205

8.1.4　封装网络请求　207

8.2　【任务1】商家首页　208

8.2.1　任务分析　208

8.2.2　焦点图切换　208

8.2.3　中间区域单击跳转到菜单列表　209

8.2.4　底部商品展示　210

8.3　【任务2】菜单列表　210

8.3.1　任务分析　210

8.3.2　折扣信息区　211

8.3.3　设计菜单列表布局　211

8.3.4　请求数据　213

8.3.5　实现菜单栏联动单品列表功能　213



8.4　【任务3】购物车　214

8.4.1　任务分析　214

8.4.2　设计底部购物车区域　214

8.4.3　添加商品到购物车　215

8.4.4　购物车界面　216

8.4.5　增加商品数量　218

8.4.6　减少商品数量　218

8.4.7　清空购物车　218

8.4.8　满减优惠　219

8.4.9　跳转到订单确认页面　219

8.5　【任务4】订单确认　220

8.5.1　任务分析　220

8.5.2　订单信息　220

8.5.3　备注功能实现　221

8.5.4　支付功能　222

8.5.5　支付成功返回订单列表　223

8.6　【任务5】订单详情　224

8.6.1　任务分析　224

8.6.2　取餐部分信息展示　225

8.6.3　订单详情部分　225

8.6.4　订单信息部分　226

8.7　【任务6】订单列表　227

8.7.1　任务分析　227

8.7.2　订单列表设计　227

8.7.3　封装数据请求　228

8.7.4　初始化页面　229

8.7.5　下拉刷新功能　229

8.7.6　上拉触底功能　230

8.8　【任务7】消费记录　230

8.8.1　任务分析　230

8.8.2　设计消费记录列表　231

本章小结　232

课后习题　232