前后端分离（VUE+SPRINGBOOT）十六 微信移动端开发 扫一扫开发

VUE在微信中浏览器，通过接口可以调用手机相应

的硬件，比如微信的扫一扫。

同样，VUE也有微信相应的组件，做了一些封装，我们

也可以拿来用

1，安装   npm install weixin-js-sdk

2,   需要调用扫一扫的页面引用   import wx from 'weixin-js-sdk'

3，点击扫一扫事件代码

busOutCheck(){
  let _this=this;
  this.api({
    url: "/webchat/getSign",  --调用后台，并返回对应的签名信息
    method: "get",
    params:{
      url:window.location.href.split('#')[0] --生成签名需要的参数，这个域名必须通过微信验证
    }
  }).then(data => {
    wx.config({
      // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      debug: false,
      // 必填，公众号的唯一标识
      appId: data.appId,
      // 必填，生成签名的时间戳
      timestamp: "" + data.timestamp,
      // 必填，生成签名的随机串
      nonceStr: data.nonceStr,
      // 必填，签名
      signature: data.signature,
      // 必填，需要使用的JS接口列表，所有JS接口列表
      jsApiList: ['scanQRCode']
    });

    wx.error(function (res) {
      alert("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
    });

    wx.ready(function () {
      wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
          console.log(res)      //这个就是扫出来的二维码的值
        }
      });
    });


    console.log(data)
  })
}

4，后台生成签名代码

public class WebChatSign {

    public static JSONObject sign(String jsapiTicket, String url,String appid) {
        
        JSONObject ret = new JSONObject();
        String nonceStr = create_nonce_str();
        String timestamp = create_timestamp();
        String string1;
        String signature = "";

        //注意这里参数名必须全部小写，且必须有序
        string1 = "jsapi_ticket=" + jsapiTicket +
                "&noncestr=" + nonceStr +
                "&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("appId", appid);
        ret.put("jsapi_ticket", jsapiTicket);
        ret.put("nonceStr", nonceStr);
        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);
    }
}