【原创】微信公众号与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秒 ...
随机推荐
- C++之PIMPL模式
1 PIMPL解释 PIMPL(Private Implementation 或 Pointer to Implementation)是通过一个私有的成员指针,将指针所指向的类的内部实现数据进行隐藏. ...
- bzoj 2169 连边——去重的思想
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2169 如果之前都去好重了,可以看作这次连的边只会和上一次连的边重复. 可以认为从上上次的状态 ...
- eclipse的工程里的*.properties文件默认以unicode的编码形式显示
今天发现导入eclipse的工程里的*.properties文件无法显示中文,是unicode的编码形式显示的. 原因是Eclipse的.properties文件的默认编码为iso-8859-1. 选 ...
- web缓存概述
缓存无处不在,所展示出的仅仅是服务器端的缓存,我们从细节层面一层层分析 但是在此之前,我们先要知道什么是缓存与为什么要使用缓存,是时候百度一波喽~ 缓存就是数据交换的缓冲区(称作Cache),当某一硬 ...
- 64位windows7下安装python，配置numpy和matplotlib库
一.Python的安装 1.下载python2.7,下载地址:http://www.python.org/,选择系统相应版本,我选择是的是python2.7.6 . python-2.7.6rc1.a ...
- Sherlock and the Encrypted Data
题意: 对于16进制数字num,假定 $p_0,p_1,...,p_m$ 在该数字中出现过,如果有 $x = 2^{p_0} + 2^{p_1} + ... + 2^{p_m}$ 且 $x \oplu ...
- Eigen中的noalias()： 解决矩阵运算的混淆问题
作者:@houkai本文为作者原创,转载请注明出处:http://www.cnblogs.com/houkai/p/6349990.html 目录 混淆例子解决混淆问题混淆和component级的操作 ...
- 【eclipse插件开发实战】Eclipse插件开发3——OSGi、RCP
Eclipse插件开发实战3--OSGi.RCP 一.OSGi 1. 什么是OSGi框架 OSGi(Open Service Gateway Initiative)框架是运行在JavaVM环境里的服务 ...
- 第一节：Java 语言基础
5分30开始 18分正式开始议题 23分01开始创建项目: 讲个面向过程,函数式的方式 byte(8) char(16) short(16) int(32) long(64) long类型或者doub ...
- table对象