目 录
第 1章 AI编程工具与微信小程序 1
1.1 AI辅助编程 2
1.1.1 AI辅助编程的概念 2
1.1.2 AI辅助编程的应用场景 2
1.1.3 常见的几种AI编程工具 2
1.2 微信小程序开发环境搭建与基础技术准备 3
1.2.1 微信小程序开发环境搭建 3
1.2.2 基础技术准备 5
1.3 微信开发者工具的使用 6
1.3.1 创建项目 6
1.3.2 微信开发者工具界面 8
1.3.3 常用的快捷键 13
1.4 VS Code 13
1.4.1 VS Code的安装与使用 14
1.4.2 下载与安装AI编程工具插件 16
1.4.3 对AI编程工具提问的技巧 20
1.5 莫凡商城小程序项目 21
1.5.1 “我的”模块的功能 21
1.5.2 “首页”模块的功能 21
1.5.3 “购物车”模块的功能 22
1.5.4 “分类”模块的功能 22
1.6 项目实战：使用AI编程工具辅助创建莫凡商城小程序项目 22
第 2章 莫凡商城小程序项目结构 27
2.1 项目的目录树结构 27
2.1.1 框架全局文件 28
2.1.2 项目实战：使用AI编程工具辅助实现底部标签导航 29
2.1.3 工具类文件 32
2.1.4 框架页面文件 33
2.2 微信小程序逻辑层框架接口 33
2.2.1 使用App()函数注册小程序 33
2.2.2 使用Page()函数注册页面 35
2.3 微信小程序视图层 37
2.3.1 WXML 37
2.3.2 动态绑定数据 38
2.3.3 组件属性动态绑定数据 38
2.3.4 控制属性动态绑定数据 38
2.3.5 关键字动态绑定数据 39
2.3.6 运算 39
2.4 微信小程序样式渲染 40
2.4.1 尺寸单位 40
2.4.2 样式导入 41
2.4.3 内联样式 41
2.4.4 选择器 42
2.4.5 常用样式的属性 42
2.5 微信小程序条件渲染 46
2.5.1 使用wx:if判断单个组件 46
2.5.2 使用wx:if一次性判断多个组件 47
2.6 微信小程序列表渲染 47
2.6.1 使用wx:for列表渲染单个组件 47
2.6.2 使用wx:for一次性列表渲染多个组件 48
2.6.3 使用wx:key指定唯一标识符 48
2.7 项目实战：使用AI编程工具辅助实现“我的”页面 49
第3章 莫凡商城首页的静态布局设计 52
3.1 需求分析 53
3.2 视图容器组件的应用 53
3.2.1 视图容器组件view 53
3.2.2 可滚动视图容器组件scroll-view 53
3.2.3 滑块视图容器组件swiper 54
3.2.4 可移动视图容器组件movable-view 55
3.2.5 项目实战：使用AI编程工具辅助实现搜索区域布局与海报轮播 56
3.3 基础内容组件 58
3.3.1 图标组件icon 58
3.3.2 文本组件text 58
3.3.3 进度条组件progress 59
3.3.4 富文本组件rich-text 59
3.3.5 富文本编辑器editor 60
3.4 图片组件image及图片API 60
3.4.1 图片组件image 60
3.4.2 图片API 61
3.4.3 项目实战：使用AI编程工具辅助实现图书列表的静态布局 64
3.5 导航组件和导航API 66
3.5.1 页面链接组件navigator 66
3.5.2 保留当前页跳转API（wx.navigateTo()） 67
3.5.3 关闭当前页跳转API（wx.redirectTo()） 68
3.5.4 跳转到tabBar页面API（wx.switchTab()） 68
3.5.5 返回上一页API（wx.navigateBack()） 69
3.5.6 关闭所有页面，打开某个页面API（wx.reLaunch()） 69
3.5.7 导航条API 69
3.5.8 项目实战：使用AI编程工具辅助实现图书搜索功能 71
3.6 项目实战：使用AI编程工具辅助实现“更多”图书列表页面的静态布局 73
第4章 莫凡商城首页的动态绑定设计 77
4.1 微信小程序函数处理 78
4.1.1 生命周期函数 78
4.1.2 页面事件函数 79
4.1.3 页面路由管理 79
4.1.4 自定义函数 80
4.1.5 setData()函数 82
4.2 微信小程序网络请求 83
4.2.1 网络访问配置 83
4.2.2 请求数据API 86
4.2.3 文件上传API 87
4.2.4 文件下载API 89
4.2.5 项目实战：使用AI编程工具辅助实现动态获取图书列和动态渲染页面
效果 91
4.3 下拉刷新及窗口设置 93
4.3.1 下拉刷新API及事件处理函数 93
4.3.2 wx.setBackgroundColor() 95
4.3.3 wx.pageScrollTo() 96
第5章 莫凡商城的注册、登录功能 97
5.1 微信小程序表单组件 98
5.1.1 按钮组件button 98
5.1.2 多选项目组件checkbox 101
5.1.3 单选项目组件radio 103
5.1.4 输入框组件input 104
5.1.5 多行输入框组件textarea 109
5.1.6 改进表单可用性组件label 110
5.1.7 滚动选择器组件picker 112
5.1.8 滑动选择器组件slider 123
5.1.9 开关选择器组件switch 125
5.1.10 表单组件form 127
5.1.11 项目实战：使用AI编程工具辅助实现注册页面 129
5.2 微信小程序界面交互API 131
5.2.1 显示/隐藏消息提示框API 131
5.2.2 显示模态对话框API 133
5.2.3 显示/隐藏loading提示框API 134
5.2.4 显示操作菜单API 135
5.3 定时器API 136
5.4 数据缓存API 137
5.4.1 将数据缓存到本地 137
5.4.2 获取本地缓存数据 138
5.4.3 清理本地缓存数据 139
5.5 登录相关API 140
5.5.1 登录API 141
5.5.2 获取账号信息API 143
5.5.3 获取用户信息API 143
5.5.4 授权API 145
5.6 项目实战：使用AI编程工具辅助实现登录页面 148
5.7 项目实战：使用AI编程工具辅助实现从“我的”页面跳转到登录页面 150
5.8 项目实战：使用AI编程工具辅助实现修改密码页面 151
5.9 项目实战：使用AI编程工具辅助实现意见反馈页面 154
5.10 项目实战：使用AI编程工具辅助实现清除缓存功能 155
第6章 莫凡商城的商品详情页设计 157
6.1 使用AI编程工具学习在页面间传递数据 157
6.2 媒体组件及媒体API的应用 160
6.2.1 音频组件audio及音频API 160
6.2.2 视频组件video及视频API 162
6.2.3 相机组件camera及相机API 166
6.2.4 实时音视频播放组件live-player 168
6.2.5 实时音视频录制组件live-pusher 169
6.3 项目实战：使用AI编程工具辅助实现商品详情页 170
6.4 项目实战：使用AI编程工具辅助实现商品加入购物车功能 172
6.5 项目实战：使用AI编程工具辅助实现购物车页面 174
6.6 分享与转发API的应用 176
第7章 莫凡商城的获取收货地址功能设计 178
7.1 位置API 178
7.1.1 获得当前位置API、选择位置API、打开位置API 179
7.1.2 开启/停止接收位置信息API 181
7.1.3 监听实时地理位置API 181
7.2 收货地址API 182
7.3 地图组件及地图API 183
7.3.1 地图组件map 183
7.3.2 地图API 187
7.4 项目实战：使用AI编程工具辅助实现立即购买页面 188
7.5 项目实战：使用AI编程工具辅助实现收货地址列表页面 190
7.6 项目实战：使用AI编程工具辅助实现新增或编辑地址页面 192
第8章 莫凡商城的支付功能及订单详情页设计 195
8.1 支付API 196
8.2 项目实战：使用AI编程工具辅助实现支付功能 197
8.3 画布组件及画布API 199
8.4 项目实战：使用AI编程工具辅助实现支付完成页 203
8.5 项目实战：使用AI编程工具辅助实现我的订单页面 204
8.6 项目实战：实现订单详情页 206
第9章 小程序扩展应用 208
9.1 设备应用API 209
9.1.1 获得系统信息 209
9.1.2 获取网络状态 211
9.1.3 加速度计 212
9.1.4 拨打电话 212
9.1.5 扫码 212
9.1.6 剪贴板 213
9.1.7 屏幕亮度 214
9.2 文件操作API 214
9.2.1 保存文件到本地API 214
9.2.2 获取本地文件列表API 215
9.2.3 获取本地文件信息API 216
9.2.4 删除本地文件API 216
9.2.5 打开文档API 217
9.2.6 获取文件信息API 217
9.2.7 文件管理器API 218
9.3 项目实战：使用AI编程工具辅助实现图书分类页面 218
9.4 项目实战：使用AI编程工具辅助实现图书分类结果页面 220
