使用微信扫一扫功能总结

 

1、安装js文件

npm install weixin-js-sdk --save  

2、在main.js中引用 

//引入微信js
import wx from 'weixin-js-sdk';
Vue.prototype.$wx = wx;

3、调取后端数据配置wx.config

注意url是当前页面的url,到端口号，如当前页面http://192.168.2.41:9528/#/withPrefabricatedBarCodePage 

url则为http://192.168.2.41:9528/

getWXconfig() {
      var url = location.href.split("#")[0];
      this.$getData("frame/qua/wxuser/getWXconfig?url=" + url, "POST").then(
        (res) => {
          console.log(res);
          this.$wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.appId, // 必填，公众号的唯一标识
            timestamp: res.timeStamp, // 必填，生成签名的时间戳
            nonceStr: res.nonceStr, // 必填，生成签名的随机串
            signature: res.signature, // 必填，签名
            jsApiList: ["checkJsApi", "scanQRCode"], // 必填，需要使用的JS接口列表
          });
        }
      );
    },

4、 以下几个方法都是对官方文档中的例子稍加修改

示例代码：

http://demo.open.weixin.qq.com/jssdk/sample.zip

备注：链接中包含php、java、nodejs以及python的示例代码供第三方参考，第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制

//获取微信config配置信息
    @PassToken
    @ApiOperation(value="")
    @ResponseBody
    @RequestMapping(value="/getWXconfig",produces="application/json;charset=utf-8",method= RequestMethod.POST)
    public Map<String, String> getWXconfig(String url){
        String accessToken = getAccessToken();
        String jsapi_ticket = getTicket(accessToken);
        // 注意 URL 一定要动态获取，不能 hardcode
//        String url = "http://192.168.2.127/lxtz/tzjt/essayDetails.html?rowGuid=e855fba1-f80f-7170-ba92-76f842f0418d";

//        String url = request.getRequestURL().toString();
//        Map<String, String[]> parameterMap = request.getParameterMap();
//        String rowGuid = request.getParameter("rowGuid");
//        String urlGuid = url+"?rowGuid="+rowGuid;

        Map<String, String> ret = Sign.sign(jsapi_ticket, url);
        for (Map.Entry entry : ret.entrySet()) {
            System.out.println(entry.getKey() + ", " + entry.getValue());
        }
        ret.put("appId",appid);
        return ret;
    }

public String getAccessToken(){
        String url = "https://api.weixin.qq.com/cgi-bin/token";

        Map<String,String> params = new HashMap<>();
        params.put("grant_type","client_credential");
        params.put("appid",appid);
        params.put("secret",appsecret);

//        logger.info("获取accessToken接口参数:"+JSONObject.toJSONString(params));
        String res = "";
        try {
            res = HttpUtil.sendGet(url, params);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        JSONObject obj = JSONObject.parseObject(res);
        String access_token = obj.getString("access_token");
        return access_token;
    }


public String getTicket(String accessToken){
        String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket";

        Map<String,String> params = new HashMap<>();
        params.put("type","jsapi");
        params.put("access_token",accessToken);

        logger.info("获取JsapiTicket接口参数:"+JSONObject.toJSONString(params));
        String res = "";
        try {
            res = HttpUtil.sendGet(url, params);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        JSONObject obj = JSONObject.parseObject(res);
        String ticket = obj.getString("ticket");
        return ticket;
    }


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("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);

        return ret;
    }