产品特色

编辑推荐

★微信公众号+Web页面，让公众号更强大、更多彩

★微信JSSDK+HTML5，让移动Web开发与微信结合轻而易举

★本书从实战出发，揭秘公众号与HTML5混合模式

★内容全面、案例丰富、轻松上手

内容简介

　　2017年，微信已经全面支持公众平台内的网页开发，并且提供了网页开发样式库、JSSDK库和网页内支付、网页调试工具，Web开发人员可以利用这些功能开发出更多、更好、更炫的微信内应用。本书立志于帮助微信开发者更好地学习微信中的网页开发和JSSDK库。

　　本书涵盖了微信网页开发的所有API案例实战以及所有样式库。全书分为13章，第1~2章介绍了不同类型微信公众号的区别和微信内网页JSSDK的开发环境；第3~9章介绍了微信开放的所有API，并提供了贴近现实的实例；第10章通过实例演示了微信提供的网页样式；第11~12章利用微信JSSDK+HTML5技术实现了两个大的项目应用；后一章介绍一些微信开发的技巧及问题。

　　本书适合所有微信开发人员使用，尤其适合目前从事Web开发工作的人员。本书定位基础，用案例结合API应用，是目前市场上仅有的一本介绍微信网页结合HTML5开发的书。

作者简介

席新亮

HTML5、javaScript技术爱好者，热衷于HTML5 CSS 3 Node.js等前沿技术，写过HTML5游戏，搞过Web，在实践中，积累了大量经验。著有《超实用的JavaScript代码段》一书。新浪微博@席新亮HTML5，欢迎大家跟我交流。

目录

第1章 认识微信公众平台 1
1．1 微信公众平台账号分类 1
1．1．1 订阅号 2
1．1．2 服务号 2
1．1．3 企业号 4
1．1．4 小程序 4
1．2 微信公众号申请流程 5
1．3 微信公众号的认证 9
1．4 公众号设置 10
1．5 成为微信开发者 10
1．5．1 通过公众号 10
1．5．2 通过测试号 12
1．6 公众号的安全中心 13
1．7 本章小结 14

第2章 搭建网页JSSDK开发环境 15
2．1 JSSDK介绍 15
2．2 部署JSSDK 17
2．2．1 绑定域名 17
2．2．2 引入JS文件 18
2．2．3 通过wx．config接口验证JSSDK权限 18
2．3 使用SAE部署测试号的JSSDK 28
2．3．1 在SAE中创建应用 28
2．3．2 上传测试代码 31
2．3．3 绑定JS接口 32
2．3．4 针对SAE不支持读写操作的处理――Memcached 34
2．3．5 在公众号中测试效果 37
2．4 JSSDK的调试工具 38
2．5 JSSDK的主要功能参考列表 38
2．6 一些其他基础入门必知的知识点 41
2．7 本章小结 41

第3章 JSSDK网页开发的基础接口和分享接口 42
3．1 基础接口的作用 42
3．1．1 任何开发都要从基础接口开始 42
3．1．2 判断当前客户端版本是否支持指定JS接口 42
3．2 分享接口的作用 44
3．2．1 分享接口有什么好处 44
3．2．2 获取微信的分享接口 44
3．3 实例：微信分享一个网页到朋友圈 47
3．4 常见问题 51

第4章 JSSDK的图像处理 52
4．1 认识图像接口 52
4．1．1 从手机相册中选图 52
4．1．2 预览图片 55
4．1．3 上传图片 56
4．1．4 下载图片 59
4．2 实例：从手机相册中选择照片然后分享 61
4．2．1 项目需求 61
4．2．2 需求分解 61
4．2．3 代码实现 62
4．3 常见问题 65

第5章 JSSDK的音频处理 66
5．1 音频接口 66
5．1．1 开始录音 66
5．1．2 停止录音 67
5．1．3 监听录音自动停止 68
5．1．4 播放语音 68
5．1．5 暂停播放 70
5．1．6 停止播放 71
5．1．7 监听语音播放完毕 71
5．1．8 上传语音 72
5．1．9 下载语音 74
5．2 常见问题 75

第6章 JSSDK的界面操作 76
6．1 界面操作 76
6．1．1 关闭当前网页窗口 76
6．1．2 批量隐藏功能按钮 77
6．1．3 批量显示功能按钮 78
6．1．4 隐藏所有非基础按钮 80
6．1．5 显示所有功能按钮 80
6．2 常见问题 81

第7章 JSSDK的地理位置 82
7．1 地理位置 82
7．1．1 获取地理位置 82
7．1．2 使用微信内置地图查看位置 85
7．2 常见问题 87

第8章 JSSDK的智能操作与微信支付 88

8．1 智能接口――识别音频并返回识别结果 88
8．2 微信扫一扫 90
8．3 设备信息――获取网络状态接口 92
8．4 微信支付 93
8．4．1 微信支付公众平台申请流程 94
8．4．2 完成账户验证 95
8．4．3 设置API秘钥 96
8．4．4 下载API证书 98
8．4．5 微信支付的开发配置 99
8．4．6 微信支付测试 99
8．5 常见问题 102

第9章 JSSDK的微信商店 104
9．1 微信小店 104
9．2 微信卡券 105
9．2．1 批量添加卡券 105
9．2．2 调用适用于门店的卡券列表并获取用户选择列表 107
9．2．3 查看微信卡包中的卡券 108
9．3 常见问题 109

第10章 微信网页开发样式库 110
10．1 认识WeUI 110
10．1．1 WeUI的特色 110
10．1．2 安装WeUI 111
10．1．3 使用WeUI做一个欢迎界面 113
10．2 使用表单 114
10．2．1 按钮（Button） 114
10．2．2 表单输入（Input） 117
10．2．3 列表（List） 121
10．2．4 滑块（Slider） 122
10．2．5 上传（Uploader） 124
10．3 使用基础组件 128
10．3．1 九宫格（Grid） 128
10．3．2 进度条（Progress） 130
10．4 使用导航组件 133
10．5 网页其他样式 135
10．6 常见问题 136

第11章 实战案例1：中国好友挑战赛（HTML 5混编） 137
11．1 案例概述 137
11．2 客户需求 137
11．2．1 首页 137
11．2．2 男生游戏的逻辑 139
11．2．3 女生游戏的逻辑 142
11．2．4 分享页面 147
11．3 实现代码及分析 148
11．3．1 首页模块 148
11．3．2 参加女生组模块 164
11．3．3 参加男生组模块 198
11．4 案例总结 215

第12章 实战案例2：LBS服务获取用户位置 216
12．1 案例概述 216
12．2 实现代码及分析 216
12．3 案例总结 224

第13章 微信JSSDK相关开发技巧及问题 225
13．1 判断微信浏览器 225
13．2 微信浏览器不支持打开App Store页面 226
13．3 一些提示码的问题 228
13．3．1 提示码：invalid url domain 228
13．3．2 提示码：invalid signature 229
13．3．3 提示码：the permission value is offline verifying 229
13．3．4 提示码：permission denied 229
13．3．5 提示码：function not exist 229

附录A JS-SDK使用权限签名算法 230
附录B 所有JS接口列表 233
附录C 所有菜单项列表 243
附录D 卡券扩展字段及签名生成算法 245

精彩书摘

1.1.2 服务号

“服务号”的目的是为用户提供服务信息，权限如下：

l 1个月内（自然月）仅可以群发4条信息。

l 发送给订阅者（粉丝）的信息，会直接显示在微信好友对话列表中，不会像订阅号一样被折叠在一个文件夹中，如图1.2所示。

说明：服务号申请需要提交企业或组织机构的相关信息。

服务号与订阅号在功能上的具体区别参见图1.3。

1.1.3 企业号

企业号是“微信公众平台”的一种创新，目标是帮助企业、学校、政府机关及任何组织机构，打通横向、纵向信息流，建立上下游伙伴、内部员工之间的连接，增加协同效率，降低沟通成本，高效的运作。

微信企业号与前两个公众号最主要的区别是，只有限定范围内的用户才可以关注对应的企业号，使用企业号发送的信息数量几乎不受限制。

企业号也显示在微信的首页中，不会像订阅号一样被折叠，如图1.4所示。

1.1.4 小程序

微信在2017年1月9日开放了小程序，从其名字就可以看出来，这是一个支持快速注册、快速开发、快速使用、快速离开的程序。小程序最大的特色就是可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

小程序在微信的“发现”栏最下角，打开后会显示曾经使用过的小程序，也可以通过搜索栏搜索其他小程序，如图1.5所示。

1.2 微信公众号申请流程

既然微信公众号这么有用，那么作为使用者及开发者如何去申请注册呢？图1.6给出了一个简易的申请步骤。

为了方便读者操作，下面列出详细的步骤：

（1）https://mp.weixin.qq.com/cgi-bin/readtemplate?t=register/step1_tmpl〈=zh_CN，在浏览器中输入这个链接地址，如图1.7所示。然后输入有效邮箱、密码及验证码，最后勾选“我同意并遵守《微信公众平台服务协议》”复选框，单击“注册”按钮。

（2）因为上一步是用邮箱注册的，所以注册后，微信会提示您登录邮箱进行激活，如图1.8所示。

此时登录你第（1）步填写的邮箱，会收到一封激活邮件，然后单击激活链接，如图1.9所示。

（3）选择账号类型，如图1.10所示。笔者选择“订阅号”演示流程（注意，选择公众号类型后不可更改）。

（4）选择账户类型后直接进入信息登记页面，选择主体类型，笔者选择“个人”，如图1.11所示。

选择“个人”或“企业”后，直接出现信息填写页面，目前微信主推微信支付，已经把微信支付捆绑为公众号的注册条件了，如图1.12所示。

（5）填写信息正确之后，进入填写公众号信息页面，填写的账号名称要合法，不能重复，填写完毕之后即可申请成功，当然此时还需要微信管理员审核。如图1.13所示。

1.3 微信公众号的认证

微信的JSSDK接口开发不是所有公众号都可以使用的，这需要不同的权限，例如自定义菜单、高级功能接口（多客服）这些接口就需要被认证过的公众号才可以使用。

目前“微信认证”暂时不支持主体类型是“个人”类型的，如果读者朋友有企业的账号可以申请认证。登录微信公众号后，单击左侧列表中的“微信认证”就可以认证公众号了。如果微信认证通过，会显示如图1.14所示的界面。

1.4 公众号设置

成功注册一个公众号之后，需要对公众号进行一些基本的设置。登录公众号后，单击左侧列表中的“公众号设置”，打开公众号的设置页面，这里主要包括“账号详情”与“功能设置”两项，设置都比较简单。要特别说明的是，在“功能设置”中，有一个使用JSSDK需要设置的“JS接口安全域名”（在第2章会介绍），如图1.15所示。

1.5 成为微信开发者

成为微信开发者有两种方式：一种是在任意公众号内部，通过开通成为开发者；一种是无须公众账号、快速申请接口测试号，只要微信登录就可以。

1.5.1 通过公众号

登录微信后，左侧最后有一个“开发”选项，分别包括“基本配置”、“开发者工具”、“运维中心”和“接口权限”4个选项。

1.基本配置

（1）单击“基本配置”，如果还没有成为开发者，如图1.16所示。

（2）勾选“我同意”复选框，然后单击“成为开发者”按钮，就会出现我们需要的开发者ID，如图1.17所示。

2. 开发者工具

开发者工具，主要包含了微信开发的一些辅助工具，例如开发者文档、在线接口调试工具、开发者问答系统、接口测试申请系统、公众平台测试账号（如果没有开发权限可以试用）、公众号第三方平台。

3. 运维中心

包括数据监控、日志查询、接口报警三个选项。数据监控功能实时统计公众号接口/被动回复调用数据，并支持特定时间段调用数据查询，帮助开发者了解公众号接口调用情况。日志查询可查询公众号48小时内接口调用错误日志。接口报警的功能是专门为开发者设计的，它是为了帮助开发者在自身服务器和接口响应出现问题时，尽快发现问题。接口报警通过微信群来通知，所以需要扫描当前界面下的二维码以加入微信群。

微信自己定义了一些报警的情形，如图1.18所示，我们可以采用默认的阀值，也可以设计自己的阀值。

4. 接口权限

l显示接口权限列表，主要告诉当前“公众号”的拥有者有哪些权限能开发，如图1.19所示。

1.5.2 通过测试号

微信为开发者提供了测试号，无须开通公众号就可以申请接口测试，直接体验和测试公众平台所有高级接口。输入网址https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t= sandbox/login，就可以打开申请界面，如图1.20所示。

单击“登录”按钮后，使用任意个人的微信号扫描二维码就可以登录，登录后就会获得一个开发者ID，如图1.21所示。

在测试时如果没有自己的服务器，可以使用一些免费的云服务器来解决，目前国内使用最多的是新浪的SAE，注册送200个云豆，可以免费使用一周左右。

1.6 公众号的安全中心

登录微信后在左侧栏中有个“安全中心”选项，腾讯的安全措施做得不错，这个模块中包含了几大安全控制的功能，如图1.22所示。

在“安全中心”里，我们可以修改微信登录密码、可以设置管理员微信号（发布微信时需要用管理员微信的“扫一扫”功能才能发布）、可以设置运营者微信号、可以对“群发”功能实现风险保护，还可以对“开发者中心”重置AppSecret的保护。

作为开发人员或一个平台的维护人员，安全中心是我们在运营产品前必须了解的一个环节。

1.7 本章小结

通过本章的学习，相信以前没有接触过微信公众平台的读者也有一个大概的全貌认知了。本章虽然还没有涉及微信网页的开发，却是微信公众号开发的必备知识，如果我们连什么是公众号都不知道，又何谈公众号的开发呢？本书后面的章节将正式进入微信JSSDK和网页开发的学习。

前言/序言

　　移动Web的发展速度令人惊叹，近几年所有互联网大企业都在往移动端发展，微信几乎占领了移动互联网的大部分江山，微信的公众号也已超过1000万，越来越多的企业不再建设网站，而是只要有一个包含所有功能的微信公众号就可以了，所有的服务行业也都创建了自己的公众号。由此可见，微信开发的人才需求非常旺盛。

　　微信公众号实际上就是一个MINI版的浏览器，可以说，HTML5的网页功能都能在微信公众号内部实现，甚至通过JSSDK，HTML5网页还可以调用微信提供的所有接口，包括分享、扫一扫、支付、卡券、定位、照片、语音等功能。所以Web开发人员可以设计并实现更多的微信公众号内容，而不用学习更多移动开发的知识，只要会调用这些接口即可。

　　本书就是一本帮助读者学习微信公众平台+HTML5网页开发的入门书，只要有简单的HTML和JavaScript知识，就可以开发出一个功能完整的微信公众平台。

　　★本书特色

　　为了与时俱进，从事前端开发工作的读者朋友，都应该了解、学习一下微信的JSSDK，本书中介绍了微信HTML5+JSSDK+微信网页样式的示例代码、技巧和实战案例。本书主要讲解形式如下：

　　（1）针对每个API，都设计一个包含页面结构的完整效果，然后根据API中提供的各个接口，设计好针对每个接口的调用方法。

　　（2）所有的案例代码都很完整，读者在调试不通的情况下，可以直接使用本书资源中的源代码文件进行调试。

　　（3）很多人即使熟悉了API的接口，也不知道如何应用，本书最后还提供了两个完整的项目案例，利用JSSDK+HTML5的形式，把制作项目的流程、代码和技巧完整地演示出来。

　　★本书的结构

　　第1章：由于做微信HTML5+JSSDK开发离不开微信公众号，所以首先介绍了微信公众号的注册流程，并讲解一些关于微信后台的操作，以便于读者对微信后台有一个更清晰的认知。

　　第2章：微信JSSDK的API使用需要搭建微信JSSDK的基础环境，本章综合讲解了搭建过程，为后续接口调用做铺垫。

　　第3~9章：阐述了微信开放的所有API，包含代码示例、常见问题及一些小技巧。

　　第10章：详细介绍了如何使用微信提供的网页样式库，结合这些样式和HTML5，能够开发出更Native的微信公众号。

　　第11~12章：用案例作为载体，结合比较流行的HTML5技术，讲解了微信JSSDK在实际项目中的重要作用。

　　第13章：总结了在微信JSSDK开发中可能面临的一些问题，随后又介绍了在微信调试模式下，一些提示信息 微信公众平台网页开发实战――HTML5+JSSDK混合开发解密 电子书 下载 mobi epub pdf txt

内容不错，可以多学习一些知识。

电子产品时代，努力学习，天天向上，写代码

挺不错的一本书，看了几页感觉很适合自己，挺棒的，多多学习

一个字评价，好，很好，非常好！其实我暂时还没看，要加油。????

买的时候没注意，原来是c#的，貌似用不上

不错，已经在用了，很给力，会推荐的，京东物流很快

买书很便宜，好书上京东

产品已经收到，这次物流还是很慢的！

感觉不怎么样，，基本照抄官方文档