本书是针对Web前端开发人员编写的一本快速掌握微信小程序开发的教程。本书通过通俗易懂的语言、丰富实用的案例,讲解微信小程序的开发技术。
本书共8章,第1章讲解微信小程序的入门知识,介绍微信小程序的特点和发展前景;第2章和第3章分别讲解微信小程序的页面制作和页面交互;第4章和第5章讲解微信小程序的常用API;第6章讲解综合项目“点餐”微信小程序;第7章讲解微信小程序开发进阶;第8章讲解基于uni-app开发的“短视频”微信小程序。
本书适合作为高等教育本、专科院校计算机相关专业的教材,也可作为广大计算机编程爱好者的参考书。
1.本书已入选江苏省“十四五”规划教材;
2.本书配套丰富的教学资源,包括教学PPT、教学大纲、教学设计、教学视频、练习题库、课后习题及答案;
3.本书在第1版的基础上,对技术内容做了调整,移除了mpvue和WePY框架,增加了新的Vant Weapp组件库和uni-app框架,同时增加了一个综合案例,更加突出对读者动手能力的培养。
黑马程序员,传智教育旗下高端IT教育品牌,由中国Java培训先行者人张孝祥老师发起,联合全球最大的中文IT社区CSDN、中关村软件园共同创办的一家专业教育机构。办学至今,我们一直坚守着“为千万人少走弯路而著书,为中华软件之崛起而讲课”的办学理念,坚持培养优秀软件应用工程师的宏伟目标,在累计培养的十万余名学员中,其中90%的学员均已在北、上、广等一线城市高薪就业。为了迎合软件市场的需求,我们陆续开设了Java、网页平面、PHP、.Net、iOS、C/C++、Android等9个专业方向的课程,并且未来将逐渐开设其他专业方向的课程。随着传智播客的日益壮大,除了北京总部,我们在上海、广州、武汉、成都、深圳等地也创立了直营分支机构,传智播客俨然已成为了国内具有专业口碑的IT教育机构。
第 1章 微信小程序入门 1
1.1 初识微信小程序 1
1.1.1 什么是微信小程序 2
1.1.2 微信小程序的特点 2
1.1.3 微信小程序的发展前景 3
1.1.4 微信小程序的宿主环境 4
1.2 微信小程序开发前准备 5
1.2.1 注册微信小程序开发账号 5
1.2.2 获取微信小程序AppID 8
1.2.3 安装微信开发者工具 9
1.2.4 创建微信小程序项目 10
1.3 微信小程序开发基础 12
1.3.1 微信小程序的项目结构 12
1.3.2 微信小程序的页面组成 12
1.3.3 微信小程序的通信模型 13
1.4 微信开发者工具的使用 13
1.4.1 认识微信开发者工具 13
1.4.2 微信小程序的项目设置 17
1.4.3 微信小程序开发常用快捷键 18
1.5 微信小程序的项目成员 20
1.5.1 项目成员的组织结构 20
1.5.2 项目成员的分工 21
1.5.3 项目成员和体验成员的管理 21
1.5.4 项目成员的权限 22
1.5.5 添加项目成员和体验成员 23
1.6 微信小程序的发布上线 24
1.6.1 微信小程序的版本 24
1.6.2 微信小程序的上线流程 25
本章小结 27
课后练习 27
第 2章 微信小程序页面制作 29
【案例2-1】个人信息 29
案例分析 30
知识储备 30
1. WXML简介 30
2. WXSS简介 31
3. 常用组件 31
4. 页面路径配置 31
5. view组件 32
6. image组件 33
7. rpx单位 35
8. 样式导入 35
案例实现 36
【案例2-2】本地生活 37
案例分析 37
知识储备 38
1. swiper和swiper-item组件 38
2. text组件 39
3. Flex布局 40
案例实现 42
【案例2-3】婚礼邀请函 45
案例分析 45
知识储备 47
1. 导航栏配置 47
2. 标签栏配置 47
3. vw、vh单位 49
4. video组件 49
5. 表单组件 50
案例实现 54
本章小结 64
课后练习 64
第3章 微信小程序页面交互 65
【案例3-1】比较数字大小 66
案例分析 66
知识储备 66
1. Page( )函数 66
2. 数据绑定 68
3. 事件绑定 69
4. 事件对象 70
5. this关键字 71
6. setData( )方法 71
7. 条件渲染 72
8. 标签 72
9. hidden属性 73
案例实现 73
【案例3-2】计算器 75
案例分析 75
知识储备 76
1. data-*自定义属性 76
2. 模块 77
案例实现 77
【案例3-3】美食列表 85
案例分析 85
知识储备 86
1. 列表渲染 86
2. 网络请求 87
3. 提示框 88
4. WXS 89
5. 上拉触底 91
6. 下拉刷新 91
案例实现 92
【案例3-4】调查问卷 97
案例分析 98
知识储备 98
双向数据绑定 98
案例实现 98
本章小结 102
课后练习 102
第4章 微信小程序常用API(上) 104
【案例4-1】音乐播放器 104
案例分析 104
知识储备 106
1. scroll-view组件 106
2. slider组件 107
3. 标签 108
4. 背景音频API 109
案例实现 110
【案例4-2】录音机 121
案例分析 121
知识储备 122
1. 录音API 122
2. 音频API 123
案例实现 124
【案例4-3】头像上传下载 127
案例分析 128
知识储备 128
1. 选择媒体API 128
2. 图片预览API 129
3. 文件上传API 130
4. 文件下载API 131
案例实现 131
【案例4-4】模拟时钟 134
案例分析 134
知识储备 134
1. canvas组件 134
2. 画布API 135
案例实现 137
本章小结 142
课后练习 143
第5章 微信小程序常用API(下) 144
【案例5-1】罗盘动画 144
案例分析 144
知识储备 145
动画API 145
案例实现 147
【案例5-2】用户登录 151
案例分析 151
知识储备 151
1. 登录流程时序 151
2. 登录API 153
3. 数据缓存API 154
4. 头像昵称填写 155
5. App( )函数 157
案例实现 158
【案例5-3】查看附近美食餐厅 162
案例分析 163
知识储备 163
1. 腾讯地图SDK 163
2. map组件 168
3. 地图API 169
4. 位置API 170
5. 路由API 170
案例实现 172
【案例5-4】在线聊天 176
案例分析 176
知识储备 177
1. WebSocket API 177
2. SocketTask 178
案例实现 179
本章小结 184
课后练习 184
第6章 综合项目——“点餐”微信小程序 186
【任务6-1】项目开发准备 186
开发背景 186
项目模块划分 187
项目初始化 187
【任务6-2】封装网络请求 189
任务分析 189
任务实现 189
【任务6-3】用户登录 192
任务分析 192
任务实现 193
【任务6-4】商家首页 196
任务分析 196
任务实现 196
【任务6-5】菜单列表页 201
任务分析 201
任务实现 202
【任务6-6】购物车 209
任务分析 209
任务实现 210
【任务6-7】订单确认页 220
任务分析 220
任务实现 220
【任务6-8】订单详情页 227
任务分析 227
任务实现 228
【任务6-9】订单列表页 231
任务分析 231
任务实现 232
【任务6-10】消费记录页 238
任务分析 238
任务实现 238
本章小结 241
课后练习 241
第7章 微信小程序开发进阶 243
【案例7-1】自定义标签栏 243
案例分析 244
知识储备 245
1. 创建自定义组件 245
2. 使用自定义组件 246
3. 使用自定义组件渲染标签栏 247
4. Vant Weapp组件库 248
案例实现 249
【案例7-2】电影列表 253
案例分析 253
知识储备 254
1. WeUI组件库 254
2. navigator组件 256
案例实现 257
【案例7-3】待办事项 262
案例分析 262
知识储备 263
1. uni-app框架概述 263
2. HBuilder X开发工具 264
3. 创建uni-app项目 265
4. uni-app项目的目录结构 266
5. 将uni-app项目运行至微信小程序 266
6. uni-app项目的全局配置文件 267
案例实现 268
本章小结 272
课后练习 272
第8章 uni-app项目——“短视频”微信小程序 274
【任务8-1】项目开发准备 274
项目展示 274
项目初始化 276
【任务8-2】公共头部区域 277
任务分析 277
任务实现 277
【任务8-3】导航栏区域 279
任务分析 279
任务实现 279
【任务8-4】轮播图区域 281
任务分析 281
任务实现 281
【任务8-5】视频列表区域 283
任务分析 283
任务实现 283
【任务8-6】视频详情页 285
任务分析 285
任务实现 286
本章小结 292
课后练习 292