微信公众号开发——JS-SDK扫一扫接口调用

概述

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

相应官方文档

微信公众平台开发文档
 JS-SDK说明文档

接口调用步骤（整体步骤相对还是比较简单的）

1.配置JS接口安全域名（此处类似于搭建微信测试号，可通过Natapp等映射工具实现）
2.JS-SDK验证（具体步骤会在代码中标明）
3.调起微信扫一扫接口

调用思路：

1.验证JS-SDK

官网文档

来源JS-SDK说明文档附录6
下载后的示例代码

import java.util.UUID;
import java.util.Map;
import java.util.HashMap;
import java.util.Formatter;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.io.UnsupportedEncodingException;  

class Sign {
    public static void main(String[] args) {
        String jsapi_ticket = "jsapi_ticket";

        // 注意 URL 一定要动态获取，不能 hardcode
        String url = "http://example.com";
        Map<String, String> ret = sign(jsapi_ticket, url);
        for (Map.Entry entry : ret.entrySet()) {
            System.out.println(entry.getKey() + ", " + entry.getValue());
        }
    };

    public static Map<String, String> sign(String jsapi_ticket, String url) {
        Map<String, String> ret = new HashMap<String, String>();
        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;
    }

/**
     * 随机加密
     *
     * @param hash
     * @return
     */
    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;
    }

 /**
     * 产生随机串--由程序自己随机产生
     *
     * @return
     */
    private static String create_nonce_str() {
        return UUID.randomUUID().toString();
    }

 /**
     * 由程序自己获取当前时间
     *
     * @return
     */
    private static String create_timestamp() {
        return Long.toString(System.currentTimeMillis() / 1000);
    }
}

2. 最主要的步骤：集齐示例所需的参数

  url     jsapi_ticket      nonceStr(已有)    timestamp(已有)    signature

请注意划重点的地方

3.jsapi_ticket 的获取：

获取JS-SDK的 accesstoken （注意:其与获取网页授权的accesstoken不同）

        JSONObject accesTokenObject = JSONObject.fromObject(Doget.get(ACCESS_TOKEN_URL));
        String accesToken = (String) accesTokenObject.get("access_token");
        System.out.println("微信返回的accesToken" + accesToken);

获取jsapiTicket

 JSONObject jsapiTicketObject = JSONObject.fromObject(Doget.get("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accesToken + "&type=jsapi"));
        String jsapiTicket = (String) jsapiTicketObject.get("ticket");
        System.out.println("微信返回的jsapiTicket" + jsapiTicket);

最后对官网给的示例进行修改即可

源码（直接复制就可使用）

URL请求类

package com.itcast.util.wechatUtil;

import java.io.InputStream;
import java.net.URL;
import java.net.URLConnection;

public class Doget {

    /**
     * 功能描述:向指定地址发送get请求 （**发送get请求地址的时候基本都会去调用到**）
     *
     * @param url
     * @date: 2019/1/13 15:27
     * @return:
     */

    public static String get(String url) {
        try {
            URL urlObj = new URL(url);
            //开连接
            URLConnection urlConnection = urlObj.openConnection();
            //读取返回的JSON对象
            InputStream inputStream = urlConnection.getInputStream();
            byte[] b = new byte[1024];
            int leng;
            StringBuilder sb = new StringBuilder();
            while ((leng = inputStream.read(b)) != -1) {
                sb.append(new String(b, 0, leng));
            }
            return sb.toString();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

}

完善后的SignUtil

import net.sf.json.JSONObject;

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 SignUtil {
    public static final String ACCESS_TOKEN_URL = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + SignUtil.APPID + "&secret=" + SignUtil.APPSECRET + "";

    public static Map<String, String> sign(String url) {
        //获取JS-SDK的 accesstoken 注意:其与获取网页授权的accesstoken不同
        JSONObject accesTokenObject = JSONObject.fromObject(Doget.get(ACCESS_TOKEN_URL));
        String accesToken = (String) accesTokenObject.get("access_token");
        System.out.println("微信返回accesToken" + accesToken);

        //获取ticket
        JSONObject jsapiTicketObject = JSONObject.fromObject(Doget.get("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accesToken + "&type=jsapi"));
        String jsapiTicket = (String) jsapiTicketObject.get("ticket");
        System.out.println("微信返回jsapiTicket" + jsapiTicket);

        Map<String, String> ret = new HashMap<String, String>();
        String nonce_str = create_nonce_str();
        String timestamp = create_timestamp();
        String string1;
        String signature = "";

        //注意这里参数名必须全部小写，且必须有序
        string1 = "jsapi_ticket=" + jsapiTicket +
                "&noncestr=" + nonce_str +
                "&timestamp=" + timestamp +
                "&url=" + url;
        System.out.println("string1=" + 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();
        } catch (Exception e) {
            e.printStackTrace();
        }

        ret.put("url", url);
        ret.put("jsapi_ticket", jsapiTicket);
        ret.put("nonceStr", nonce_str);
        ret.put("timestamp", timestamp);
        ret.put("signature", signature);
        ret.put("appId", 你的APPID);  //此时可通过配置引入

        System.out.println("1.ticket(原始)=" + jsapiTicket);
        System.out.println("2.url=" + ret.get("url"));
        System.out.println("3.jsapi_ticket（处理后）=" + ret.get("jsapi_ticket"));
        System.out.println("4.nonceStr=" + ret.get("nonceStr"));
        System.out.println("5.signature=" + ret.get("signature"));
        System.out.println("6.timestamp=" + ret.get("timestamp"));

        return ret;
    }

    /**
     * 随机加密
     *
     * @param hash
     * @return
     */
    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;
    }

    /**
     * 产生随机串--由程序自己随机产生
     *
     * @return
     */
    private static String create_nonce_str() {
        return UUID.randomUUID().toString();
    }

    /**
     * 由程序自己获取当前时间
     *
     * @return
     */
    private static String create_timestamp() {
        return Long.toString(System.currentTimeMillis() / 1000);
    }
}

控制层代码（主要就是获取URL进行JS-SDK验证）

  @RequestMapping("/getwechatscan")
    @ResponseBody
    public Result wechatscan(@RequestParam String URL) {
        //转义
        String urlDecode = URLDecoder.decode(URL);
        Map<String, String> map = JsSignUtil.sign(urlDecode);
        return Result.success(map);
    }

前端接口调用代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="UTF-8">
    <title>微信扫一扫</title>
    <%--步骤二：引入JS文件--%>
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>

<input type="text" id="tesss">
<button id="scanQRCode" onclick="getWeixinResult()">扫描二维码</button>
</body>
<script>
    $(document).ready(function () {
        getWeixinParams();
    });

    //微信JS—SDK验证
    function getWeixinParams() {
        //不带参数URL
        // var WX_url = window.location.origin + window.location.pathname;
        //请求地址
        alert(window.location.origin);
        //请求方法
        alert(window.location.pathname);
        //带参数URL
        var WX_url = location.href.split('#')[0];
        alert(WX_url);
        $.ajax({
            type: "post",
            url: "/getwechatscan",
            data: {"URL": WX_url},
            datatype: "json",
            success: function (data) {
                var appId = data.data.appId;
                var nonceStr = data.data.nonceStr;
                var signature = data.data.signature;
                var timestamp = data.data.timestamp;
                getWeixinParamsCallBack(appId, timestamp, nonceStr, signature);
            },
            error: function () {
                alert("出错了");
            }
        });
    }
    //选择要调用的接口 接口名称
    function getWeixinParamsCallBack(appId, timestamp, nonceStr, signature) {
//步骤三：通过config接口注入权限验证配置       
 wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: appId, // 必填，公众号的唯一标识
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr: nonceStr, // 必填，生成签名的随机串
            signature: signature, // 必填，签名
            jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
        });
       //步骤四：通过ready接口处理成功验证(可不写 这里只是跟你说配置成功而已)
        wx.ready(function () {
            alert("成功配置了微信JS");
        });
        //步骤五：通过error接口处理失败验证
        wx.error(function (res) {
            alert("相应数据获取出错了：" + res.errMsg);
        });
    }

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

                $("#tesss").val(result);
//                alert("扫描成功::扫描码=" + result);
            }
        });
    }

</script>
</html>

结果

最后编辑于：2019.10.08 09:04:54

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 196,165评论 5赞 462
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 82,503评论 2赞 373
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 143,295评论 0赞 325
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,589评论 1赞 267
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,439评论 5赞 358
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,342评论 1赞 273
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,749评论 3赞 387
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,397评论 0赞 255
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,700评论 1赞 295
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,740评论 2赞 313
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,523评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,364评论 3赞 314
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,755评论 3赞 300
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,024评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,297评论 1赞 251
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,721评论 2赞 342
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,918评论 2赞 336

微信公众号开发——JS-SDK扫一扫接口调用

概述

相应官方文档

接口调用步骤（整体步骤相对还是比较简单的）

调用思路：

1.验证JS-SDK

2. 最主要的步骤：集齐示例所需的参数

3.jsapi_ticket 的获取：

获取JS-SDK的 accesstoken （注意:其与获取网页授权的accesstoken不同）

获取jsapiTicket

最后对官网给的示例进行修改即可

源码（直接复制就可使用）

URL请求类

完善后的SignUtil

控制层代码（主要就是获取URL进行JS-SDK验证）

前端接口调用代码

结果

推荐阅读更多精彩内容