微信小程序开发实战

第1章 微信小程序申请及管理后台基本使用 1

1.1 微信小程序是什么 1

1.2 小程序申请注册流程 2

1.3 小程序管理后台基本操作 4

第2章 小程序开发调试模式 8

2.1 小程序后台调试模式概述 8

2.2 云服务器调试模式 11

2.3 本地调试模式 18

2.4 端口映射模式 18

第3章 项目结构和目录结构 22

3.1 项目结构 22

3.2 小程序启动执行流程 24

3.3 QuikStart代码解读 27

第4章 页面布局设计 29

4.1 微信小程序UI设计规范 29

4.1.1 友好礼貌 29

4.1.2 清晰明确 29

4.1.3 便捷优雅 36

4.1.4 统一稳定 37

4.1.5 视觉规范 38

4.2 小程序组件库的使用 39

4.3 小程序页面布局 42

4.3.1 Flexbox模型 42

4.3.2 布局示例 47

第5章 页面组件 49

5.1 MVVM前端架构 49

5.2 视图容器组件 50

5.2.1 视图区view组件 50

5.2.2 可滚动视图区scroll-view组件 51

5.2.3 滑块视图容器swiper 52

5.3 基础内容组件 52

5.3.1 icon图标组件 52

5.3.2 text组件 53

5.3.3 progress进度条组件 53

5.4 表单组件 53

5.4.1 按钮button 53

5.4.2 checkbox及checkbox-group 54

5.4.3 form表单组件 54

5.4.4 input输入框组件 55

5.4.5 label组件 55

5.4.6 滚动选择器picker 56

5.4.7 picker-view选择器 59

5.4.8 radio单选框 60

5.4.9 slider滑动选择器 60

5.4.10 switch开关选择器 61

5.4.11 textarea多行文本输入框组件 62

5.5 导航组件 62

5.6 媒体组件 63

5.6.1 音频组件audio 63

5.6.2 视频组件video 65

5.6.3 图片组件image 66

5.7 地图组件 67

5.8 画布组件canvas 70

5.9 客服会话组件 70

第6章 逻辑层处理 72

6.1 什么是小程序逻辑层 72

6.1.1 小程序响应式实现原理 72

6.1.2 如何实现变化追踪 72

6.2 小程序配置 73

6.2.1 页面文件路径配置 73

6.2.2 窗口样式配置 73

6.2.3 选项卡配置 75

6.2.4 调试开关 76

6.2.5 网络超时配置 77

6.3 逻辑层处理 77

6.3.1 App逻辑层 77

6.3.2 Page页面逻辑层 78

第7章 视图层 80

7.1 什么是视图层 80

7.2 wxml文件 80

7.2.1 数据绑定 80

7.2.2 条件渲染 81

7.2.3 列表渲染 82

7.2.4 模板 82

7.2.5 事件 82

7.2.6 文件引用 84

7.2.7 wxss样式文件 84

第8章 搭建Maven+Spring+SpringMVC+MyBatis后台环境 86

8.1 安装Maven 86

8.2 在MyEclipse中集成Maven 87

8.2.1 安装Maven插件 87

8.2.2 配置Maven插件 88

8.3 集成Spring MVC,MyBatis及log4j 89

第9章 网络请求及文件上传下载 100

9.1 网络请求接口request 100

9.2 文件上传接口uploadFile 104

9.2.1 设计文件上传界面 104

9.2.2 小程序陷阱提醒 106

9.2.3 文件上传 108

9.3 文件下载接口downloadFile 110

9.3.1 预备知识 110

9.3.2 文件下载接口的使用 112

第10章 小程序WebSocket功能 116

10.1 什么是WebSocket 116

10.2 WebSocket使用 117

10.2.1 建立WebSocket连接 117

10.2.2 WebSocket服务器端开发 118

第11章 媒体、数据及设备操作 125

11.1 图片操作 125

11.1.1 选择图片路径 125

11.1.2 预览图片 127

11.1.3 获取图片信息 128

11.2 录音操作 129

11.3 音频播放 130

11.3.1 播放本地音频文件 130

11.3.2 播放录制的音频 132

11.4 音乐播放 133

11.5 控制音频组件 135

11.6 选择视频 136

11.7 文件操作 137

11.8 数据缓存 138

11.9 获取位置 139

11.10 打开位置 140

11.11 查看位置 141

11.12 地图组件控制 142

11.13 设备操作 142

11.13.1 获取系统信息 142

11.13.2 拨打电话和扫码 143

第12章 界面交互接口及开放接口 145

12.1 交互反馈 145

12.1.1 消息提示框 145

12.1.2 显示模态弹窗wx.showModal 146

12.1.3 操作菜单 147

12.2 应用内导航 148

12.3 动画创作 149

12.4 动画分组 151

12.5 绘图功能 152

12.6 开放接口 153

12.6.1 登录 153

12.6.2 会话密匙 155

12.7 数据加密 157

12.8 获取用户信息 157

12.9 微信支付 159

12.10 模板消息 160

12.10.1 获取访问凭证 161

12.10.2 发送模板消息 163

12.11 客服消息 168

12.12 分享功能 168

12.13 页面二维码 169

第13章 项目实战——我爱看电影 170

13.1 需求分析 170

13.2 数据库设计 170

13.3 页面设计 171

13.4 功能实现 171

13.4.1 小程序后台连接数据库 171

13.4.2 首页设计 176

13.4.3 首页逻辑层 178

13.4.4 首页后台实现 179

13.4.5 详情页设计 184

13.4.6 详情页后台实现 184

第14章 项目实战——日常事项助手 187

14.1 项目基础知识准备 187

14.1.1 ES6基础知识 187

14.1.2 工具类 194

14.1.3 promise函数 195

14.2 实现思路 196

14.2.1 日期 196

14.2.2 存储 197

14.3 编码 197

14.3.1 日历 197

14.3.2 年月选择picker组件 201

14.3.3 事项存储 202