Home  >  Article  >  Web Front-end  >  【原创】微信公众号与HTML 5混合模式揭秘4--jssdk调用微信扫一扫_html/css_WEB-ITnose

【原创】微信公众号与HTML 5混合模式揭秘4--jssdk调用微信扫一扫_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:33:011509browse

微信公众号与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     02     <htmllang>03     04              <metacharset>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>10         <!--依赖文件:微信的JSSDK源文件-->11         <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>12         <!--依赖文件:coolie-->13         <scriptsrc>14         <!--JSSDK的环境-->15         <scriptsrc>16         <!--引入检测API的扫一扫服务-->17         <scriptsrc>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     40     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     45     </scriptsrc></scriptsrc></scriptsrc></scriptsrc></metacharset></htmllang>
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn