【原创】微信公众号与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秒 ...
随机推荐
- 利用union判断系统的大小端
int checkCPUendian()//返回1,为小端:反之,为大端: { union { unsigned int a; unsigned char b; }c; c.a = 1; return ...
- c语言里如何调用汇编里的变量？
c语言里如何调用汇编里的变量? 汇编语言:是声明全局变量 .globl _end_ofs _end_ofs: .word _end - _start c语言:声明这个变量,然后再调用这个变量 void ...
- 六、mysql语法
1.条件查询 条件查询需要用到where语句,where必须放到from语句表的后面 执行顺序:先from后where过滤后再检索出来 2.数据排序,asc(升序),desc(降序)默认情况下是asc ...
- CSS元素:clip属性作用说明
clip属性是一个比较有用的属性,但往往在实际应用中,并不多见,介绍的也很少.应用clip属性需要注意的两点: 一.clip属性必须和定位属性postion一起使用才能生效. 二.clip裁切的计算坐 ...
- 2.1-2.2 HBase数据存储
一.HBase数据检索流程 一篇介绍HBase数据读写流程的解析的博文:http://hbasefly.com/2016/12/21/hbase-getorscan/?wsfatm=uqvhl3 1. ...
- spark学习之简介
1. Spark概述 1.1. 什么是Spark(官网:http://spark.apache.org) Spark是一种快速.通用.可扩展的大数据分析引擎,2009年诞生于加州大学伯克利分校A ...
- UVa 10723 Cyborg Genes (LCS, DP)
题意:给定两行字符串,让你找出一个最短的序列,使得这两个字符串是它的子串,并且求出有多少种. 析:这个题和LCS很像,我们就可以利用这个思想,首先是求最短的长度,不就是两个字符串长度之和再减去公共的么 ...
- 您的Microsof Internet Explorer浏览器包含新版本的内置Adobe Flash Player。
win8 安装adobe flash player时错误提示: 您的Microsof Internet Explorer浏览器包含新版本的内置Adobe Flash Player. 感谢达人提供了如下 ...
- 真正可用的Asdoc生成工具及技巧和注意事项
经过一个上午的折腾,终于总结出一套完全能够正确运行得到asdoc api的工具.使用方便,里面写了许多注意事项,帮你顺利完成 api 的生成. :: 注意: :: 1.所以 ...
- jQuery获取table当前所在行
$("div tbody tr").click(function() { var rows = $(this).prevAll().length + 1;//行号 ...