微信调用jssdk在网页端实现调用扫一扫，java+jsp

2024-03-11 19:08
文章标签 java 网页 实现 微信 调用 jsp 扫一扫 jssdk

本文主要是介绍微信调用jssdk在网页端实现调用扫一扫，java+jsp，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

转自：http://blog.csdn.net/u011327333/article/details/50439462

这篇文章以讲解的方式，帮助大家来理解微信官方的文档，同时给出调用扫一扫的例子。

微信官方技术文档jssdk：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

打开技术文档，看到一个大目录，我们只需要关注下面几部分目录即可。


图1



图2

    图1所示的目录是使用任何js接口页面都要配置的。下面结合官方文档介绍配置方法，其中绿色字体是自己写的批注，黑色的是复制官方文档：

JSSDK使用步骤

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

这里注意域名不要带http:// 等前缀。（顺便推荐做微信开发测试时，使用花生壳账号，映射出公网ip。）比如网址：http://test.wicp.net 那么它的域名就是 test.wicp.net。

步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

请注意，如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK

如需使用摇一摇周边功能，请引入 jweixin-1.1.0.js

备注：支持使用 AMD/CMD 标准模块加载方法加载

这个就是jsp页面直接引入即可

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名，见附录1jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
步骤四：通过ready接口处理成功验证
wx.ready(function(){// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});


步骤五：通过error接口处理失败验证
wx.error(function(res){// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。});

基础接口

判断当前客户端版本是否支持指定JS接口

wx.checkJsApi({jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,success: function(res) {// 以键值对的形式返回，可用的api值true，不可用为false// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}}
});

备注：checkJsApi接口是客户端6.0.2新引入的一个预留接口，第一期开放的接口均可不使用checkJsApi来检测。

微信扫一扫

调起微信扫一扫接口

wx.scanQRCode({needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有success: function (res) {var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
}
});
前面的官方文档写的很详细，但有人会疑问，具体写到网页中是怎么样？直接复制就可以吗？其实大部分直接复制就可以，针对jsp我们只需要做一点小改变。

[javascript]  view plain  copy
  1. <script  type="text/javascript">  
  2.     wx.config({  
  3.         debug: false,  
  4.         appId: '<%=ret.get("appId")%>',  
  5.         timestamp:'<%=ret.get("timestamp")%>',  
  6.         nonceStr:'<%=ret.get("nonceStr")%>',  
  7.         signature:'<%=ret.get("signature")%>',  
  8.         jsApiList : [ 'checkJsApi', 'scanQRCode' ]  
  9.     });//end_config  
  10.   
  11.     wx.error(function(res) {  
  12.         alert("出错了：" + res.errMsg);  
  13.     });  
  14.   
  15.     wx.ready(function() {  
  16.         wx.checkJsApi({  
  17.             jsApiList : ['scanQRCode'],  
  18.             success : function(res) {  
  19.             }  
  20.         });  
  21.   
  22.         //扫描二维码  
  23.         document.querySelector('#scanQRCode').onclick = function() {  
  24.             wx.scanQRCode({  
  25.                 needResult : 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，  
  26.                 scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码，默认二者都有  
  27.                 success : function(res) {  
  28.                     var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果  
  29.                     document.getElementById("wm_id").value = result;//将扫描的结果赋予到jsp对应值上  
  30.                     alert("扫描成功::扫描码=" + result);  
  31.                 }  
  32.             });  
  33.         };//end_document_scanQRCode  
  34.           
  35.     });//end_ready  
  36. </script>  

wx.config 里面的各个属性ret.get("XXX")。是我们需要使用一个<% %>内部的java语言来获取的。具体如下：

[javascript]  view plain  copy
  1. <pre name="code" class="html"><%  
  2. Map<String, String> ret = new HashMap<String, String>();  
  3. ret = JsSignUtil.sign(url);  
  4. %>  

 

 
 

 其中JsSignUtil 是获取js ticket的文件。这个文件的雏形，微信官方在jssdk技术文档底部给了demo，有三个版本，java， php，python。这里我对它做了一些微调：
 

 
 

 
 
 [java]  view plain  copy 
 
  
 
 
  1.  package util;  
  2.    
  3.  import java.util.UUID;  
  4.  import java.util.Map;  
  5.  import java.util.HashMap;  
  6.  import java.util.Formatter;  
  7.  import java.security.MessageDigest;  
  8.  import java.security.NoSuchAlgorithmException;  
  9.  import java.io.UnsupportedEncodingException;  
  10.    
  11.  /** 
  12.   * 官方给的使用js的验证工具 
  13.   * @author Administrator 
  14.   * 
  15.   */  
  16.  public class JsSignUtil {  
  17.      public static String accessToken = null;  
  18.        
  19.      public static Map<String, String> sign(String url) {  
  20.          accessToken = WeixinUtil.getAccessToken("appid", "appsecret").getToken();  
  21.          String jsapi_ticket = WeixinUtil.getJsApiTicket(accessToken);  
  22.       
  23.            
  24.          Map<String, String> ret = new HashMap<String, String>();  
  25.          String nonce_str = create_nonce_str();  
  26.          String timestamp = create_timestamp();  
  27.          String string1;  
  28.          String signature = "";  
  29.    
  30.          //注意这里参数名必须全部小写，且必须有序  
  31.          string1 = "jsapi_ticket=" + jsapi_ticket +  
  32.                    "&noncestr=" + nonce_str +  
  33.                    "×tamp=" + timestamp +  
  34.                    "&url=" + url;  
  35.          System.out.println("string1="+string1);  
  36.    
  37.          try  
  38.          {  
  39.              MessageDigest crypt = MessageDigest.getInstance("SHA-1");  
  40.              crypt.reset();  
  41.              crypt.update(string1.getBytes("UTF-8"));  
  42.              signature = byteToHex(crypt.digest());  
  43.          }  
  44.          catch (NoSuchAlgorithmException e)  
  45.          {  
  46.              e.printStackTrace();  
  47.          }  
  48.          catch (UnsupportedEncodingException e)  
  49.          {  
  50.              e.printStackTrace();  
  51.          }  
  52.    
  53.          ret.put("url", url);  
  54.          ret.put("jsapi_ticket", jsapi_ticket);  
  55.          ret.put("nonceStr", nonce_str);  
  56.          ret.put("timestamp", timestamp);  
  57.          ret.put("signature", signature);  
  58.          ret.put("appId", "wxcbba33f6b9ce1286");  
  59.    
  60.          System.out.println("1.ticket(原始)="+jsapi_ticket);  
  61.          System.out.println("2.url="+ret.get("url"));  
  62.          System.out.println("3.jsapi_ticket（处理后）="+ret.get("jsapi_ticket"));  
  63.          System.out.println("4.nonceStr="+ret.get("nonceStr"));  
  64.          System.out.println("5.signature="+ret.get("signature"));  
  65.          System.out.println("6.timestamp="+ret.get("timestamp"));  
  66.            
  67.          return ret;  
  68.      }  
  69.        
  70.        
  71.      /** 
  72.       * 随机加密 
  73.       * @param hash 
  74.       * @return 
  75.       */  
  76.      private static String byteToHex(final byte[] hash) {  
  77.          Formatter formatter = new Formatter();  
  78.          for (byte b : hash)  
  79.          {  
  80.              formatter.format("%02x", b);  
  81.          }  
  82.          String result = formatter.toString();  
  83.          formatter.close();  
  84.          return result;  
  85.      }  
  86.    
  87.      /** 
  88.       * 产生随机串--由程序自己随机产生 
  89.       * @return 
  90.       */  
  91.      private static String create_nonce_str() {  
  92.          return UUID.randomUUID().toString();  
  93.      }  
  94.    
  95.      /** 
  96.       * 由程序自己获取当前时间 
  97.       * @return 
  98.       */  
  99.      private static String create_timestamp() {  
  100.          return Long.toString(System.currentTimeMillis() / 1000);  
  101.      }  
  102.  }  
 

 

 
接下来介绍 

 
 
 [javascript]  view plain  copy 
 
  
 
 
  1.  wx.ready(function(){ wx.XXX});  
 

 

 

 
 

 放在wx.ready 里面的内容，会等到相关信息全部加载完毕后才可以被触发。如果用户引入的接口是需要点击才会调用的，则放不放在里面都无所谓。比如上面例子的接口是用来检验当前配置信息是否合法的，那么这个功能是不需要用户来点击的，当你打开网页时，自动就会调用该接口，那么它就必须放在ready里面。再比如我们打算调用的扫一扫，这个必须（最好是）是用户进入页面后点击某个按钮才触发，这么就不必放到ready里面。
 

 
 

 下面再解释扫一扫接口的代码：
 

 
 

 
 
 [javascript]  view plain  copy 
 
  
 
 
  1.  //扫描二维码  
  2.          document.querySelector('#scanQRCode').onclick = function() {  
  3.              wx.scanQRCode({  
  4.                  needResult : 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，  
  5.                  scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码，默认二者都有  
  6.                  success : function(res) {  
  7.                      var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果  
  8.                      document.getElementById("wm_id").value = result;//将扫描的结果赋予到jsp对应值上  
  9.                      alert("扫描成功::扫描码=" + result);  
  10.                  }  
  11.              });  
  12.          };//end_document_scanQRCode  
 

 

 

 
 

 我们看到官方的文档只有一个
 wx.scanQRCode({ XXX });，我们给他套上一个document.querySelector（）。这个作用就是用户点击才会触发该事件。如果不套document，直接放在外面那么一旦进入该网页，系统就自动调用了接口。
 #scanQRCode这个值去掉#后，就是我们按钮的id，拥有该id的按钮即可调用接口。这个id是官方给的，不可以自己随意改。
 
 

 

 
 
 [javascript]  view plain  copy 
 
  
 
 
  1.  <button id="scanQRCode" >扫描二维码</button>  
 

 

 
水平有限，如有错误，多多指正 


                                    

                                        这篇关于微信调用jssdk在网页端实现调用扫一扫，java+jsp的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
                                    

                                    

                                

                            

                            

                        

                    

                    

                        

                            

                            http://www.chinasem.cn/article/798769。
                            
                        

                    

                    
                    

                        
                            
                        
                    

                

                

                    相关文章
                

                    

                        

                            

                                

                                    
                                        网页解析 lxml 库--实战
                                    
                                

                            

                            

                                

                                    网页解析 lxml 库--实战
                                

                                

                                    lxml库使用流程 lxml 是 Python 的第三方解析库，完全使用 Python 语言编写，它对 XPath表达式提供了良好的支 持，因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。  pip install lxml  lxm| 库提供了一个 etree 模块，该模块专门用来解析 HTML/XML 文档，下面来介绍一下 lxml 库
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        JVM 的类初始化机制
                                    
                                

                            

                            

                                

                                    JVM 的类初始化机制
                                

                                

                                    前言 当你在 Java 程序中new对象时，有没有考虑过 JVM 是如何把静态的字节码（byte code）转化为运行时对象的呢，这个问题看似简单，但清楚的同学相信也不会太多，这篇文章首先介绍 JVM 类初始化的机制，然后给出几个易出错的实例来分析，帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段，分别是：loading 、Linking、initialization
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        Spring Security 基于表达式的权限控制
                                    
                                

                            

                            

                                

                                    Spring Security 基于表达式的权限控制
                                

                                

                                    前言 spring security 3.0已经可以使用spring el表达式来控制授权，允许在表达式中使用复杂的布尔逻辑来控制访问的权限。  常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true （Spring security默认会带有ROLE_前缀）,去
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        浅析Spring Security认证过程
                                    
                                

                            

                            

                                

                                    浅析Spring Security认证过程
                                

                                

                                    类图 为了方便理解Spring Security认证流程，特意画了如下的类图，包含相关的核心认证类   概述 核心验证器  AuthenticationManager 该对象提供了认证方法的入口，接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        Spring Security--Architecture Overview
                                    
                                

                            

                            

                                

                                    Spring Security--Architecture Overview
                                

                                

                                    1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类，它们之间的依赖，构建起了整个框架。想要理解整个架构，最起码得对这些类眼熟。  1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文（security context）的信息。当前操作的用户是谁，该用户是否已经被认证，他拥有哪些角色权限…这些都被保
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        Spring Security基于数据库验证流程详解
                                    
                                

                            

                            

                                

                                    Spring Security基于数据库验证流程详解
                                

                                

                                    Spring Security 校验流程图  相关解释说明（认真看哦）  AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        Spring Security 从入门到进阶系列教程
                                    
                                

                            

                            

                                

                                    Spring Security 从入门到进阶系列教程
                                

                                

                                    Spring Security 入门系列  《保护 Web 应用的安全》  《Spring-Security-入门（一）：登录与退出》  《Spring-Security-入门（二）：基于数据库验证》  《Spring-Security-入门（三）：密码加密》  《Spring-Security-入门（四）：自定义-Filter》  《Spring-Security-入门（五）：在 Sprin
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        Java架构师知识体认识
                                    
                                

                            

                            

                                

                                    Java架构师知识体认识
                                

                                

                                    源码分析  常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式  Spring5  beans 接口实例化代理Bean操作  Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory  Transaction 声明式事物
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        W外链微信推广短连接怎么做？
                                    
                                

                            

                            

                                

                                    W外链微信推广短连接怎么做？
                                

                                

                                    制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时，首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值，还要能够激起人们的分享欲望。对于许多企业和个人来说，尤其是那些缺乏创意和写作能力的人来说，这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大，不同用户的需求和兴趣各异。因此，制作推广链接时需要精准定位目标受众，以便更有效地吸引他们点击并分享链接
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        Java进阶13讲__第12讲_1/2
                                    
                                

                            

                            

                                

                                    Java进阶13讲__第12讲_1/2
                                

                                

                                    多线程、线程池  1.  线程概念 1.1  什么是线程  1.2  线程的好处  2.   创建线程的三种方式 注意事项  2.1  继承Thread类 2.1.1 认识   2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory
                                

                                

                                    阅读更多...
                                

                            

                        

                    

            

        

    


    


    

        

            Copyright China编程   23002807@qq.com
        

        

            沪ICP备2023033072号-2