【原创】微信公众号与HTML 5混合模式揭秘4——jssdk调用微信扫一扫
微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK
微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片
微信公众号与HTML 5混合模式揭秘3——JSSDK获取地理位置
在JSSDK中，为开发者提供了一个扫一扫API服务。
还是先创建一份scanQRCode.js文件，为“wxJSSDK”增加“scanQRCode”的相关API，代码如下：
01 wxJSSDK.scanQRCode= function(codeApi){
02 if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完毕
03 if(codeApi){
04 //其他代码略
05 }else{
06 console.log("缺少配置参数");
07 }
08 }else{
09 console.log("抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用扫一扫接口10 服务。");
11 }
12
13 }
复制一份JSSDK环境，创建一份index.html文件，结构如图8.2所示。
图8.2
8.2.2 调用微信扫一扫接口
微信扫一扫的调用相对简单，官方示例代码如下：
01 wx.scanQRCode({
02 needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
03 scanType:["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
04 success: function (res) {
05 varresult = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
06 }
07 });
在scanQRCode.js中，封装“scanQRCode”，如下：
01 wxJSSDK.scanQRCode= function(codeApi){
02 if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完毕
03 if(codeApi){
04 codeApi.scanQRCode && wx.scanQRCode({
05 needResult:codeApi.scanQRCode.needResult, // 默认为0，扫描结果由微06 信处理，1则直接返回扫描结果，
07 scanType:codeApi.scanQRCode.scanType || ["qrCode","barCode"], // 可08 以指定扫二维码还是一维码，默认二者都有
09 success: function (res) {
10 codeApi.scanQRCode.success&&
11 codeApi.scanQRCode.success(res);
12 }
13 });
14 }else{
15 console.log("缺少配置参数");
16 }
17 }else{
18 console.log("抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用扫一扫接口19 服务。");
20 }
21 }
在index.html文件中，增加“扫一扫”按钮，代码结构，如下：
01 <!DOCTYPEhtml>
02 <htmllang="en">
03 <head>
04 <metacharset="UTF-8">
05 <meta name="viewport"content="width=device-width, initial-scale=1.0,
06 minimum-scale=1,maximum-scale=1.0, user-scalable=no">
07 <title>第8章 8.2节微信扫一扫</title>
08 <!--依赖文件：jQuery-->
09 <scriptsrc="./js/jquery-1.11.2.min.js"></script>
10 <!--依赖文件：微信的JSSDK源文件-->
11 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
12 <!--依赖文件：coolie-->
13 <scriptsrc="./js/cookie.js"></script>
14 <!--JSSDK的环境-->
15 <scriptsrc="./js/wxJSSDK.js"></script>
16 <!--引入检测API的扫一扫服务-->
17 <scriptsrc="scanQRCode.js"></script>
18 <style>
19 input{
20 width: 100%;
21 padding: 0.2em;
22 background-color: #5eb95e;
23 font-size: 1.4em;
24 background-image:linear-gradient(to bottom, #62c462, #57a957);
25 background-repeat: repeat-x;
26 color: #ffffff;
27 text-align: center;
28 text-shadow: 0 -1px 0 rgba(0, 0, 0,0.25);
29 border-radius: 0.3em;
30 }
31 #info{
32 border-left: 3px solid #03a9f4;
33 background-color: #5eb95e;
34 color: #ffffff;
35 border-radius: 0.3em;
36 text-shadow: 0 -1px 0 rgba(0, 0, 0,0.25);
37 }
38 </style>
39 </head>
40 <body>
41 <h1 style="font-size:8em">:)</h1>
42 <b style="font-size: 3em"> 微信扫一扫接口！</b><br /><br />
43 <input type="button"value="点击扫一扫"id="scanQRCode" /><br /><br />
44 </body>
45 </html>
然后在scanQRCode.js中增加响应事件，代码如下：
01 window.onload= function(){
02 /*音频*/
03 $("#scanQRCode").click(function(){//开始录音
04 wxJSSDK.scanQRCode({
05 scanQRCode:{
06 needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
07 scanType:["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二08 者都有
09 success: function (res) {
10 var result = res.resultStr;// 当needResult 为 1 时，扫码返回的结果
11 alert(result)
12 }
13 }
14 });
15 });
16 }
最后记得在JSSDK的配置环境中加入“scanQRCode”API的权限。
【代码解释】
l 微信的扫一扫API主要是做一维码与二维码分析。
l 当扫码之后，会以字符串的形式返回扫码结果。
摘自
【原创】微信公众号与HTML 5混合模式揭秘4——jssdk调用微信扫一扫的更多相关文章
- 微信公众号与HTML 5混合模式揭秘5——JSSDK开发技巧1
微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片 微信公众号与HTML 5混合模式揭秘3——JSSDK获取地理位置 微信公众号 ...
- 【原创】微信公众号与HTML 5混合模式揭秘3——JSSDK获取地理位置
微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片 JSSDK为开发者提供了两个位置API服务:获取地理位置和使用微信内置地图查 ...
- 微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK
本文是连载JSSDK+H5的书,这里是第一篇揭秘————如何部署JSSDK 部署JSSDK不会太难,有时候需要一点后台知识,但也不是太难的那种,本节主要是用PHP作为后台参考语言,为了照顾初学者,把代 ...
- 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片
本书是分享微信jssdk开发的第二篇. 4.2.1 项目需求 需求说明:实现微信端的手机用户,点击按钮选取1张图片,分享到朋友圈. 4.2.2 需求分解 通过对需求的了解,可以将其分解为: ( ...
- 微信公众号平台接口开发：基础支持，获取微信服务器IP地址
官方说明 目前看不出来这个接口有哪些具体运用,但是既然有这个接口,那我们就试试能不能用 访问接口 修改WeCharBase.cs,新增以下2个方法 public static string Serve ...
- Java开发微信公众号（二）---开启开发者模式，接入微信公众平台开发
接入微信公众平台开发,开发者需要按照如下步骤完成: 1.填写服务器配置 2.验证服务器地址的有效性 3.依据接口文档实现业务逻辑 资料准备: 1.一个可以访问的外网,即80的访问端口,因为微信公众号接 ...
- h5开发微信公众号重定向到关注页面没有关注按钮 （微信你个坑）
搜索微信公众号是这样的 微信公众号重定向到关注页面没有关注按钮 如何微信公众号重定向到关注页面没有关注按钮,请看上篇笔记 无解,微信一直在封这种通过链接跳转到公众号关注页面的方法.只有放个二维码提示长 ...
- 从Python爬虫到SAE云和微信公众号：二、新浪SAE上搭建微信服务
目的:用PHP在SAE上搭建一个微信公众号的服务器. 1.申请一个SAE云账号 SAE申请地址:http://sae.sina.com.cn/ 可以使用微博账号登陆,SAE是新浪的云服务,时间也比较 ...
- 微信公众号开发C#系列-4、获取接口调用凭证
概述 获取接口调用凭证实质就是获取access_token.在微信接口开发中,许多服务的使用都离不开Access Token,Access Token相当于打开这些服务的钥匙,正常情况下会在7200秒 ...
随机推荐
- PHP/Javascript 数组定义 及JSON中的使用 ---OK
PHP数组定义 一维数组: 1.$a=array(1,2,4,5,6); 2.$a= Array("cec"=>"cecValue","logo ...
- OA系统
当用户登录时,根据用户名让他去查找用户的ID,编号,角色,权限,部门信息,等信息查找出来,用户表和角色表是一个一对多的关系,角色和权限也是一个一对多的关系,所以总共加起来有五张表,获取权限是通过用户名 ...
- java如何写接口给别人调用
参考:https://blog.csdn.net/greatkendy123/article/details/52818466 java web开发(二) 接口开发
- HDU-2616
Kill the monster Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- 3.17-3.18 HDFS2.x中高级特性讲解
一.hdfs federation hdfs federation即hdfs的联邦:可以理解为有多个namenode节点的hdfs集群: HA方案解决的是单点故障问题,而Fdederation解决的是 ...
- UVa 242 Stamps and Envelope Size (无限背包，DP)
题意:信封上最多贴S张邮票.有N个邮票集合,每个集合有不同的面值.问哪个集合的最大连续邮资最 大,输出最大连续邮资和集合元素. 最大连续邮资是用S张以内邮票面值凑1,2,3...到n+1凑不出来了,最 ...
- C#项目中一些文件类型说明
designer.cs 是窗体设计器生成的代码文件,作用是对窗体上的控件做初始化工作 (在函数InitializeComponent()中)VS2003以前都把这部分代码放到窗体的cs文件中,由于这 ...
- 洛谷 - P1072 Hankson - 的趣味题 - 质因数分解
https://www.luogu.org/problemnew/show/P1072 一开始看了一看居然还想放弃了的. 把 \(x,a_0,a_1,b_0,b_1\) 质因数分解. 例如 \(x=p ...
- 一个github搞定微信小程序支付系列
详情请前往github下载示例代码 源码中包含 支付.退款 功能 so easy,项目经理再也不用担心微信支付啦 是的,已经over了
- Codeforces Round #439 (Div. 2)C - The Intriguing Obsession（简单dp）
传送门 题意 给出三个集合,每个集合的元素数量为a,b,c,现在需要连边,满足集合内元素不可达或最短路为3,求可行方案数 分析 设dp[i][j]为a集合元素为i个,b集合元素为j个的可行方案,易知( ...