【原创】微信公众号与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秒 ...
随机推荐
- Python使用multiprocessing实现一个最简单的分布式作业调度系统
Python使用multiprocessing实现一个最简单的分布式作业调度系统介绍Python的multiprocessing模块不但支持多进程,其中managers子模块还支持把多进程分布到多台机 ...
- Tensorboard 的简单使用
确保环境以及安装好tensorflow以及tensorboard 下面通过一个简单的例子来显示一下使用方式,一个向量加法的图结构. import tensorflow as tf a = tf.con ...
- MTK HDMI 流程
一.HDMI初始化 1. kernel-3.18/drivers/misc/mediatek/ext_disp/mtk_extd_mgr.c static int __init mtk_extd_mg ...
- ElasticSearch入门及核心概念介绍
Elasticsearch研究有一段时间了,现特将Elasticsearch相关核心知识和原理以初学者的角度记录下来,如有不当,烦请指正! 0. 带着问题上路——ES是如何产生的? (1)思考:大 ...
- 3-C++程序的结构1.2
对象的生存周期 可以分为静态生存周期和动态生存周期 1.静态生存周期 如果对象的生存期与程序的运行期相同,我们称它具有静态生存期.在文件作用域中声明的对象都具有静态生存期的.如果要在函数的块中声明具有 ...
- numpy.ndarray常用属性和方法
import numpy as np a = np.array([[1,2,3],[4,3,2],[6,3,5]])print(a) [[1 2 3] [4 3 2] [6 3 5]] print(a ...
- JQuery onload、ready 加载顺序
// ready 这个方法只是在页面所有的DOM加载完毕后就会触发 // 方式1 $(function(){ // do something }); // 方式2 $(document).ready( ...
- 文档通信(跨域-不跨域)、时时通信(websocket)、离线存储(applicationCache)、开启多线程(web worker)
一.文档间的通信 postMessage对象 //不跨域 1.iframe:obj.contentWindow [iframe中的window对象] iframe拿到父级页面的window: pare ...
- Untiy一些方法前特殊标签记录
[ExecuteInEditMode] // Make code live-update even when not in play mode [ContextMenu("Execute&q ...
- 一种Unity2D多分辨率屏幕适配方案
http://www.cnblogs.com/flyFreeZn/p/4073655.html 此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏 ...