【原创】微信公众号与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秒 ...
随机推荐
- Thrift之代码生成器Compiler原理及源码详细解析2
我的新浪微博:http://weibo.com/freshairbrucewoo. 欢迎大家相互交流,共同提高技术. 2 t_generator类和t_generator_registry类 这个两 ...
- 微信小程序把玩（三十）wx.request(object) API
这里通过干活集中营的API接口真实请求下数据.如果提示URL 域名不合法,请在 mp 后台配置后重试修改asdebug.js两行代码即可可看下面图 百牛信息技术bainiu.ltd整理发布于博客园 定 ...
- JS-React：目录
ylbtech-JS-React:目录 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylbt ...
- 网络应用软件结构-----CS与BS结构（网络基本知识小结）
1.网络的大致结构 2.网络编程 通过直接或间接地使用网络通讯的协议实现计算机与计算机之间的通讯.在TCP/IP协议层主要麦网络主机的定位,数据传输的路由,由IP地址可以唯一地确定Internet上的 ...
- Eclipse中建立自己的类库,给不同的工程使用
win7 进入服务 开始 运行 services.msc 在多个工程当中,可能使用到相同的jar包,这时,如果我们建立一个自己的类库,该类库中存放着所有工程均需要的jar包,就可以免去重复导入的麻烦. ...
- Swift3.0 轮播图
使用三个UIButton实现无限轮播:https://github.com/LXfeiYu/LXCarouselImages.git 喜欢的朋友给个星!!! 功能: 1.可以选择开启和关闭定时器 2. ...
- 719. Find K-th Smallest Pair Distance
Given an integer array, return the k-th smallest distance among all the pairs. The distance of a pai ...
- POJ3735【矩阵快速幂】
逛了一圈...觉得这篇讲的比较清楚:传送门~ 简要概括: 1.线性代数的知识,单位矩阵的利用:(如果不知道单位矩阵的,先去补习一下线代,做几题行列式就会了): 2.然后构造好矩阵以后,直接做M次乘积运 ...
- 移动平台unity3d优化
目录(?)[-] Focus on GPUs 着眼于GPU Good practice 优秀的实践 Sharer optimizations 着色器优化 Focus on CPUs 着眼于CPUs G ...
- bzoj 3504: [Cqoi2014]危桥【最大流】
妙啊,很容易想到连(s,a1,an)(s,b1,bn)(a2,t,an)(b2,t,bn),这样,但是可能会发生a1流到b2或者b1流到a2这种不合法情况 考虑跑两次,第二次交换b1b2,如果两次都合 ...