Chinaunix首页 | 论坛 | 博客

linux lover

首页　| 　博文目录　| 　关于我

dream_my_dream

  • 博客访问： 423371
  • 博文数量： 62
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 740
  • 用 户 组： 普通用户
  • 注册时间： 2015-05-10 21:59
个人简介

付出，终有回报！

文章分类

全部博文（62）

文章存档

2018年（6）

2017年（24）

2016年（6）

2015年（26）

我的朋友
最近访客
推荐博文
相关博文
H5网页端调用微信扫一扫功能，Java+Js

分类： Java

2017-03-28 22:41:48

虽然微信公众平台的文档已经很详细了，网上相关的资料也很多但是在网上很难搜到免费的完整代码。我初次在网页端使用微信扫一扫时，就遇到了很多问题，现分享出我的完整代码。

步骤一：绑定域名


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

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

这里注意域名不要带http:// 等前缀。（顺便推荐做微信开发测试时，使用花生壳账号，映射出公网ip。）比如网址： 那么它的域名就是 test.wicp.net。
如果Js安全域名配置错误，扫一扫时会报错：config:invalid url domain

步骤二：引入JS文件


在需要调用JS接口的页面引入如下JS文件，（支持https）：

请注意，如果你的页面启用了https，务必引入  ，否则将无法在iOS9.0以上系统中成功使用JSSDK

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

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

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


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


wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

直接贴出前端的代码：
1、weixin.html

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>

  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>Insert title here</title>

  8.         <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
  9.         <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
  10.         <script src=""></script>
  11.         <script type="text/javascript" src="js/weixin.js"></script>

  13.     </head>

  15.     <body>
  16.         <button id="scanQRCode">扫描二维码</button>
  17.     </body>

  19. </html>

2、weixin.js

点击(此处)折叠或打开

  1. //调用微信扫一扫功能所在的页面
  2. var url = window.location.href;

  4. //服务端提供的接口。HOST是服务器的地址，在项目中定义为全局变量；
  5. var url11 = HOST + "/tiaoma.do";

  6.
  7.     //ajax注入权限验证
  8.     $.ajax({
  9.         //与服务器交互
  10.         url:url11,
  11.         dataType: 'json',
  12.         data: {"url" : url},
  13.         complete: function(XMLHttpRequest, textStatus){
  14.               
  15.         },
  16.         error: function(XMLHttpRequest, textStatus, errorThrown){
  17.             alert("发生错误："+errorThrown);
  18.         },
  19.         success: function(res){
  20.             var appId = res.appId;
  21.             var noncestr = res.noncestr;
  22.             var jsapi_ticket = res.jsapi_ticket;
  23.             var timestamp = res.timestamp;
  24.             var signature = res.signature;
  25.                       
  26.             wx.config({
  27.                 debug: true, //开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  28.                 appId: appId, //必填，公众号的唯一标识
  29.                 timestamp: timestamp, // 必填，生成签名的时间戳
  30.                 nonceStr: noncestr, //必填，生成签名的随机串
  31.                 signature: signature,// 必填，签名，见附录1
  32.                 jsApiList: ['checkJsApi', 'scanQRCode'] //必填，需要使用的JS接口列表，所有JS接口列表 见附录2
  33.             });
  34.         }
  35.     });

  37. wx.error(function(res) {
  38.     alert("出错了：" + res.errMsg);
  39. });

  41. //通过ready接口处理成功验证
  42. wx.ready(function() {
  43. // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
  44. //config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
  45. //则须把相关接口放在ready函数中调用来确保正确执行。
  46. //对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

  48.     wx.checkJsApi({
  49.         jsApiList: ['scanQRCode'],
  50.         success: function(res) {
  51.              alert(JSON.stringify(res));
  52.         }
  53.     });

  55.     //扫描二维码
  56.     document.querySelector('#scanQRCode').onclick = function() {
  57.         wx.scanQRCode({
  58.             needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
  59.             scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
  60.             success: function(res) {
  61.                 var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
  62.                 //document.getElementById("wm_id").value = result; //将扫描的结果赋予到jsp对应值上
  63.                 alert("扫描成功::扫描码=" + result);
  64.             }
  65.         });
  66.     }; //end_document_scanQRCode
  67. });


步骤四：通过ready接口处理成功验证 


	参考官方文档： 通过后台获取js权限签名jsapi_ticket
直接给出后台相关的代码：

1、Token.java

点击(此处)折叠或打开



  3. /**
  4.  * 凭证
  5.  *
  6.  */
  7. public class Token {
  8.     
  9.     // 接口访问凭证
  10.     private String accessToken;
  11.     // 凭证有效期，单位：秒
  12.     private int expiresIn;

  14.     public String getAccessToken() {
  15.         return accessToken;
  16.     }

  18.     public void setAccessToken(String accessToken) {
  19.         this.accessToken = accessToken;
  20.     }

  22.     public int getExpiresIn() {
  23.         return expiresIn;
  24.     }

  26.     public void setExpiresIn(int expiresIn) {
  27.         this.expiresIn = expiresIn;
  28.     }

  30. }
2、JsapiTicket.java

点击(此处)折叠或打开


  2. public class JsapiTicket {
  3.     
  4.     // 获取到的凭证
  5.     private String ticket;
  6.     // 凭证有效期，单位：秒
  7.     private int expiresIn;
  8.     
  9.     public String getTicket() {
  10.         return ticket;
  11.     }
  12.     
  13.     public void setTicket(String ticket) {
  14.         this.ticket = ticket;
  15.     }
  16.     
  17.     public int getExpiresIn() {
  18.         return expiresIn;
  19.     }
  20.     
  21.     public void setExpiresIn(int expiresIn) {
  22.         this.expiresIn = expiresIn;
  23.     }
  24.     
  25. }

3、TokenUtil.java

点击(此处)折叠或打开



  3. import java.io.BufferedReader;
  4. import java.io.InputStream;
  5. import java.io.InputStreamReader;
  6. import java.io.OutputStream;
  7. import java.net.ConnectException;
  8. import java.net.URL;
  9. import java.util.ArrayList;
  10. import java.util.List;
  11. import javax.net.ssl.HttpsURLConnection;
  12. import javax.net.ssl.SSLContext;
  13. import javax.net.ssl.SSLSocketFactory;
  14. import javax.net.ssl.TrustManager;
  15. import net.sf.json.JSONException;
  16. import net.sf.json.JSONObject;
  17. import com.TourGuide.model.JsapiTicket;
  18. import com.TourGuide.model.Token;
  19. import com.google.gson.Gson;
  20. import com.google.gson.JsonObject;
  21. import com.google.gson.JsonParser;


  24. public class TokenUtil {
  25.     
  26.     public final static String appid = "****************";
  27.     public final static String secret = "****************************";
  28.     
  29.     // 凭证获取（GET）,token_url获取凭证接口的请求地址
  30.     public final static String token_url = ""
  31.             + "grant_type=client_credential&"
  32.             + "appid=" + appid + "&"
  33.             + "secret=" + secret;
  34.     
  35.     
  36.     /**
  37.      * 发送https请求.定义了一个通用的HTTPS请求方法，用于发送HTTPS GET和POST请求
  38.      * 当调用公众平台的开发接口时，都需要传入接口访问凭证access_token
  39.      *
  40.      * @param requestUrl 请求地址
  41.      * @param requestMethod 请求方式（GET、POST）
  42.      * @param outputStr 提交的数据
  43.      * @return
  44.      */
  45.     public static JSONObject getTokenJsonObject(String requestUrl, String requestMethod, String outputStr){
  46.         
  47.         JSONObject returnData = null;
  48.         
  49.         try {
  50.             
  51.             // 创建SSLContext对象，并使用我们指定的信任管理器初始化
  52.             TrustManager[] tm = {new MyX509TrustManager()};
  53.             SSLContext sslContext = SSLContext.getInstance("SSL", "SunJSSE");
  54.             sslContext.init(null, tm, new java.security.SecureRandom());
  55.             // 从上述SSLContext对象中得到SSLSocketFactory对象
  56.             SSLSocketFactory ssf = sslContext.getSocketFactory();
  57.             
  58.             URL url = new URL(requestUrl);
  59.             HttpsURLConnection conn = (HttpsURLConnection) url.openConnection();
  60.             conn.setSSLSocketFactory(ssf);
  61.             
  62.             conn.setDoOutput(true);
  63.             conn.setDoInput(true);
  64.             conn.setUseCaches(false);
  65.             // 设置请求方式（GET/POST）
  66.             conn.setRequestMethod(requestMethod);
  67.             
  68.             // 当outputStr不为null时向输出流写数据
  69.             if (null != outputStr) {
  70.                 OutputStream outputStream = conn.getOutputStream();
  71.                 // 注意编码格式
  72.                 outputStream.write(outputStr.getBytes("UTF-8"));
  73.                 outputStream.close();
  74.             }
  75.             
  76.             // 从输入流读取返回内容
  77.             InputStream inputStream = conn.getInputStream();
  78.             InputStreamReader inputStreamReader = new InputStreamReader(inputStream, "utf-8");
  79.             BufferedReader bufferedReader = new BufferedReader(inputStreamReader);
  80.             String str = null;
  81.             StringBuffer buffer = new StringBuffer();
  82.             while ((str = bufferedReader.readLine()) != null) {
  83.                 buffer.append(str);
  84.             }
  85.             
  86.             // 释放资源
  87.             bufferedReader.close();
  88.             inputStreamReader.close();
  89.             inputStream.close();
  90.             inputStream = null;
  91.             conn.disconnect();

  93.             returnData = JSONObject.fromObject(buffer.toString());
  94.         } catch (ConnectException ce) {
  95.             System.out.printf("连接超时：{}", ce);
  96.         } catch (Exception e) {
  97.             System.out.printf("https请求异常：{}", e);
  98.         }
  99.         
  100.         return returnData;
  101.     }
  102.     
  103.     
  104.     /**
  105.      * 获取接口访问凭证。将得到的json结果转为Token对象
  106.      * @return
  107.      */
  108.     public static Token getToken(){
  109.         
  110.         Token token = null;
  111.         String requestUrl = token_url;
  112.         // 发起GET请求获取凭证
  113.         JSONObject returnData = getTokenJsonObject(requestUrl, "GET", null);
  114.         
  115.         if(null != returnData){

  117.             try {
  118.                 token = new Token();
  119.                 token.setAccessToken(returnData.getString("access_token"));
  120.                 token.setExpiresIn(Integer.parseInt(returnData.getString("expires_in")));

  122.             } catch (Exception e) {
  123.                 token = null;
  124.                 // 获取token失败
  125.                 System.out.printf("获取token失败 errcode:{} errmsg:{}", returnData.get("errcode"),
  126.                         returnData.get("errmsg"));
  127.             }
  128.         }
  129.         
  130.         return token;
  131.     }
  132.     
  133.     
  134.     /**
  135.      * 获取jsapi_ticket
  136.      *
  137.      * @param appid 凭证
  138.      * @param appsecret 密钥
  139.      * @return
  140.      */
  141.     public static JsapiTicket getJsapiTicket(String accessToken) {
  142.         
  143.         //获取公众号jsapi_ticket的链接
  144.         String jsapi_ticket_url = ""
  145.                 + "access_token=ACCESS_TOKEN&type=jsapi";
  146.         
  147.         //ticket分享值
  148.         JsapiTicket jsapiticket = null;
  149.         
  150.         if(accessToken != null){
  151.              String requestUrl = jsapi_ticket_url.replace("ACCESS_TOKEN", accessToken);
  152.              JSONObject jsonObject = getTokenJsonObject(requestUrl, "GET", null);
  153.              // 如果请求成功
  154.              if (null != jsonObject) {
  155.                  try {
  156.                      jsapiticket = new JsapiTicket();
  157.                      jsapiticket.setTicket(jsonObject.getString("ticket"));
  158.                      jsapiticket.setExpiresIn(jsonObject.getInt("expires_in"));
  159.                  } catch (JSONException e) {
  160.                      jsapiticket = null;
  161.                      // 获取ticket失败
  162.                     System.out.printf("获取ticket失败 errcode:{} errmsg:{}",
  163.                             jsonObject.getInt("errcode"), jsonObject.getString("errmsg"));
  164.                  }
  165.          }
  166.         }else{
  167.             System.out.println("*****token为空 获取ticket失败******");
  168.         }
  169.        
  170.         return jsapiticket;
  171.     }

  173. }

4、JsSignUtil.java

点击(此处)折叠或打开


  2. import java.io.UnsupportedEncodingException;
  3. import java.security.MessageDigest;
  4. import java.security.NoSuchAlgorithmException;
  5. import java.util.Formatter;
  6. import java.util.HashMap;
  7. import java.util.Map;
  8. import java.util.UUID;

  10. /** 
     * 官方给的使用js的验证工具 
     * 
     */ 
  11. public class JsSignUtil {
  12.     
  13.     public static String accessToken = null;
  14.     
  15.     public static Map<String, String> sign(String url){
  16.         
  17.         //获取accessToken
  18.         accessToken = TokenUtil.getToken().getAccessToken();
  19.         //获取JsapiTicket
  20.         String jsapi_ticket =TokenUtil.getJsapiTicket(accessToken).getTicket();
  21.         
  22.         Map<String, String> ret = new HashMap<String, String>();
  23.         String nonce_str = create_nonce_str();
  24.         String timestamp = create_timestamp();
  25.         String string1;
  26.         String signature = "";
  27.   
  28.         //注意这里参数名必须全部小写，且必须有序
  29.         string1 = "jsapi_ticket=" + jsapi_ticket +
  30.                   "&noncestr=" + nonce_str +
  31.                   "×tamp=" + timestamp +
  32.                   "&url=" + url;
  33. // System.out.println("string1="+string1);
  34.   
  35.         try
  36.         {
  37.             MessageDigest crypt = MessageDigest.getInstance("SHA-1");
  38.             crypt.reset();
  39.             crypt.update(string1.getBytes("UTF-8"));
  40.             signature = byteToHex(crypt.digest());
  41.         }
  42.         catch (NoSuchAlgorithmException e)
  43.         {
  44.             e.printStackTrace();
  45.         }
  46.         catch (UnsupportedEncodingException e)
  47.         {
  48.             e.printStackTrace();
  49.         }
  50.   
  51.         ret.put("url", url);
  52.         ret.put("jsapi_ticket", jsapi_ticket);
  53.         ret.put("nonceStr", nonce_str);
  54.         ret.put("timestamp", timestamp);
  55.         ret.put("signature", signature);
  56.         ret.put("appId", "wxd3bda909c7fb1467");
  57.   
  58. // System.out.println("1.ticket(原始)="+jsapi_ticket);
  59. // System.out.println("2.url="+ret.get("url"));
  60. // System.out.println("3.jsapi_ticket（处理后）="+ret.get("jsapi_ticket"));
  61. // System.out.println("4.nonceStr="+ret.get("nonceStr"));
  62. // System.out.println("5.signature="+ret.get("signature"));
  63. // System.out.println("6.timestamp="+ret.get("timestamp"));
  64.           
  65.         return ret;
  66.     }

  68.     
  69.     /**
  70.      * 随机加密
  71.      * @param hash
  72.      * @return
  73.      */
  74.     private static String byteToHex(final byte[] hash) {
  75.         Formatter formatter = new Formatter();
  76.         for (byte b : hash)
  77.         {
  78.             formatter.format("%02x", b);
  79.         }
  80.         String result = formatter.toString();
  81.         formatter.close();
  82.         return result;
  83.     }
  84.   
  85.     /**
  86.      * 产生随机串--由程序自己随机产生
  87.      * @return
  88.      */
  89.     private static String create_nonce_str() {
  90.         return UUID.randomUUID().toString();
  91.     }
  92.   
  93.     /**
  94.      * 由程序自己获取当前时间
  95.      * @return
  96.      */
  97.     private static String create_timestamp() {
  98.         return Long.toString(System.currentTimeMillis() / 1000);
  99.     }
  100. }

5、weixinScanController.java

点击(此处)折叠或打开

  1. import java.util.HashMap;
  2. import java.util.Map;
  3. import javax.servlet.http.HttpServletRequest;
  4. import javax.servlet.http.HttpServletResponse;
  5. import org.springframework.stereotype.Controller;
  6. import org.springframework.web.bind.annotation.RequestMapping;
  7. import org.springframework.web.bind.annotation.ResponseBody;
  8. import com.TourGuide.weixin.util.JsSignUtil;

  10. @Controller
  11. public class weixinScanController {
  12.     
  13.     /**
  14.      * 微信扫一扫接口的后台处理程序
  15.      * @param request
  16.      * @param response
  17.      * @return
  18.      * @throws Exception
  19.      */
  20.     @RequestMapping(value = "/weixinScan.do")
  21.      @ResponseBody
  22.      public Object weixinScan( HttpServletRequest request,
  23.              HttpServletResponse response) throws Exception {

  25.          String weburl = request.getParameter("url");

  27.      Map<String, String> resMap = new HashMap<String, String>();
  28.      resMap = JsSignUtil.sign(weburl);
  29.     
  30.      return resMap;
  31.      }

  33. }

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

参考：http://blog.csdn.net/u013589542/article/details/54864477
http://blog.csdn.net/f429629227/article/details/53809577
阅读(8379) | 评论(0) | 转发(0) |
0

上一篇：mysql查询语句分析 explain用法

下一篇：VS2013编译libcurl静态库和动态库

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6