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

🌙
手机阅读
本文目录结构

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

很简单:只需掌握HTML5基础知识,即可跟随本书进行学习

很丰富:包括API、多媒体、网络、手机硬件控制等内容

很图解:知识点以易懂的图示进行讲解,清晰明了地阐述相应知识

很实战:针对每个知识点,都以案例为引导,帮助读者动手操作

内容简介

《从零开始学微信小程序开发》共分 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

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang