微信小程序开发项目教程(慕课版)(第2版)电子书

内容提要

前言

单元1 微信小程序概述

情景引入

学习目标

思维导图

1.1 微信小程序介绍

1.1.1 初识微信小程序

1.1.2 微信小程序的功能

1.1.3 微信小程序的使用场景

1.1.4 微信小程序的发展历程

1.1.5 微信小程序带来的机会

1.1.6 十大小程序平台

1.2 微信小程序环境搭建

1.2.1 小程序环境搭建

1.2.2 基础技术准备

1.3 微信开发者工具的使用

1.3.1 如何创建项目

1.3.2 微信开发者工具界面

1.3.3 常用快捷键

1.4 项目实战：创建莫凡商城小程序

1.5 小结

单元2 莫凡商城小程序项目任务

情景引入

学习目标

思维导图

2.1 “我的”模块功能介绍

2.1.1 任务1——实现底部标签导航功能

2.1.2 任务2——实现注册功能

2.1.3 任务3——实现登录功能

2.1.4 任务4——实现“我的”界面简单和复杂列表式导航功能

2.1.5 任务5——实现修改密码功能

2.1.6 任务6——实现意见反馈功能

2.1.7 任务7——实现清除缓存功能

2.1.8 任务8——实现我的订单功能

2.2 “首页”模块功能介绍

2.2.1 任务9——实现搜索区域布局与海报轮播功能

2.2.2 任务10——实现图书列表显示功能静态布局与动态渲染

2.2.3 任务11——实现图书搜索功能静态布局

2.2.4 任务12——实现更多图书列表显示功能静态布局

2.3 “购物车”模块功能介绍

2.3.1 任务13——实现商品详情页功能

2.3.2 任务14——实现商品加入购物车功能

2.3.3 任务15——实现购物车列表功能

2.3.4 任务16——实现商品立即购买页功能

2.3.5 任务17——实现收货地址列表功能

2.3.6 任务18——实现新增和编辑收货地址功能

2.3.7 任务19——实现支付功能

2.3.8 任务20——实现支付成功页功能

2.3.9 任务21——实现订单详情页功能

2.4 “分类”模块功能介绍

2.4.1 任务22——实现图书分类功能

2.4.2 任务23——实现图书分类结果列表功能

2.5 小结

单元3 莫凡商城小程序的项目结构

情景引入

学习目标

思维导图

3.1 项目结构介绍

3.1.1 框架全局文件

3.1.2 项目实战：任务1——实现底部标签导航功能

3.1.3 工具类文件

3.1.4 框架页面文件

3.2 微信小程序逻辑层框架接口

3.2.1 使用App()函数注册小程序

3.2.2 使用Page()函数注册页面

3.3 微信小程序WXML视图层

3.3.1 WXML

3.3.2 动态绑定数据

3.3.3 组件属性动态绑定数据

3.3.4 控制属性动态绑定数据

3.3.5 关键字动态绑定数据

3.3.6 运算

3.4 微信小程序WXSS样式渲染

3.4.1 尺寸单位

3.4.2 样式导入

3.4.3 内联样式

3.4.4 选择器

3.4.5 常用样式属性

3.5 微信小程序条件渲染

3.5.1 使用wx：if判断单个组件

3.5.2 使用block wx：if判断多个组件

3.6 微信小程序列表渲染

3.6.1 使用wx：for列表渲染单个组件

3.6.2 使用block wx：for列表渲染多个组件

3.6.3 使用wx：key指定唯一标识符

3.7 项目实战：任务4（1）——实现“我的”界面简单列表式导航功能

3.8 小结

单元4 莫凡商城首页静态布局设计

情景引入

学习目标

思维导图

4.1 首页需求分析与知识点

4.2 视图容器组件的应用

4.2.1 view视图容器组件

4.2.2 scroll-view可滚动视图容器组件

4.2.3 swiper滑块视图容器组件

4.2.4 movable-view可移动视图容器组件

4.2.5 项目实战：任务9——实现搜索区域布局与海报轮播功能

4.3 基础内容组件的应用

4.3.1 icon图标组件

4.3.2 text文本组件

4.3.3 progress进度条组件

4.3.4 rich-text富文本组件

4.3.5 editor富文本编辑器及其API

4.4 image图片组件及图片API的应用

4.4.1 image图片组件

4.4.2 图片API的应用

4.4.3 项目实战：任务10（1）——实现图书列表显示功能静态布局

4.5 导航组件和导航API的应用

4.5.1 navigator页面链接组件

4.5.2 wx.navigateTo()保留当前页跳转API

4.5.3 wx.redirectTo()关闭当前页跳转API

4.5.4 wx.switchTab()跳转到tabBar页面API

4.5.5 wx.navigateBack()返回上一页API

4.5.6 wx.reLaunch()关闭所有页面并打开某个页面API

4.5.7 导航条API

4.5.8 tabBar标签导航API

4.5.9 项目实战：任务11——实现图书搜索功能静态布局

4.6 项目实战：任务12——实现更多图书列表显示功能静态布局

4.7 小结

单元5 莫凡商城首页动态绑定设计

情景引入

学习目标

思维导图

5.1 微信小程序函数处理

5.1.1 生命周期函数

5.1.2 页面事件函数

5.1.3 页面路由管理

5.1.4 自定义函数

5.1.5 setData()设值函数

5.2 微信小程序网络请求

5.2.1 网络访问配置

5.2.2 wx.request()请求数据API

5.2.3 wx.uploadFile()文件上传API

5.2.4 wx.downloadFile()文件下载API

5.2.5 WebSocket会话API

5.2.6 项目实战：任务10（2）——实现图书列表显示功能动态渲染

5.3 微信小程序定义模板

5.3.1 定义模板

5.3.2 使用模板

5.4 微信小程序的引用功能

5.4.1 import引用

5.4.2 include引用

5.5 WXS小程序脚本语言

5.5.1 模块化

5.5.2 变量与数据类型

5.5.3 注释

5.5.4 语句

5.6 下拉刷新及窗口设置

5.6.1 下拉刷新API及事件处理函数

5.6.2 wx.setBackgroundColor()动态设置窗口的背景色API

5.6.3 wx.setBackgroundTextStyle()动态设置下拉背景字体API

5.6.4 wx.loadFontFace()引入第三方字体API

5.6.5 wx.pageScrollTo()将页面滚动到目标位置API

5.7 小结

单元6 莫凡商城的注册、登录功能

情景引入

学习目标

思维导图

6.1 微信小程序表单组件

6.1.1 button按钮组件

6.1.2 checkbox多选项目组件

6.1.3 radio单选项目组件

6.1.4 input输入框组件

6.1.5 textarea多行输入框组件

6.1.6 label改进表单可用性组件

6.1.7 picker滚动选择器组件

6.1.8 slider滑动选择器组件

6.1.9 switch开关选择器组件

6.1.10 form表单组件

6.1.11 项目实战：任务2——实现注册功能

6.2 微信小程序界面交互API

6.2.1 wx.showToast()/wx.hideToast()显示/隐藏消息提示框API

6.2.2 wx.showModal()显示模态对话框API

6.2.3 wx.showLoading()/wx.hideLoading()显示/隐藏loading提示框API

6.2.4 wx.showActionSheet()显示操作菜单API

6.3 定时器API

6.4 数据缓存API

6.4.1 将数据缓存到本地

6.4.2 获取本地缓存数据

6.4.3 清理本地缓存数据

6.4.4 从缓存获取图书列表数据

6.5 登录相关API

6.5.1 登录API

6.5.2 获取账号信息API

6.5.3 获取用户信息API

6.5.4 授权API

6.5.5 设置API

6.6 项目实战：任务3——实现登录功能

6.7 项目实战：任务4（2）——实现“我的”界面复杂列表式导航功能

6.8 项目实战：任务5——实现修改密码功能

6.9 项目实战：任务6——实现意见反馈功能

6.10 项目实战：任务7——实现清除缓存功能

6.11 小结

单元7 莫凡商城商品详情页设计

情景引入

学习目标

思维导图

7.1 页面间传递数据

7.2 媒体组件及媒体API的应用

7.2.1 audio音频组件及音频API

7.2.2 video视频组件及视频API

7.2.3 camera相机组件及相机API

7.2.4 live-player实时音视频播放组件

7.2.5 live-pusher实时音视频录制组件

7.2.6 视频号组件

7.3 项目实战：任务13——实现商品详情页功能

7.4 项目实战：任务14——实现商品加入购物车功能

7.5 项目实战：任务15——实现购物车列表功能

7.6 商品详情页分享与转发API的应用

7.7 小结

单元8 莫凡商城获取收货地址功能设计

情景引入

学习目标

思维导图

8.1 位置API

8.1.1 获得当前位置API、选择位置API、查看位置API

8.1.2 开启/停止接收位置信息API

8.1.3 监听实时地理位置API

8.2 收货地址API

8.3 地图组件及地图API

8.3.1 map地图组件

8.3.2 地图API的应用

8.4 项目实战：任务16——实现商品立即购买页功能

8.5 项目实战：任务17——实现收货地址列表功能

8.6 项目实战：任务18——实现新增和编辑收货地址功能

8.7 小结

单元9 莫凡商城支付功能及订单详情页设计

情景引入

学习目标

思维导图

9.1 支付API

9.2 项目实战：任务19——实现支付功能

9.3 画布组件及画布API的应用

9.4 项目实战：任务20——实现支付成功页功能

9.5 项目实战：任务8——实现我的订单功能

9.6 项目实战：任务21——实现订单详情页功能

9.7 小结

单元10 小程序扩展应用

情景引入

学习目标

思维导图

10.1 设备应用API

10.1.1 获得系统信息

10.1.2 获取网络状态

10.1.3 加速度计

10.1.4 罗盘

10.1.5 拨打电话

10.1.6 扫码

10.1.7 剪贴板

10.1.8 蓝牙

10.1.9 屏幕亮度

10.1.10 振动

10.1.11 手机联系人

10.2 文件操作API

10.2.1 wx.saveFile()保存文件到本地API

10.2.2 wx.getSavedFileList()获取本地文件列表API

10.2.3 wx.getSavedFileInfo()获取本地文件信息API

10.2.4 wx.removeSavedFile()删除本地文件API

10.2.5 wx.openDocument()打开文档API

10.2.6 wx.getFileInfo()获取文件信息API

10.2.7 FileSystemManager文件管理器API

10.3 窗口API

10.4 微信运动API

10.5 项目实战：任务22——实现图书分类功能

10.6 项目实战：任务23——实现图书分类结果列表功能

10.7 小结