从零开始学微信小程序开发

本文目录结构

内容简介

《从零开始学微信小程序开发》共分 3 篇 12 章，第 1 篇介绍微信小程序的基础知识，包括微信小程序开发工具、微信小程序架构分析；第 2 篇介绍微信小程序的常用模块，通过一些小案例详细介绍了微信小程序提供的各种组件的使用、API 函数的使用，访问手机硬件的函数；第 3 篇是综合案例，以微天气、微音乐这两个完整案例的开发，演示微信小程序开发的全过程。

《从零开始学微信小程序开发》内容由浅入深，每个知识点都通过小案例进行演示，适合希望通过微信小程序开发应用的读者，具有 HTML 5 基础知识的读者都可阅读《从零开始学微信小程序开发》。

作者简介

高洪涛，毕业于沈阳工业大学，硕士，现就职于中国刑事警察学院，IEEE 会员，计算机学会会员。从事软件开发多年，最初使用 Java 语言，目前主攻 Android 系统开发。从 2013 年开始对微信公共平台进行研究，为多家公司开发过商用微信公共平台，收到甲方好评。

目录

第 1 篇　微信小程序基础

• 第 1 章　初识微信小程序 2
• 1.1　微信小程序开发工具 2
• 1.1.1　获取开发工具 2
• 1.1.2　安装开发工具 3
• 1.2　开发第一个微信小程序 5
• 1.2.1　获取微信小程序的 AppID 5
• 1.2.2　创建项目 5
• 1.2.3　微信小程序主要文件 8
• 1.3　认识开发工具 9
• 1.3.1　开发工具界面 9
• 1.3.2　程序调试 9
• 1.3.3　代码编辑 15
• 1.4　查看小程序效果 19
• 1.4.1　在开发工具中查看效果 19
• 1.4.2　在手机中查看效果 19

第 2 章　微信小程序架构分析 21

• 2.1　微信小程序框架结构 21
• 2.1.1　目录结构 22
• 2.1.2　主体文件 23
• 2.1.3　页面文件 23
• 2.1.4　其他文件 24
• 2.2　配置文件详解 24
• 2.2.1　主配置文件 app.json 24
• 2.2.2　页面配置文件 29
• 2.3　逻辑层 js 文件 29
• 2.3.1　用 App 函数注册小程序 30
• 2.3.2　用 Page 函数注册页面 31
• 2.4　页面描述文件 wxml 34
• 2.4.1　初识组件 34
• 2.4.2　数据绑定 35
• 2.4.3　条件渲染 39
• 2.4.4　列表渲染 40
• 2.4.5　使用模板 42
• 2.4.6　引用其他页面文件 45
• 2.5　页面的事件 46
• 2.5.1 事件类型 46
• 2.5.2 事件绑定 47
• 2.5.3 事件对象 47
• 2.6　页面样式文件 wxss 50
• 2.6.1　尺寸单位 50
• 2.6.2　样式导入 50

第 2 篇　微信小程序常用模块

• 第 3 章　快速开发 UI 界面 54
• 3.1　认识小程序的组件 54
• 3.1.1 小程序的组件 54
• 3.1.2　组件的使用 56
• 3.1.3　组件的通用属性 57
• 3.2　加法计算器 59
• 3.2.1 认识 view 组件 60
• 3.2.2 认识 input 组件 62
• 3.2.3 认识 button 组件 64
• 3.2.4 计算机器界面 UI 69
• 3.2.5 编写计算代码 71
• 3.2.6 测试加法计算器 72
• 3.3 另一种输入数据的方式 73
• 3.3.1 认识 slider 组件 74
• 3.3.2 用 slider 输入整数 74

第 4 章　美化 UI 界面 76

• 4.1 计算器功能需求 76
• 4.2 设计计算器界面 77
• 4.2.1 计算器小程序布局设计 77
• 4.2.2 搭建计算器小程序开发框架 77
• 4.2.3 用组件实现布局 78
• 4.2.4 设计组件的样式 79
• 4.3 编写计算器代码 84
• 4.3.1 初始化数据 84
• 4.3.2 编写按钮代码 88
• 4.3.3 编写计算代码 89
• 4.3.4 测试计算器小程序 92
• 4.4 美化计算器界面 93
• 4.4.1 认识 icon 组件 93
• 4.4.2 用 icon 美化计算器界面 94
• 4.4.3 小程序提供的 icon 组件 94

第 5 章　保存数据到本地 97

• 5.1 保存计算历史界面设计 97
• 5.1.1 认识 switch 组件 97
• 5.1.2 switch 组件简单案例 98
• 5.2 修改计算器 UI 99
• 5.2.1 添加 switch 组件 99
• 5.2.2 获取 switch 的选择 100
• 5.3 保存计算到本地缓存 101
• 5.3.1 保存数据的 API 接口函数 101
• 5.3.2 本地缓存计算过程 103
• 5.4 从本地缓存读取数据 108
• 5.4.1 显示历史记录的界面设计 108
• 5.4.2 页面切换的相关接口函数 110
• 5.4.3 获取本地缓存数据 111
• 5.5 保存多条历史记录 112
• 5.5.1 使用数组保存多条历史记录 113
• 5.5.2 清理本地缓存 115

第 6 章　旅行计划调查 116

• 6.1 用 form 组件收集信息 116
• 6.1.1 认识 form 组件 116
• 6.1.2 表单的提交 118
• 6.1.3 表单的重置 120
• 6.2 设计旅行计划调查 121
• 6.3 选择性别（单选） 122
• 6.3.1 认识 radio 和 radio-group 组件 122
• 6.3.2 用 radio 组件列出性别 122
• 6.3.3 获取性别内容 124
• 6.3.4 根据数据生成 radio 组件 125
• 6.4 选择想去的国家（多选） 126
• 6.4.1 认识 checkbox 和 checkbox-group 组件 127
• 6.4.2 国家名称的多选 127
• 6.4.3 获取选中的数据 128
• 6.5 选择日期和时间 129
• 6.5.1 认识 picker 组件 129
• 6.5.2 picker 组件小案例 131
• 6.5.3 收集出发日期 135
• 6.5.4 获取 picker 选择的日期 135
• 6.6 输入建议 137
• 6.7 广告轮播 138
• 6.7.1 认识 swiper 组件 139
• 6.7.2 swiper 组件案例 139
• 6.7.3 测试案例 143

第 7 章　微信小程序的交互反馈 144

• 7.1 等待提示 144
• 7.1.1 认识 loading 组件 145
• 7.1.2 修改旅行计划调查表单 148
• 7.2 用 toast 显示提示信息 150
• 7.3 使用新版 API 显示提示 153
• 7.3.1 接口函数 wx.showToast 153
• 7.3.2 显示 loading 提示信息 153
• 7.3.3 显示 toast 提示信息 155
• 7.4 用 modal 组件显示弹出框 156
• 7.4.1 认识 modal 组件 157
• 7.4.2 修改弹出框 159
• 7.4.3 在弹出框中输入内容 160
• 7.5 使用新版 API 显示弹出框 163
• 7.6 底部弹出菜单 164
• 7.6.1 认识 action-sheet 组件 165
• 7.6.2 使用新版 API 显示底部菜单 168

第 8 章　用多媒体展示更多 171

• 8.1 用 audio 组件播放音乐 171
• 8.1.1 认识 audio 组件 171
• 8.1.2 控制 audio 组件 173
• 8.2 使用 audio API 播放音乐 175
• 8.2.1 audio API 简介 175
• 8.2.2 audio API 播放音乐示例 177
• 8.3 用 video 组件播放视频 180
• 8.3.1 认识 video 组件 180
• 8.3.2 获取视频上下文 182
• 8.3.3 给视频添加弹幕 182

第 9 章　与后台交互 187

• 9.1 网络访问 API 187
• 9.1.1 认识 wx.request 接口函数 188
• 9.1.2 获取网上信息 188
• 9.2 手机归属地查询 191
• 9.2.1 了解手机归属地查询接口 191
• 9.2.2 编写小程序代码 195
• 9.2.3 调试修改小程序 198

第 10 章　使用手机设备 203

• 10.1 拍照 203
• 10.1.1 了解 wx.chooseImage 函数 203
• 10.1.2 编写实例代码 204
• 10.1.3 在电脑端测试选择照片 206
• 10.1.4 在手机端测试选择照片 207
• 10.2 录音 210
• 10.2.1 认识 wx.startRecord 函数 210
• 10.2.2 认识 wx.stopRecord 函数 210
• 10.2.3 认识 wx.playVoice 函数 210
• 10.2.4 编写录音实例 211
• 10.2.5 测试录音实例 213
• 10.3 获取地理位置 214
• 10.3.1 认识 wx.openLocation 函数 214
• 10.3.2 认识 wx.getLocation 函数 215
• 10.3.3 获取地理位置实例 215
• 10.3.4 在电脑中测试获取地理位置实例 217
• 10.3.5 在手机中测试获取地理位置实例 219
• 10.4 获取网络状态 220
• 10.5 获取系统信息 223

第 11 章　综合案例——微天气 228

• 11.1 天气预报 API 228
• 11.1.1 中国天气网天气预报接口 229
• 11.1.2 中华万年历的天气预报接口 234
• 11.2 界面设计 236
• 11.3 编写界面代码 236
• 11.3.1 创建项目 237
• 11.3.2 编写界面代码 237
• 11.3.3 编写界面样式代码 239
• 11.4 编写逻辑层代码 242
• 11.4.1 编写数据初始化代码 242
• 11.4.2 获取当前位置的城市名称 244
• 11.4.3 根据城市名称获取天气预报 246
• 11.4.4 查询天气预报 248

第 12 章　综合案例——微音乐 250

• 12.1 QQ 音乐 API 250
• 12.1.1 认识易源接口网站 250
• 12.1.2 QQ 音乐接口 251
• 12.2 界面设计 255
• 12.3 创建项目 257
• 12.3.1 准备资源 257
• 12.3.2 创建项目 257
• 12.3.3 创建配置文件 259
• 12.4 音乐分类列表 260
• 12.4.1 开发页面文件 260
• 12.4.2 开发页面样式文件 261
• 12.4.3 开发页面逻辑代码 261
• 12.5 音乐列表 263
• 12.5.1 开发页面文件 263
• 12.5.2 开发页面样式文件 264
• 12.5.3 开发页面逻辑代码 265
• 12.6 播放音乐 267
• 12.6.1 开发页面文件 267
• 12.6.2 开发页面样式文件 268
• 12.6.3 开发页面逻辑代码 269
• 12.7 搜索音乐 271
• 12.7.1 开发页面文件 271
• 12.7.2 开发页面样式文件 272
• 12.7.3 开发页面逻辑代码 273