从零开始学微信小程序开发
  • 推荐3
  • 收藏6
  • 浏览3.3K

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

高洪涛 , 张启玉 , 刘刚 (作者)  刘舫 (责任编辑)

  • 书  号:978-7-121-30911-3
  • 出版日期:2017-02-01
  • 页  数:288
  • 开  本:16(170*240)
  • 出版状态:上市销售
  • 维护人:张月萍

相关图书

树莓派开始,玩转Linux

张腾飞 (作者)

本书以树莓派基础工具,讲解Linux操作系统。树莓派是近年来流行的微型电脑,能用于各种有趣的硬件开发。树莓派中安装了Linux系统,可以充当操作系统的学习平台。...

¥69.00

微信开发深度解析:微信公众号、小程序高效开发秘籍

苏震巍 (作者)

本书以深度剖析Senparc.Weixin SDK框架的设计思想和使用方法为主干,全面介绍了开发微信公众号(包含了订阅号、服务号和小程序)所需的关键技能,包括了...

¥99.00

实战微信小程序:JavaScript、WXML与Flexbox综合开发

于连林 (作者)

本书从零开始介绍微信小程序开发,主要内容包括微信小程序介绍、微信小程序开发环境介绍、JavaScript语法、WXML和WXSS语法、小程序开发基础、FlexB...

¥49.00

知晓程序:微信小程序入门指南

郑裕耿 (作者)

本书是一本分析小程序生态、解读小程序产品设计与开发的入门图书。全书共 9 章,全面讲解了小程序的基本知识、大家如何看待小程序、小程序对行业的影响、小程序对开发者...

¥49.00

微信小程序开发零基础入门

薛淑英 (作者)

微信小程序是一种最新的App替代品,其定位是在微信公众号的生态链中,使用微信本身作为应用平台,无须更新和下载,开箱即用。本书由浅入深、循序渐进,使零基础的读者能...

¥59.00

嵌入式Linux驱动开发教程

贾燕枫 (作者)

本书结合大量实例,在基于ARM Cortex-A9四核处理器Exynos4412的硬件教学平台和PC机上,全面详细讲解了Linux设备驱动开发。主要内容包含开发...

¥69.00
《从零开始学微信小程序开发》共分3篇12章,第1篇介绍微信小程序的基础知识,包括微信小程序开发工具、微信小程序架构分析;第2篇介绍微信小程序的常用模块,通过一些小案例详细介绍了微信小程序提供的各种组件的使用、API函数的使用,访问手机硬件的函数;第3篇是综合案例,以微天气、微音乐这两个完整案例的开发,演示微信小程序开发的全过程。
《从零开始学微信小程序开发》内容由浅入深,每个知识点都通过小案例进行演示,适合希望通过微信小程序开发应用的读者,具有HTML 5基础知识的读者都可阅读本书。
微信小程序能帮你发掘800000000用户的价值,打造自己的商业帝国!
前言
2016年9月22日凌晨,微信官方正式推出应用号“小程序”内测功能。
那么,“小程序”是什么?看看腾讯副总裁、微信创始人是怎么说的吧,如下图所示是张小龙发布的信息。
第一批参与小程序测试的包括大众点评、猫眼电影、海南航空等日常生活服务类企业,以微信官方邀请和企业申请为主,共发出了200封应用号内部公测邀请。
除了官方邀请的测试用户,普通的开发人员怎么办?微信提供了一套开发工具,普通用户不用申请AppID,也可在电脑中学习、模拟小程序的大部分功能。
2016年11月4日,微信小程序正式公测,企事业单位可以申请公测账号了(个人用户暂时还不能申请),有了这个公测账号,开发人员不仅可以在电脑中模拟小程序,而且可以将开发代码发布出去供其他用户使用。
2017年1月9日,微信小程序正式上线,只要将微信更新到最新版本(V6.5.3),即可通过线下扫码、微信搜索、公众号关联、好友分享、历史记录等五种方式体验微信小程序。
为了帮助广大初学者快速学习微信小程序的开发,本书从基础开始,逐步介绍微信小程序开发中的相关知识。
全书共分3篇12章,第1篇介绍微信小程序的基础知识,包括微信小程序开发工具、微信小程序架构分析。包括第1章和第2章的内容。
第1章初识微信小程序,首先介绍了微信小程序开发工具的下载、安装和使用,然后使用该开发工具创建了第一个微信小程序,并在电脑模拟器中进行查看,最后发布到手机微信中查看运行效果。
第2章对微信小程序的架构进行分析,从小程序的目录结构、文件名的约定开始,详细介绍小程序的配置文件、页面描述文件、页面样式文件和逻辑层文件的相关知识。
第2篇介绍微信小程序的常用模块,通过一些小案例详细介绍了微信小程序提供的各种组件的使用、API函数的使用,访问手机硬件的函数。包括第3章至第10章的内容。
第3章介绍快速开发UI界面,以一个加法计算器的实际案例介绍了小程序UI设计中常用组件的使用方法。
第4章美化UI界面,继续修改上一章的计算器案例,本章中使用其他一些UI组件来设计计算器,使计算器的使用更方便。在这一章进一步学习了更多的小程序UI组件使用。
第5章保存数据到本地,介绍了小程序中将数据保存到本地缓存,从本地缓存中读取数据的方法,继续修改第4章的计算器程序,增加了查看历史记录的功能。
第6章在小程序中设计一个旅行计划调查表单,学习小程序表单控件的使用。
第7章介绍微信小程序的交互反馈功能,包括等待提示信息、弹出框的使用、底部弹出菜单的使用等相关内容。
第8章介绍在小程序中使用多媒体功能的相关知识,包括使用audio组件和使用audio API播放音乐,使用video组件播放视频等相关内容。
第9章介绍小程序与后端进行交互的相关知识,首先介绍了小程序提供的网络访问API,然后编写了手机归属地查询小案例,演示小程序网络访问API的使用方法。
第10章介绍小程序使用手机硬件设备的相关知识,包括拍照、录音、获取地理位置、获取网络状态、获取系统信息等相关内容。
第3篇是综合案例,以微天气、微音乐这两个完整案例的开发,演示了微信小程序的全过程。第11章通过调用天气预报API编写出一个综合案例——微天气,第12章通过调用QQ音乐API编写出一个综合案例——微音乐。通过这2个综合案例,读者可进一步巩固本书前10章中介绍的相关知识。
本书内容由浅入深,每个知识点都通过小案例进行演示,适合希望通过微信小程序开发应用的读者,具有HTML 5基础知识的读者都可阅读本书。
由于微信小程序推出的时间短,官方推出的开发工具更新较快,随着时间的推移,本书介绍的一些知识点在新版本中可能会有更改。如果本书案例运行时出现错误提示时,读者可查一下官方文档,根据最新内容修改后即可正常运行。
由于时间短,加之笔者水平有限,书中难免有疏漏之处,敬请读者朋友批评指正。
编者
2017年1月

目录



目录



第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



第3篇 微信小程序综合案例
第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

读者评论

  • 我就算直接把源码复制到新建的项目里,其他的错误都没有,但是仍然不能点击歌曲后播放歌曲,想知道为什么但是知识所限好久都没弄明白,作者指点一下。

    yan发表于 2017/11/1 14:42:02
    • 你好 请问这个问题解决了吗

      lalala发表于 2018/2/9 11:00:12
  • 有两个疑问一直得不到解决:
    1:按着源码来编译,把合法域名的问题也搞定了,编译也没有其他问题,但就是点击歌曲播放后,歌曲不能跳转到播放页面进行播放。
    2.虽然可以正常编译和加载图片,但是播放页面和搜索页面一直提示渲染层网络层错误,我也不知道该怎么解决这个问题

    希望作者可以解答一下我的疑惑,不然都不知道怎么办了

    yan发表于 2017/10/26 9:50:47
  • 您好,我在运行综合案例里的微天气的时候,出现了错误。提示信息如下,这该怎么解决呢?
    Thu May 11 2017 20:36:35 GMT+0800 (中国标准时间) 合法域名校验出错
    如若已经在管理后台更新域名配置,请刷新项目配置后重新编译项目,操作路径:“项目-配置信息-刷新”
    http://wthrcdn.etouch.cn/weather_mini?city= 不在以下合法域名列表中,请参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

    hua1365发表于 2017/5/11 20:45:30
    • 产生原因是因为发起了wx.request请求
      而请求的域名没有在微信公众平台后台设置。

      设置步骤如下:
      1. 以管理员身份登录微信小程序后台
      地址:http://mp.weixin.qq.com


      2. 将要请求的域名设置为请求合法域名
      注:request 合法域名可以填写多个,如果已经有其它的合域名了,新增一个就行了

      request安全域名保存并提交后,微信会有一段时间的缓存,大概10多分钟后,request合法域名生效

      张月萍发表于 2017/5/15 11:28:28
  • 我购买了这个本书,请问这个本书里的源码在什么地方下载?谢谢

    轩宇网工作室发表于 2017/4/7 18:09:49
    • 读者朋友你好,你所提出的问题,小编已经转告负责此书的编辑,编辑近期会予以回复。

      博文小编发表于 2017/4/10 17:09:24
    • 读者您好,请从本页的“下载资源”栏目下载部分源码

      张月萍发表于 2017/4/10 17:24:26
    • @张月萍 好的,终于找到了,谢谢

      轩宇网工作室发表于 2017/4/17 19:47:13

相关博文

  • 动手开发一个名为“微天气”的微信小程序(上)

    动手开发一个名为“微天气”的微信小程序(上)

    管理员账号 2017-03-06

    小编说:在智能手机软件的装机量中,天气预报类的APP排在比较靠前的位置。说明用户对天气的关注度很高。因为人们无论是工作还是度假旅游等各种活动都需要根据自然天气来安排。跟着本文开发一个“微天气”小程序,方便微信网友随时查看天气。接下来两天...

    管理员账号 2017-03-06
    198 1 1 0
  • 动手开发一个名为“微天气”的微信小程序(下)

    动手开发一个名为“微天气”的微信小程序(下)

    管理员账号 2017-03-07

    小编说:上期我们介绍了“微天气”的API与界面代码编写,今天我们继续介绍逻辑层代码以及查询代码的编写。文选自《从零开始学微信小程序开发》。 编写逻辑层代码 由于在index.js中还没有设置初始化数据,所以在界面中看不到具体的数据,从...

    管理员账号 2017-03-07
    558 1 1 0