• 微信扫一扫功能在我们日常生活中很常见,那么微信jsapi是如何实现扫一扫功能的呢,接来下给大家详细介绍,并附有代码实现。 微信扫一扫 调起微信扫一扫接口 wx.scanQRCode({  need...

    微信扫一扫功能在我们日常生活中很常见,那么微信jsapi是如何实现扫一扫功能的呢,接来下给大家详细介绍,并附有代码实现。

    微信扫一扫

    调起微信扫一扫接口

    wx.scanQRCode({
        needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
        scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
        success: function (res) {
        var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
    }
    });


    第一、新建jsp页面,并引入js库

    <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script> 
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

    jweixin-1.1.0.js是调用微信jsapi的库,所以必须引入,第二行是本案例使用了jquery,所以引入的是jquery库

    第二、引入界面样式,由于几节界面案例样式太难看,所以这次案例美化了一下界面。

    <link rel="stylesheet" href="http://203.195.235.76/jssdk/css/style.css"/>

    第三、<body></body>之间的html代码

    <center><h3>欢迎来到微信jsapi测试界面-V型知识库</h3></center>
        <div class="lbox_close wxapi_form">
         <h3 id="menu-scan">微信扫一扫</h3>
          <span class="desc">调起微信扫一扫接口</span>
          <button class="btn btn_primary" id="scanQRCode0">scanQRCode(微信处理结果)</button>
          <button class="btn btn_primary" id="scanQRCode1">scanQRCode(直接返回结果)</button>
          
         </div>

    第四、<script></script>之间初始化微信jsapi库添加接口函数

    wx.config({  
        debug: true// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。  
        appId: '${appId}'// 必填,公众号的唯一标识  
        timestamp: '${ timestamp}' // 必填,生成签名的时间戳  
        nonceStr: '${ nonceStr}'// 必填,生成签名的随机串  
        signature: '${ signature}',// 必填,签名,见附录1  
        jsApiList: ['checkJsApi',
                    'chooseImage',
                    'previewImage',
                     'uploadImage',
                     'downloadImage',
                      'getNetworkType',//网络状态接口
                      'openLocation',//使用微信内置地图查看地理位置接口
                      'getLocation'//获取地理位置接口
                      'hideOptionMenu',//界面操作接口1
                      'showOptionMenu',//界面操作接口2
                      'closeWindow' ,  ////界面操作接口3
                      'hideMenuItems',////界面操作接口4
                      'showMenuItems',////界面操作接口5
                      'hideAllNonBaseMenuItem',////界面操作接口6
                      'showAllNonBaseMenuItem',////界面操作接口7
                      'scanQRCode'// 微信扫一扫接口
                   // 必填,需要使用的JS接口列表,所有JS接口列表见附录2  
    });

    jsApiList数组中,最后一项就是我们调用微信扫一扫接口的函数,此函数必须在jsapi库中初始化,否则微信扫一扫功能无法调起。

    第五、调用第三步button按钮的功能js代码,在wx.ready中添加

    // 9 微信原生接口 开始---------------------
      // 9.1.1 扫描二维码并返回结果
      document.querySelector('#scanQRCode0').onclick = function () {
        wx.scanQRCode();
      };
      // 9.1.2 扫描二维码并返回结果
      document.querySelector('#scanQRCode1').onclick = function () {
        wx.scanQRCode({
          needResult: 1,
          desc: 'scanQRCode desc',
          success: function (res) {
            alert(JSON.stringify(res));
          }
        });
      };
     // 9 微信原生接口 结束---------------------

    第六、完整的jsp页面代码,读者可直接复制运行

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        <!-- www.vxzsk.com原创 -->
        <title>微信jsapi测试-V型知识库</title>
        <meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <link rel="stylesheet" href="http://203.195.235.76/jssdk/css/style.css"/>
       <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script
       <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
        <style type="text/css">
        .desc{
        color: red;
        }
        </style>
      </head>
       
      <body>
      <center><h3>欢迎来到微信jsapi测试界面-V型知识库</h3></center>
        <div class="lbox_close wxapi_form">
         <h3 id="menu-scan">微信扫一扫</h3>
          <span class="desc">调起微信扫一扫接口</span>
          <button class="btn btn_primary" id="scanQRCode0">scanQRCode(微信处理结果)</button>
          <button class="btn btn_primary" id="scanQRCode1">scanQRCode(直接返回结果)</button>
          
         </div>
           
          
         <div style="display: none;"
         <h3 id="menu-webview">界面操作接口</h3><br>
          <span class="desc"  >隐藏右上角菜单接口</span><br>
          <button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button><br>
          <span class="desc">显示右上角菜单接口</span><br>
          <button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button><br>
          <span class="desc">关闭当前网页窗口接口</span><br>
          <button class="btn btn_primary" id="closeWindow">closeWindow</button><br>
          <span class="desc">批量隐藏功能按钮接口</span><br>
          <button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button><br>
          <span class="desc">批量显示功能按钮接口</span><br>
          <button class="btn btn_primary" id="showMenuItems">showMenuItems</button><br>
          <span class="desc">隐藏所有非基础按钮接口</span><br>
          <button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button><br>
          <span class="desc">显示所有功能按钮接口</span><br>
          <button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button><br>
          <p>基础接口之判断当前客户端是否支持指定的js接口</p>   
         <input type="button" value="checkJSAPI" id="checkJsApi"><br>
         <span class="desc" style="color: red">地理位置接口-使用微信内置地图查看位置接口</span><br>
          <button class="btn btn_primary" id="openLocation">openLocation</button><br>
          <span class="desc" style="color: red">地理位置接口-获取地理位置接口</span><br>
          <button class="btn btn_primary" id="getLocation">getLocation</button><br>
         <span class="desc" style="color: red">获取网络状态接口</span><br>
          <button class="btn btn_primary" id="getNetworkType">getNetworkType</button><br>
          <h3 id="menu-image">图像接口</h3>
          <span class="desc">拍照或从手机相册中选图接口</span><br>
          <button class="btn btn_primary" id="chooseImage">chooseImage</button><br>
          <span class="desc">预览图片接口</span><br>
          <button class="btn btn_primary" id="previewImage">previewImage</button><br>
          <span class="desc">上传图片接口</span><br>
          <button class="btn btn_primary" id="uploadImage">uploadImage</button><br>
          <span class="desc">下载图片接口</span><br>
          <button class="btn btn_primary" id="downloadImage">downloadImage</button><br>
         
      <br>
      显示图片<img alt="" src="" id="faceImg">
      </div>
       
       
      <script type="text/javascript">
      wx.config({  
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。  
        appId: '${appId}', // 必填,公众号的唯一标识  
        timestamp: '${ timestamp}' , // 必填,生成签名的时间戳  
        nonceStr: '${ nonceStr}', // 必填,生成签名的随机串  
        signature: '${ signature}',// 必填,签名,见附录1  
        jsApiList: ['checkJsApi',
                    'chooseImage',
                    'previewImage',
                     'uploadImage',
                     'downloadImage',
                      'getNetworkType',//网络状态接口
                      'openLocation',//使用微信内置地图查看地理位置接口
                      'getLocation', //获取地理位置接口
                      'hideOptionMenu',//界面操作接口1
                      'showOptionMenu',//界面操作接口2
                      'closeWindow' ,  ////界面操作接口3
                      'hideMenuItems',////界面操作接口4
                      'showMenuItems',////界面操作接口5
                      'hideAllNonBaseMenuItem',////界面操作接口6
                      'showAllNonBaseMenuItem',////界面操作接口7
                      'scanQRCode'// 微信扫一扫接口
                   ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2  
    });  
       
    wx.ready(function(){  
        // 5 图片接口
      // 5.1 拍照、本地选图
      var images = {
        localId: [],
        serverId: []
      };
      document.querySelector('#chooseImage').onclick = function () {
        wx.chooseImage({
          success: function (res) {
            images.localId = res.localIds;
            alert('已选择 ' + res.localIds.length + ' 张图片');
             $("#faceImg").attr("src", res.localIds[0]);//显示图片到页面上
          }
        });
      };
     
      // 5.2 图片预览
      document.querySelector('#previewImage').onclick = function () {
        wx.previewImage({
          current: 'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
          urls: [
            'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
            'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
            'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg'
          ]
        });
      };
     
      // 5.3 上传图片
      document.querySelector('#uploadImage').onclick = function () {
        if (images.localId.length == 0) {
          alert('请先使用 chooseImage 接口选择图片');
          return;
        }
        var i = 0, length = images.localId.length;
        images.serverId = [];
        function upload() {
          wx.uploadImage({
            localId: images.localId[i],
            success: function (res) {
              i++;
              //alert('已上传:' + i + '/' + length);
              images.serverId.push(res.serverId);
              if (i < length) {
                upload();
              }
            },
            fail: function (res) {
              alert(JSON.stringify(res));
            }
          });
        }
        upload();
      };
     
      // 5.4 下载图片
      document.querySelector('#downloadImage').onclick = function () {
        if (images.serverId.length === 0) {
          alert('请先使用 uploadImage 上传图片');
          return;
        }
        var i = 0, length = images.serverId.length;
        images.localId = [];
        function download() {
          wx.downloadImage({
            serverId: images.serverId[i],
            success: function (res) {
              i++;
              alert('已下载:' + i + '/' + length);
              images.localId.push(res.localId);
              if (i < length) {
                download();
              }
            }
          });
        }
        download();
      };
       
      // 6 设备信息接口
      // 6.1 获取当前网络状态
      document.querySelector('#getNetworkType').onclick = function () {
        wx.getNetworkType({
          success: function (res) {
            alert(res.networkType);
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });
      };
      //网络接口结束
       
      // 7 地理位置接口 开始
      // 7.1 查看地理位置
      document.querySelector('#openLocation').onclick = function () {
        wx.openLocation({
          latitude: 23.099994,
          longitude: 113.324520,
          name: 'TIT 创意园',
          address: '广州市海珠区新港中路 397 号',
          scale: 14,
          infoUrl: 'http://weixin.qq.com'
        });
      };
     
      // 7.2 获取当前地理位置
      document.querySelector('#getLocation').onclick = function () {
        wx.getLocation({
          success: function (res) {
            alert(JSON.stringify(res));
          },
          cancel: function (res) {
            alert('用户拒绝授权获取地理位置');
          }
        });
      };
      // 7 地理位置接口 结束 
       
      // 8 界面操作接口 开始-----------
      // 8.1 隐藏右上角菜单
      document.querySelector('#hideOptionMenu').onclick = function () {
        wx.hideOptionMenu();
      };
     
      // 8.2 显示右上角菜单
      document.querySelector('#showOptionMenu').onclick = function () {
        wx.showOptionMenu();
      };
     
      // 8.3 批量隐藏菜单项
      document.querySelector('#hideMenuItems').onclick = function () {
        wx.hideMenuItems({
          menuList: [
            'menuItem:readMode', // 阅读模式
            'menuItem:share:timeline', // 分享到朋友圈
            'menuItem:copyUrl' // 复制链接
          ],
          success: function (res) {
            alert('已隐藏“阅读模式”,“分享到朋友圈”,“复制链接”等按钮');
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });
      };
     
      // 8.4 批量显示菜单项
      document.querySelector('#showMenuItems').onclick = function () {
        wx.showMenuItems({
          menuList: [
            'menuItem:readMode', // 阅读模式
            'menuItem:share:timeline', // 分享到朋友圈
            'menuItem:copyUrl' // 复制链接
          ],
          success: function (res) {
            alert('已显示“阅读模式”,“分享到朋友圈”,“复制链接”等按钮');
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });
      };
     
      // 8.5 隐藏所有非基本菜单项
      document.querySelector('#hideAllNonBaseMenuItem').onclick = function () {
        wx.hideAllNonBaseMenuItem({
          success: function () {
            alert('已隐藏所有非基本菜单项');
          }
        });
      };
     
      // 8.6 显示所有被隐藏的非基本菜单项
      document.querySelector('#showAllNonBaseMenuItem').onclick = function () {
        wx.showAllNonBaseMenuItem({
          success: function () {
            alert('已显示所有非基本菜单项');
          }
        });
      };
     
      // 8.7 关闭当前窗口
      document.querySelector('#closeWindow').onclick = function () {
        wx.closeWindow();
      };
     // 8 界面操作接口  结束------------------------------------------
      
     // 9 微信原生接口 开始---------------------
      // 9.1.1 扫描二维码并返回结果
      document.querySelector('#scanQRCode0').onclick = function () {
        wx.scanQRCode();
      };
      // 9.1.2 扫描二维码并返回结果
      document.querySelector('#scanQRCode1').onclick = function () {
        wx.scanQRCode({
          needResult: 1,
          desc: 'scanQRCode desc',
          success: function (res) {
            alert(JSON.stringify(res));
          }
        });
      };
     // 9 微信原生接口 结束---------------------
       
    });  
     //初始化jsapi接口 状态
    wx.error(function (res) {
      alert("调用微信jsapi返回的状态:"+res.errMsg);
    });
       
     </script>
        
      </body>
    </html>

    上述jsp代码中有四个参数,这四个参数是成功调用微信jsapi的凭证,分别为appId(必填,公众号的唯一标识),timestamp(必填,生成签名的时间戳), nonceStr(必填,生成签名的随机串) ,signature(必填,签名),关于如何生成这四个参数,如果不知道的读者,请查看本页面左上角的菜单,里面有详细介绍,在这里不在累述。 

    第六、上述代码运行后,效果如下

    最后一张效果图是扫描二维码后返回的结果数据

    转自:http://www.vxzsk.com/122.html

    展开全文
  • 首先请阅读微信JS-SDK说明文档,了解微信JS的相关说明。 根据官方的使用步骤,关键的有以下几步 绑定域名(很关键) 引入JS文件(很简单) 通过config接口注入权限验证配置(很重要) 通过ready接口处理成功验证...

    首先请阅读微信JS-SDK说明文档,了解微信JS的相关说明。
    根据官方的使用步骤,关键的有以下几步

    1. 绑定域名(很关键
    2. 引入JS文件(很简单)
    3. 通过config接口注入权限验证配置(很重要
    4. 通过ready接口处理成功验证(还没用到)
    5. 通过error接口处理失败验证(还没用到)

    绑定域名

    绑定域名
    如果域名绑定有误,会出现如下错误提示
    错误的域名配置示例:

    `http://gwchsk.imwork.net/wechat/order/test.html`
    

    域名配置错误的提示信息:
    {“errMsg”:”config:invalid url domain”}

    这里写图片描述

    所以,域名配置的时候一定要注意
    1. 域名不要以http:开头
    2. 域名不要配置到具体的页面
    配置成功的提示如下

    这里写图片描述

    引入JS文件

    一行代码就可以了

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

    通过config接口注入权限验证配置

    这一步非常重要,也是最关键的一步,这一部分
    先看官方的示例

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

    这里需要从服务器端网页面传递的参数有timestamp、nonceStr和signature而appId和jsApiList都是固定的,这里直接写在页面中。

    首先,编写服务器端代码,生成timestampnonceStrsignature
    在生成timestamp、nonceStr和signature的时候有两个参数需要获取
    一个是access_token,另一个是jsapi_ticket

    access_token的获取需要AppIdAppSecret,获取地址如下,发送GET请求

    https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

    通过HttpClient发送http请求就可以获取到access_token

    得到access_token之后,采用http GET方式请求获得jsapi_ticket

    https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

    注意,access_token和jsapi_ticket得有效期为7200秒,开发者必须在自己的服务全局缓存

    获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。

    签名算法

    签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。

    签名算法的实现

    最难的就是签名算法的实现部分,幸好微信给了demo,网上好多人都在找,这里我把签名算法的实现贴出来,代码来自微信demo
    这里写图片描述
    下载地址
    java代码如下,做了一点点修改

    package com.gwc.wechat.utils.wechat;
    
    import java.io.UnsupportedEncodingException;
    import java.security.MessageDigest;
    import java.security.NoSuchAlgorithmException;
    import java.util.Formatter;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.UUID;
    
    public class WxJSUtil {
        public static void main(String[] args) {
    
            // 注意 URL 一定要动态获取,不能 hardcode
            String url = "http://gwchsk.imwork.net/wechat/order/test.html";
            Map<String, String> ret = sign(url);
            for (Map.Entry entry : ret.entrySet()) {
                System.out.println(entry.getKey() + "=" + entry.getValue());
            }
        };
    
        public static Map<String, String> sign(String url) {
            Map<String, String> ret = new HashMap<String, String>();
            //这里的jsapi_ticket是获取的jsapi_ticket。
            String jsapi_ticket = JSAPITicketTool.getTicket();
            String nonce_str = create_nonce_str();
            String timestamp = create_timestamp();
            String string1;
            String signature = "";
    
            //注意这里参数名必须全部小写,且必须有序
            string1 = "jsapi_ticket=" + jsapi_ticket +
                      "&noncestr=" + nonce_str +
                      "&timestamp=" + timestamp +
                      "&url=" + url;
           // System.out.println(string1);
    
            try
            {
                MessageDigest crypt = MessageDigest.getInstance("SHA-1");
                crypt.reset();
                crypt.update(string1.getBytes("UTF-8"));
                signature = byteToHex(crypt.digest());
            }
            catch (NoSuchAlgorithmException e)
            {
                e.printStackTrace();
            }
            catch (UnsupportedEncodingException e)
            {
                e.printStackTrace();
            }
    
            ret.put("url", url);
            ret.put("jsapi_ticket", jsapi_ticket);
            ret.put("nonceStr", nonce_str);
            ret.put("timestamp", timestamp);
            ret.put("signature", signature);
    
            return ret;
        }
    
        private static String byteToHex(final byte[] hash) {
            Formatter formatter = new Formatter();
            for (byte b : hash)
            {
                formatter.format("%02x", b);
            }
            String result = formatter.toString();
            formatter.close();
            return result;
        }
    
        private static String create_nonce_str() {
            return UUID.randomUUID().toString();
        }
    
        private static String create_timestamp() {
            return Long.toString(System.currentTimeMillis() / 1000);
        }
    }
    

    Controller的代码

    @Controller
    @RequestMapping(value = "/order")
    public class OrderController {
    @RequestMapping(value = "/test.html", method = RequestMethod.GET)
        public String testPage(Model model) {
    
            String url = Constant.AppURL + "/order/test.html";
            Map<String, String> ret = WxJSUtil.sign(url);
             for (Map.Entry entry : ret.entrySet()) {
                    System.out.println(entry.getKey() + "=" + entry.getValue());
                    model.addAttribute(entry.getKey().toString(), entry.getValue());
                }
            return "jqueryMobile";
        }
    }

    在Controller中将如下参数写进了jsp页面

        timestamp=1449132293
        nonceStr=fb4eaa58-6d53-40a8-a8fa-7033e9768a8a
        signature=7ad32da3f82cb36492de935a60727d3053d33f4b

    其次编写jsp页面的代码
    在jsp页面中需要将wx.config重的参数进行配置

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

    在页面中读值

        <input id="timestamp" type="hidden" value="${timestamp}" />
        <input id="noncestr" type="hidden" value="${nonceStr}" />
        <input id="signature" type="hidden" value="${signature}" />

    然后赋值

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

    写一个按钮和输入框,将扫描的结果放进输入框

    <input id="id_securityCode_input">
    <button id="scanQRCode">扫码</button>

    给按钮绑定事件,并执行微信扫码

    $("#scanQRCode").click(function() {
                wx.scanQRCode({
                    // 默认为0,扫描结果由微信处理,1则直接返回扫描结果
                    needResult : 1,
                    desc : 'scanQRCode desc',
                    success : function(res) {
                        //扫码后获取结果参数赋值给Input
                        var url = res.resultStr;
                        //商品条形码,取","后面的
                        if(url.indexOf(",")>=0){
                            var tempArray = url.split(',');
                            var tempNum = tempArray[1];
                            $("#id_securityCode_input").val(tempNum);
                        }else{
                            $("#id_securityCode_input").val(url);
                        }
                    }
                });
            });

    运行结果如图
    扫一包抽纸

    抽纸

    扫描结果

    放进input

    扫网址

    这里写图片描述

    这里写图片描述

    微信JS-SDK中的扫一扫就基本实现了。

    参考文献

    微信JS-SDK说明文档
    一篇博客

    展开全文
  • 最近开发一个食堂项目,项目中用到使用微信扫一扫实现项目中的扫一扫的功能。 1、添加点击扫一扫的触发事件的按钮 <span id="scanQRCode">扫一扫</span> 2、添加微信扫一扫的js引用 <script ...

    最近开发一个食堂项目,项目中用到使用微信扫一扫实现项目中的扫一扫的功能

    1、添加点击扫一扫的触发事件的按钮

    <span  id="scanQRCode">扫一扫</span>

    2、添加微信扫一扫的js引用

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

    3、后台调用微信扫一扫的相关参数的获取(后面会说)

    <input type="hidden" id="appId" name="appId" value="${jssdkMap.appId}"/>
    <input type="hidden" id="timestamp" name="timestamp" value="${jssdkMap.timestamp}"/>
    <input type="hidden" id="nonceStr" name="nonceStr" value="${jssdkMap.nonceStr}"/>
    <input type="hidden" id="signature" name="signature" value="${jssdkMap.signature}"/>

    4、方法调用

    $(function() {
    	scanCode();
    });

    5、开启微信扫一扫

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

    6、调用微信扫一扫

    $("#scanQRCode").click(function() {
    	wx.scanQRCode({
    		needResult : 1,// 默认为0,扫描结果由微信处理,1则直接返回扫描结果
    		scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码,默认二者都有 */
    		/*   desc : 'scanQRCode desc', */
    		success : function(res) {
    			var url = res.resultStr;//扫码后获取结果
    			location.href =  url;
    		}
    	});
    });

    后台数据的获取

    url参数为:扫一扫获取的结果,一般为路径或者加密之后的结果

    JSSDK获取

    public static Map<String, String>  getJsSdk(String url) {
    	Map<String, String> returnMap = new HashMap<String,String>();
    	try {
    		String ticket = getJsapiTicket();
    		if(StringUtils.isNotBlank(ticket) && StringUtils.isNotBlank(url)){
    			returnMap = sign(ticket, url);
                            returnMap.put("appId", IConstants.wxgzAppID);//微信公众号appId
    		}
    	} catch (Exception e) {
    	}
    	return returnMap;
    }

    生成签名

    public static Map<String, String> sign(String jsapi_ticket, String url) {
    	Map<String, String> result = new HashMap<String, String>();
    	String nonce_str = create_nonce_str(); 
    	String timestamp = create_timestamp();
    	String string;
    	String signature = "";
    	// 注意这里参数名必须全部小写,且必须有序
    	string = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonce_str + "×tamp=" + timestamp + "&url=" + url;
    	try {
    		MessageDigest crypt = MessageDigest.getInstance("SHA-1");
    		crypt.reset();
    		crypt.update(string.getBytes("UTF-8"));
    		signature = byteToHex(crypt.digest());
    	} catch (NoSuchAlgorithmException e) {
    			e.printStackTrace();
    	} catch (UnsupportedEncodingException e) {
    		e.printStackTrace();
    	}
    	result.put("url", url);
    	result.put("jsapi_ticket", jsapi_ticket);
    	result.put("nonceStr", nonce_str);
    	result.put("timestamp", timestamp);
    	result.put("signature", signature);
    	return result;
    }
    public static String byteToHex(final byte[] hash) {
    	Formatter formatter = new Formatter();
    	for (byte b : hash) {
    		formatter.format("%02x", b);
    	}
    	String result = formatter.toString();
    	formatter.close();
    	return result;
    }
    public static String create_nonce_str() {
    	return UUID.randomUUID().toString();
    }
    public static String create_timestamp() {
    	return Long.toString(System.currentTimeMillis() / 1000);
    }

    临时票据的生成

    注意:ticket有时间刷新限制
    public static String getJsapiTicket() throws Exception {
    	String ticken = null;
    	try {
    		String access_token = getToken();
    		if(access_token != null && StringUtils.isNotBlank(access_token)){
    		// 创建HttpClient实例
    		HttpClient httpclient = new DefaultHttpClient();
    		// 创建Get方法实例
    HttpGet httpgets = new HttpGet("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + access_token + "&type=jsapi"); // 免费api
    		HttpResponse response = httpclient.execute(httpgets);
    		HttpEntity entity = response.getEntity();
    		if (entity != null) {
    			InputStream instreams = entity.getContent();
    			String str = convertStreamToString(instreams);
    			JSONObject jsOb = JSONObject.fromObject(str);
    			httpgets.abort();
    			ticken = Public.mapTo(jsOb.get("ticket"), "");
    		}
    	}	
        } catch (Exception e) {
    	// TODO: handle exception
        }
    return ticken;
    }
    public static String convertStreamToString(InputStream is) {
    	BufferedReader reader = new BufferedReader(new InputStreamReader(is));
    	StringBuilder sb = new StringBuilder();
    	String line = null;
    	try {
    		while ((line = reader.readLine()) != null) {
    			sb.append(line + "\n");
    		}
    	} catch (IOException e) {
    		e.printStackTrace();
    	} finally {
    		try {
    			is.close();
    		} catch (IOException e) {
    			e.printStackTrace();
    		}
    	}
    	return sb.toString();
    }

    token获取

    public static String getToken() throws Exception {
    	String access_token = null;
    	// 创建HttpClient实例
    	HttpClient httpclient = new DefaultHttpClient();
    	// 创建Get方法实例需要微信公众号appId+secret
    	HttpGet httpgets = new HttpGet("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="
    				+ IConstants.wxgzAppID + "&secret=" + IConstants.wxgzAppSecret);
    	HttpResponse response = httpclient.execute(httpgets);
    	HttpEntity entity = response.getEntity();
    	Map<String, Object> maData = new HashMap<String, Object>();
    	if (entity != null) {
    		InputStream instreams = entity.getContent();
    		String str = convertStreamToString(instreams);
    		JSONObject jsOb = JSONObject.fromObject(str);
    		httpgets.abort();
    		access_token = Public.mapTo(jsOb.get("access_token"), "") ;
    	}
    	return access_token;
    }

    项目中的扫一扫功能已经上线,如果有疑问,请留言!!!

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • 根据微信api,整理了一下调用微信扫一扫功能。如有问题请指正: 以下是具体步骤: 1、绑定域名(很关键)2、引入JS文件(很简单) script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js">script>3、通过...

    根据微信api,整理了一下调用微信扫一扫功能。如有问题请指正:

    以下是具体步骤:

    1. 1、绑定域名(很关键
    2. 2、引入JS文件(很简单)<scriptsrc="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
    3. 3、通过config接口注入权限验证配置(很重要
    4. 4、通过ready接口处理成功验证(还没用到)
    5. 5、通过error接口处理失败验证(还没用到)
    绑定域名(第一步):


    以下是通过config接口注入权限验证配置(第三步):

    下面是js代码:

    $.ajax({
                type : "post",
                url : "/weixin/open/weixinOAuthCallback_sign.action",
                data : {
                    "url" : location.href.split('#')[0]
                },
                dataType : "json",
                success : function(data) {
                    wx.config({ 
                        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。   
                        appId: data.appId, // 必填,公众号的唯一标识
                        timestamp: data.timestamp, // 必填,生成签名的时间戳
                        nonceStr: data.nonceStr, // 必填,生成签名的随机串
                        signature: data.signature,// 必填,签名,见附录1
                        jsApiList: [
                                      'checkJsApi',
                                      'startRecord',
                                      'stopRecord',
                                      'translateVoice',
                                      'scanQRCode',// 微信扫一扫接口
                                      'openCard'
                                   ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 
                    }); 
                    wx.error(function(res) {
                        alert("出错了:" + res.errMsg);//这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
                    });
    
                    wx.ready(function() {
                        wx.checkJsApi({
                             jsApiList : ['scanQRCode'],
                             success : function(res) {
    
                             }
                        });
                    });
                    //点击按钮扫描二维码
                    $("#scanQRCode").click(function(){
                        wx.scanQRCode({
                            needResult : 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
                            scanType : [ "qrCode"], // 可以指定扫二维码还是一维码,默认二者都有
                            success : function(res) {
                                var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
                                window.location.href = result;//因为我这边是扫描后有个链接,然后跳转到该页面
                            },
                            error : function(){
                                console.log('123');
                            }
                        });
                    });
                }
            });
    

    下面是后台java代码,用于获取sign签名AppID:微信公众号应用的唯一标识,AppSecret微信公众号的私匙(相当于密码)

    /**
           * 得到jsApi-ticket
           * @return
           */
          @SuppressWarnings({ "static-access", "unused" })
          private String getJsapiTicket(){
                HttpServletRequest request = ServletActionContext.getRequest();
                String code = request.getParameter("code");
            String requestUrl = "https://api.weixin.qq.com/cgi-bin/token?"; 
            String params = "grant_type=client_credential&appid=" + APPID + "&secret=" + APP_SECRET + ""; 
            String result = this.httpGet(requestUrl+params); 
            String accessToken = com.alibaba.fastjson.JSONObject.parseObject(result).getString("access_token"); 
           
            requestUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?"; 
            params = "access_token=" + accessToken + "&type=jsapi"; 
            result = this.httpGet(requestUrl+params); 
            String jsapi_ticket = com.alibaba.fastjson.JSONObject.parseObject(result).getString("ticket"); 
            return jsapi_ticket;
        }
          /**
           * 获取sign签名
           * @return
           */
          public String sign() {
                HttpServletRequest request = ServletActionContext.getRequest();
            Map ret = new HashMap();
            String url = request.getParameter("url");
            String jsapi_ticket= getJsapiTicket();
            String nonce_str = create_nonce_str();
            String timestamp = create_timestamp();
            String string1;
            String signature = "";
            int length=url.indexOf("#");
                String uri = url;
                if(length > 0){
                      uri=url.substring(0,length);//当前网页的URL,不包含#及其后面部分
                }
            //注意这里参数名必须全部小写,且必须有序
            string1 = "jsapi_ticket=" + jsapi_ticket +
                      "&noncestr=" + nonce_str +
                      "&timestamp=" + timestamp +
                      "&url=" + url;
            System.out.println(string1);
            try
            {
                MessageDigest crypt = MessageDigest.getInstance("SHA-1");
                crypt.reset();
                crypt.update(string1.getBytes("UTF-8"));
                signature = byteToHex(crypt.digest());
            }
            catch (NoSuchAlgorithmException e)
            {
                e.printStackTrace();
            }
            catch (UnsupportedEncodingException e)
            {
                e.printStackTrace();
            }
            ret.put("appId", APPID);
            ret.put("url", uri);
            ret.put("jsapi_ticket", jsapi_ticket);
            ret.put("nonceStr", nonce_str);
            ret.put("timestamp", timestamp);
            ret.put("signature", signature);
            System.out.println(signature);
            this.setJsonString(JsonUtil.toJSONString(ret));
            return "json";
        }
        private static String byteToHex(final byte[] hash) {
            Formatter formatter = new Formatter();
            for (byte b : hash)
            {
                formatter.format("%02x", b);
            }
            String result = formatter.toString();
            formatter.close();
            return result;
        }
        private static String create_nonce_str() {
            return UUID.randomUUID().toString();
        }
        private static String create_timestamp() {
            return Long.toString(System.currentTimeMillis() / 1000);
        }
          /**
         * 发送get请求
         * @param url    路径
         * @return
         */ 
        public static String httpGet(String url){ 
            //get请求返回结果 
             String strResult = null; 
            try { 
                DefaultHttpClient client = new DefaultHttpClient(); 
                //发送get请求 
                HttpGet request = new HttpGet(url); 
                HttpResponse response = client.execute(request); 
      
                /**请求发送成功,并得到响应**/ 
                if (response.getStatusLine().getStatusCode() == org.apache.http.HttpStatus.SC_OK) { 
                    /**读取服务器返回过来的json字符串数据**/ 
                      strResult = EntityUtils.toString(response.getEntity()); 
                } else { 
                    logger.error("get请求提交失败:" + url); 
                } 
            } catch (IOException e) { 
                logger.error("get请求提交失败:" + url, e); 
            } 
            return strResult; 
        }
    

    展开全文
  • 参考微信JS-SDK说明文档 尽管作用不是很大1.首先在JSP页面引入http://res.wx.qq.com/open/js/jweixin-1.1.0.js2.通过config接口注入权限验证配置

    参考微信JS-SDK说明文档 看到网上很多都说微信的说明文档很坑,在我看来,仔细阅读的话,介绍还是很全的。

    1.首先在JSP页面引入http://res.wx.qq.com/open/js/jweixin-1.1.0.js

    2.通过config接口注入权限验证配置

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

    3.通过ready接口处理成功验证

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

    4.通过error接口处理失败验证

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

    5.调起微信扫一扫

    wx.scanQRCode({
        desc: 'scanQRCode desc',
        needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
        scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
        success: function (res) {
           // 回调
        }
        error: function(res){
              if(res.errMsg.indexOf('function_not_exist') > 0){
                   alert('版本过低请升级')
                }
         }
    });

    具体代码实现如下:

    scanBarcode.jsp

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="zh-CN">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <head>
        <link rel="stylesheet" href="http://203.195.235.76/jssdk/css/style.css"/>
        <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
        <link rel="stylesheet" href="../../../resources/css/example.css"/>
        <link rel="stylesheet" href="../../../resources/css/weui.min.css"/>
        <link rel="stylesheet" href="../../../resources/css/borrowScan.css"/>
    </head>
    <body>
    <div class="container" style="text-align: center;">
        <div class="body_bd body_fd">
            <a class="weui-btn weui-btn-primary weui-btn-zdy" id="scanQRCode1">
                <p>扫描条码</p>
            </a>
        </div>
    </div>
    <script type="text/javascript">
        $.ajax({
            url: "${pageContext.request.contextPath}/wechat/jsapisign",
            type: "post",
            data: {
                url: location.href.split('#')[0]
            },
            contentType: 'application/x-www-form-urlencoded;charset=utf-8',
            async: true,
            success: function (data) {
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                    appId: data.appid, // 必填,公众号的唯一标识
                    timestamp: data.timestamp, // 必填,生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填,生成签名的随机串
                    signature: data.signature,// 必填,签名,见附录1
                    jsApiList: ["scanQRCode"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
                });
            }
        });
    
        wx.ready(function () {
            // 9.1.2 扫描二维码并返回结果
            document.querySelector('#scanQRCode1').onclick = function () {
                wx.scanQRCode({
                    needResult: 1,
                    desc: 'scanQRCode desc',
                    success: function (res) {
                        //扫码后获取结果参数赋值给Input
                        var url = res.resultStr;
                        //商品条形码,取","后面的
                        if (url.indexOf(",") >= 0) {
                            var tempArray = url.split(',');
                            var barCode = tempArray[1];
                            window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${basePath}/wechat/toBookDetail?barCode=" + barCode + "&response_type=code&scope=snsapi_base&state=BINDFACE#wechat_redirect";
                        } else {
                            alert("请对准条形码扫码!");
                        }
                    }
                });
            };
        });
    
        //初始化jsapi接口 状态
        wx.error(function (res) {
            alert("调用微信jsapi返回的状态:" + res.errMsg);
        });
    </script>
    </body>
    </html>

    微信验签代码 WxController.java

      /**
         * 微信验签
         * @param url
         * @return
         */
        @RequestMapping(value = "/jsapisign", method = {RequestMethod.GET, RequestMethod.POST}, produces = MEDIATYPE_CHARSET_JSON_UTF8)
        @ResponseBody
        public String jsApiSign(String url) {
            //添加微信js签名信息
            Map<String, String> signMap = WXJsapiticket.jsApiSign(url);
            return JSON.toJSONString(signMap);
        }

    用到的方法类

    WXJsapiticket.java

    public class WXJsapiticket {
        private static Logger logger = LoggerFactory.getLogger(WxController.class);
        /**
         * 微信jsapi验签
         * @param url
         * @return
         */
        public static Map<String, String> jsApiSign(String url) {
            Map<String, String> ret = new HashMap<String, String>();
            String nonce_str = CheckUtil.create_nonce_str();
            String timestamp = CheckUtil.create_timestamp();
            String jsapi_ticket = getJsApiTicket();
            String string1 = CheckUtil.getString1(nonce_str,timestamp,jsapi_ticket,url);
            String signature = CheckUtil.getSha1(string1);
            ret.put("appid", WXConstants.APPID);//取你自己的公众号appid
            ret.put("url", url);
            ret.put("jsapi_ticket", jsapi_ticket);
            ret.put("nonceStr", nonce_str);
            ret.put("timestamp", timestamp);
            ret.put("signature", signature);
            logger.info("jsApiSign------url=" + url + "-----jsapi_ticket=" + jsapi_ticket + "--------nonceStr=" + nonce_str + "--------timestamp=" + timestamp + "-------signature=" + signature);
            return ret;
        }
        public static String getJsApiTicket(){
            Map<String,Object> map = JsApiTicketCache.getInstance().getJsApiTicketAndExpiresIn();
            return (String) map.get("jsapi_ticket");
        }
    }

    CheckUtil.java

    public class CheckUtil {
        public static final String  token = "xiaodou"; //开发者自行定义Token
        /**
         * 对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式 (即 key1=value1&key2=value2…)拼接成字符串string1
         * @param nonce_str
         * @param timestamp
         * @param jsapi_ticket
         * @param url
         * @return
         */
        public static String getString1(String nonce_str,String timestamp,String jsapi_ticket,String url){
            //1.定义数组存放nonce_str,timestamp,jsapi_ticket,url
            String[] arr = {"noncestr="+nonce_str,"timestamp="+timestamp,"jsapi_ticket="+jsapi_ticket,"url="+url};
            //2.对数组进行排序
            Arrays.sort(arr);
            //3.生成字符串
            StringBuffer sb = new StringBuffer();
            for(String s : arr){
                sb.append(s);
                sb.append("&");
            }
            sb.deleteCharAt(sb.length()-1);
            return sb.toString();
        }
        public static String getSha1(String str){
            if(str==null||str.length()==0){
                return null;
            }
            char hexDigits[] = {'0','1','2','3','4','5','6','7','8','9',
                    'a','b','c','d','e','f'};
            try {
                MessageDigest mdTemp = MessageDigest.getInstance("SHA1");
                mdTemp.update(str.getBytes("UTF-8"));
                byte[] md = mdTemp.digest();
                int j = md.length;
                char buf[] = new char[j*2];
                int k = 0;
                for (int i = 0; i < j; i++) {
                    byte byte0 = md[i];
                    buf[k++] = hexDigits[byte0 >>> 4 & 0xf];
                    buf[k++] = hexDigits[byte0 & 0xf];
                }
                return new String(buf);
            } catch (Exception e) {
                // TODO: handle exception
                return null;
            }
        }
        public static String create_nonce_str() {
            return UUID.randomUUID().toString();
        }
        public static String create_timestamp() {
            return Long.toString(System.currentTimeMillis() / 1000);
        }
    }

    JsApiTicketCatch.java(对jsapi_ticket的缓存可自行设置,redis或者存到数据库都是可行的)

    /**
     * 缓存ticket
     */
    public class JsApiTicketCache {
        //缓存jsapi_ticket的Map,map中包含jsapiTicket,expiresIn和缓存的时间戳time
        private Map<String, String> map = new HashMap<String,String>();
        private static JsApiTicketCache jsApiTicketCache = null;
        private JsApiTicketCache() { }
        // 静态工厂方法
        public static JsApiTicketCache getInstance() {
            if (jsApiTicketCache == null) {
                jsApiTicketCache = new JsApiTicketCache();
            }
            return jsApiTicketCache;
        }
        public Map<String, String> getMap() {
            return map;
        }
        public void setMap(Map<String, String> map) {
            this.map = map;
        }
        /**
         * 获取 jsapi_ticket expires_in
         * @return
         */
        public Map<String,Object> getJsApiTicketAndExpiresIn() {
            Map<String,Object> result = new HashMap<String,Object>();
            JsApiTicketCache jsApiTicketCache = JsApiTicketCache.getInstance();
            Map<String, String> map = jsApiTicketCache.getMap();
            String time = map.get("time");
            String jsapiTicket = map.get("jsapi_ticket");
            String expiresIn = map.get("expires_in");
            Long nowDate = new Date().getTime();
            if (jsapiTicket != null && time != null && expiresIn!=null) {
                //这里设置过期时间为微信规定的过期时间减去5分钟
                int outTime = (Integer.parseInt(expiresIn)-300) * 1000;
                if (nowDate - Long.parseLong(time) < outTime) {
                    System.out.println("-----从缓存读取jsapi_ticket:" + jsapiTicket);
                    //从缓存中拿数据为返回结果赋值
                    result.put("jsapi_ticket", jsapiTicket);
                    result.put("expires_in", expiresIn);
                }
            } else {
                JsapiTicket info = WeiXinUtil.getjsapiTicket();//实际中这里要改为你自己调用微信接口去获取jsapi_ticket和expires_in
                System.out.println("-----通过调用微信接口获取jsapi_ticket:" + info.getJsapiTicket());
                //将信息放置缓存中
                map.put("time", nowDate + "");
                map.put("jsapi_ticket", info.getJsapiTicket());
                map.put("expires_in", info.getExpiresIn()+"");
                //为返回结果赋值
                result.put("jsapi_ticket", info.getJsapiTicket());
                result.put("expires_in", info.getExpiresIn());
            }
            return result;
        }
    
    }

    WeiXinUtil.java

    jsapi_ticket_url="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";//GET方式请求获得jsapi_ticket
     /**
         * 获取jsapi_ticket
         * @return
         */
        public static JsapiTicket getjsapiTicket() {
            JsapiTicket jsapiTicket = null ;
            String accessToken = (String) AccessTokenCache.getInstance().getAcessTokenAndExpiresIn().get("access_token");
            String requestUrl = WXConstants.jsapi_ticket_url.replace("ACCESS_TOKEN", accessToken);
            JSONObject jsonObject = httpRequest(requestUrl, "GET", null);
            // 如果请求成功
            if (null != jsonObject) {
                try {
                    jsapiTicket = new JsapiTicket();
                    jsapiTicket.setJsapiTicket(jsonObject.getString("ticket"));
                    jsapiTicket.setExpiresIn(jsonObject.getInt("expires_in"));
                } catch (JSONException e) {
                    jsapiTicket = null;
                    // 获取token失败
                    log.error("获取ticket失败 errcode:{} errmsg:{}", jsonObject.getInt("errcode"), jsonObject.getString("errmsg"));
                }
            }
            return jsapiTicket;
        }

    accessToken的获取参照微信公众号开发之获取access_token,也可根据自己的定义获取。

    JsapiTicket.java

    public class JsapiTicket {
        private String id;
        private String jsapiTicket;
        private int expiresIn;
    
        public String getJsapiTicket() {
            return jsapiTicket;
        }
    
        public void setJsapiTicket(String jsapiTicket) {
            this.jsapiTicket = jsapiTicket;
        }
    
        public int getExpiresIn() {
            return expiresIn;
        }
    
        public void setExpiresIn(int expiresIn) {
            this.expiresIn = expiresIn;
        }
    
        public String getId() {
            return id;
        }
    
        public void setId(String id) {
            this.id = id;
        }
    }

    在这里总结一下开发中需要注意的地方(我遇到的坑):

    1.确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)://'部分,以及'?'后面的GET参数部分,但不包括'#'hash后面的部分。

    2.在生成string1时,拼接的参数均为小写,特别注意noncestr,而在jsp页面中为nonceStr(所有的参数一定要根据微信接口中的定义,否则会导致验签失败)。

    3.验证签名是否正确,可在 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign页面工具进行校验。

    展开全文
  • 安卓开发如何在自己的应用里面调用微信扫一扫功能,或者打开外部的url
  • 难点:如何调起企业微信扫一扫功能 实现步骤如下 1:注册企业微信,成为管理员,得到CORPID(企业ID,每个企业微信都有一个,企业下的所有应用都是同一个)和CORPSECRET(应用Secret,每个应用都有,各不相同) 企业...
  • 正好微信JS-SDK提供了调用微信扫一扫的功能接口,下面让我们来看看是如何实现的吧。 第一步、微信JS-SDK的使用步骤,配置信息的生成获取讲解:  关于JS-SDK的使用步骤和timestamp(时间戳),nonceStr(随机串),...
  • 由于需要调用微信扫一扫功能,所以要先配置一下微信需要的信息 1.官方接口文档:微信JS-SDK说明文档 2.配置js安全域名:登录公众号 -》公众号设置 -》功能设置 -》JS接口安全域名 开发步骤: 1.引入js文件 CDN引入...
  • Java实现微信扫一扫

    2016-12-27 17:44:07
    这两周做了项目关于微信端的处理,主要是实现调起微信扫一扫和通过微信获取地理位置。写在前面,不要急,这些东西对第一次开发微信端的人来说很重要: 不太善于布局,大家凑合看,主要看内容哈 我先详细的解释一些...
  • 最近微信公众号网页开发项目遇到一个问题:在吊起扫一扫功能的时候,Android端正常,iOS端总是提示config:fail 或者签名失败(sigxxxxxx)Vue的项目,前几个类似的项目没遇到这种问题。这次微信配置和吊起的代码也...
  • JAVA调用微信扫一扫

    2016-09-26 16:19:27
    java开发,调用微信扫一扫功能。
  • 这里所有的内容都是从微信接口页面里面参考过来的,加上自己的实践,我在此总结一下步骤和过程,如果下面的内容,有问题,请联系 QQ: 519483246 1.微信接口网址:...
  • 先引入 <scripttype="text/javascript"src=...</script> ...首先请求后台,拿到注册参数 ,下面的第行代码 data 为后台返回值 ...let data ={} //data为后台返回值 wx.config({ ...
  • 微信企业号或微信公众号调用扫一扫功能JS-SDK安全域名配置配置设置好之后下面就上代码java代码 JS-SDK安全域名配置 企业微信号 —— 安全域名配置需要通过验证(如下图) 微信公众 ——— 安全域名配置 设置 ——&...
  • 所以就需要使用微信公众平台提供的JSSDK来调用扫一扫功能。仅以此来记录自己的学习过程,也希望能帮助到有此需求的一些朋友。 过程中参考文章有:https://blog.csdn.net/u011327333/article/details/50439...
  • 功能需求:微信公众号里网页需要调用扫一扫功能 实现工具:微信JS-SDK接口 接口官方文档:微信JS-SDK说明文档 微信JS-SDK介绍: 微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。 ...
  • vue h5 调微信扫一扫 简单实用 1.第一步绑定域名,就是你在公众号登录之后要设置域名,还有白名单,这个喊后端去弄,前端又不晓得哪些是白名单,域名是好多 2.第二步:安装js-sdk的包(用npm 或yarn安装npm install ...
  • 微信公众号扫一扫接口开发 因为个人兴趣,研究了一下微信扫码支付接口 实战 1、 首先搭建一个springboot+mybatis+maven项目,创建html页面和js文件、确保直接访问html能够正常运行、html页面引入jweixin-1.0.0.js和...
  • 微信JSSDK实现微信自定义分享,微信扫一扫 前言: 由于微信使用的越来越多,也让大多数平台或者APP与微信建立了比较深的合作关系,我们公司自主研发的产品也是比较依赖于微信,最近也写了几篇关于微信的博客,本文...
1 2 3 4 5 ... 20
收藏数 1,989
精华内容 795
关键字:

微信开发 扫一扫 返回值