微信小程序开发快速入门

第1章 小程序特点与开发逻辑 1

1.1 互联网正在变得越来越“轻” 1

1.2 什么是小程序 5

1.2.1 小程序的由来 5

1.2.2 小程序的发展与展望 6

1.3 你的产品适合做小程序吗 9

1.4 小程序特色：即用即走 12

1.5 小程序与订阅号、服务号的异同 13

1.6 消息推送与传播分享 16

1.7 普通用户怎么玩转小程序 16

1.7.1 普通用户启动小程序方法 16

1.7.2 普通用户在小程序里面能做什么 17

第2章 微信小程序开发申请入门与环境搭建 18

2.1 小程序申请方法以及流程 18

2.2 小程序开发环境搭建 20

第3章 初识微信小程序：小程序的Hello World 24

3.1 小程序MINA框架介绍 24

3.2 小程序基本结构 26

3.3 微信Web开发者工具使用方法介绍 35

3.4 手把手教你做Demo——Hello World小程序 39

3.4.1 Demo的简要开发步骤 39

3.4.2 验证小程序可执行目录结构 42

3.4.3 数据与事件的绑定 44

3.5 本章要点总结 47

第4章 微信小程序入门：小程序的开发方式 48

4.1 WXML及其数据绑定 48

4.2 WXSS——小程序的CSS样式 57

4.2.1 新的尺寸单位rpx 57

4.2.2 样式导入 58

4.2.3 内联样式 59

4.2.4 选择器 59

4.3 事件 60

4.4 视图容器 63

4.4.1 view视图容器 64

4.4.2 scroll-view可滚动视图区域 64

4.4.3 swiper滑块视图容器 70

4.5 基础内容 75

4.5.1 图标组件icon 75

4.5.2 文本组件text 77

4.5.3 进度条组件progress 78

4.6 导航 81

4.7 手把手教你做Demo——简易通讯录 84

4.8 本章要点总结 93

第5章 小程序开发实战：全面掌握小程序组件 95

5.1 表单组件 95

5.1.1 按钮组件button 95

5.1.2 标签组件label 98

5.1.3 多项选择器组件checkbox 102

5.1.4 单项选择器组件radio 106

5.1.5 滚动选择器组件picker 107

5.1.6 滑动选择器组件slider 115

5.1.7 开关选择器组件switch 117

5.1.8 输入框组件input 123

5.1.9 多行输入框组件textarea 129

5.1.10 表单组件form 131

5.2 媒体组件 136

5.2.1 音频组件audio 136

5.2.2 视频组件video 140

5.2.3 图片组件image 147

5.3 地图组件map 151

5.4 画布组件canvas 155

5.5 手把手教你做Demo——用表单完善通讯录 156

5.6 本章要点总结 158

第6章 小程序API（1）：网络、媒体和缓存 159

6.1 小程序接口规范 159

6.2 网络 160

6.2.1 发起请求 160

6.2.2 上传、下载 163

6.2.3 websocket 166

6.3 媒体 170

6.3.1 图片 170

6.3.2 视频 176

6.3.3 录音 178

6.3.4 音频播放控制 179

6.3.5 音乐播放控制 180

6.3.6 音频组件控制 185

6.3.7 视频组件控制 186

6.3.8 文件 187

6.4 数据缓存 191

6.4.1 wx.setStorage（OBJECT） 192

6.4.2 wx.setStorageSync（KEY,DATA） 193

6.4.3 wx.getStorage（OBJECT） 194

6.4.4 wx.getStorageSync（KEY） 195

6.4.5 wx.getStorageInfo（OBJECT） 195

6.4.6 wx.getStorageSync（KEY） 196

6.4.7 wx.removeStorage（OBJECT） 197

6.4.8 wx.removeStorageSync（KEY） 198

6.4.9 wx.clearStorage（） 198

6.4.10 wx.clearStorageSync（） 198

6.5 手把手教你做Demo——Websocket从服务端到小程序 199

6.5.1 安装Node.js环境 199

6.5.2 新建app.js文件响应请求 201

6.5.3 编写小程序 205

6.5.4 发送GET请求 215

6.6 本章要点总结 217

第7章 小程序API（2）：位置、设备与界面设计 219

7.1 位置 219

7.1.1 wx.getLocation（OBJECT）获取位置 219

7.1.2 wx.chooseLocation（OBJECT）打开地图选择位置 221

7.1.3 wx.openLocation（OBJECT）使用微信内置地图查看位置 223

7.1.4 wx.createMapContext（mapId）地图组件控制 224

7.2 设备 226

7.2.1 wx.getNetworkType（OBJECT）获取网络类型 226

7.2.2 wx.getSystemInfo（OBJECT）获取系统信息 227

7.2.3 wx.getSystemInfoSync（）获取系统信息同步接口 228

7.2.4 wx.onAccelerometerChange（CALLBACK）监听重力感应数据 228

7.2.5 wx.onCompassChange（CALLBACK）监听罗盘数据 229

7.2.6 wx.makePhoneCall（OBJECT）拨打电话 230

7.3 界面 230

7.3.1 交互反馈 231

7.3.2 设置导航条 236

7.3.3 导航 237

7.3.4 动画 239

7.3.5 绘图 246

7.3.6 其他 255

7.4 手把手教你做Demo——小地图 255

7.5 本章要点总结 259

第8章 小程序API（3）：开放接口 261

8.1 登录 261

8.1.1 wx.login（OBJECT） 261

8.1.2 wx.checkSession（OBJECT） 264

8.1.3 用户数据的签名验证和加解密 265

8.2 用户信息 268

8.2.1 wx.getUserInfo（OBJECT） 268

8.2.2 UnionID机制 270

8.3 微信支付 270

8.4 客服消息 272

8.4.1 接收消息和事件 272

8.4.2 发送客服消息 276

8.4.3 临时素材接口 277

8.5 分享 279

8.6 获取二维码 280

8.7 手把手教你做Demo——简易登录页 281

8.8 本章要点总结 285