微信公众号对接扫一扫功能和其他功能

官方连接（申请公众号测试账号）

https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Requesting_an_API_Test_Account.html

一、进入测试账户

二、绑定域名（以测试账户为列）

如果没有域名，可以使用内网穿透。我使用的是https://www.39nat.com/tunnel。或者http://localhost:9200/#/dashboard**(cpolar)**


后面跟的是我请求服务器的地址，请求接口。java代码如下

    @GetMapping("/wxService")
    public void wxService(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String signature = req.getParameter("signature");
        String timestamp = req.getParameter("timestamp");
        String nonce = req.getParameter("nonce");
        String echostr = req.getParameter("echostr");
        System.out.println(signature);
        System.out.println(timestamp);
        System.out.println(nonce);
        System.out.println(echostr);

        if (check(timestamp, nonce, signature)) {
            System.out.println("接入成功");
            PrintWriter out = resp.getWriter();
            out.println(echostr);
            out.flush();
            out.close();
        } else {
            System.out.println("接入失败");
        }

        System.out.println("get");
    }

    public static boolean check(String timestamp, String nonce, String signature) {
        String[] strs = new String[] {TOKEN, timestamp, nonce};
        Arrays.sort(strs);

        String str = strs[0] + strs[1] +strs[2];
        String mysign = sha1(str);
        System.out.println(signature);
        System.out.println(mysign);
        return mysign.equalsIgnoreCase(signature);
    }

备注：内网穿透需要更改配置，如下更改

https://blog.csdn.net/qq_40438883/article/details/108733454

三、引入 JS 文件

npm install weixin-js-sdk
npm install weixin-jsapi
import wx from 'weixin-jsapi'

如果npm时报错，可使用此方法解决。
https://blog.csdn.net/qq_25378657/article/details/107788134

在这里插入代码片

在用到的ts页面引入

import wx from 'weixin-jsapi'

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

需要jsapi_ticket的值，通过token来生成

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx359d4f7689e50e0b&secret=4bf613a504cd8eda9fa49e0d23f5e346

使用你自己的appid和secret，生成结果

拿到这个token在生成ticket的

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=58_Af91l4tlMqjmmEQdF-z9YD2K99hsINSEeB60WjUWWCo8ETwCkVytmxCHK28nNfyfOokBs4G9g3WTJOKAXxLfC2Man09Mlyk4BdjWvzfUKnfoH4RJKdt_-st1y0vp-KG2FnuEvPN3SFekYegiVAEeAEAMRV&type=jsapi

前端代码

  configTest() {
    let params  = new HttpParams()
    	.set('url', window.location.href.split('#')[0])
    	.set('jsapi_ticket', 'O3SMpm8bG7kJnF36aXbe8yKGg8KO6sID8q5EgXn1Nl9E_8GQRBgAiMGNTfoMNxIsaKzkmOnmLBLYk-fEFIEClQ')

    this.httpService.post('/collect/sign/sign', params, (res: any) => {
      console.log(res);
      wx.config({
        debug: true,   //是否调试，true，会弹窗
        appId: 'wx359d4f7689e50e0b', //得到这个东西，首先必须有一个公众号，或者企业号，如果已经拥有了，你可以就知道AppId在哪里了
        timestamp: res.result.timestamp,//生成签名的时间戳，随机数，之后会用这个生成一个签名
            nonceStr: res.result.nonceStr,//生成签名的随机串，随机串，之后会用这个生成一个签名
        signature: res.result.signature,//这个就是签名了，在步骤4，我会详细讲解
        jsApiList: [
          'openLocation', //开启位置跳转功能
          'scanQRCode' //开启扫一扫功能，这里还可以添加更多的功能，比如微信支付
        ]
    });
    })
  }

java代码

    @PostMapping("/sign")
    public Result<Object> getSign(String url, String jsapi_ticket) {
        Map<Object, Object> data = new HashMap<>();
        Map<String, String> ret = sign(jsapi_ticket, url);
        for (Map.Entry entry : ret.entrySet()) {
            data.put(entry.getKey(), entry.getValue());
        }

        return Result.ok(data);
    }
    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;
    }

    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);
    }

五、对接微信扫一扫功能和位置功能

  setCode() {
    wx.ready(function() {
      wx.checkJsApi({
        jsApiList: ['scanQRCode'], // 需要检测的 JS 接口列表，所有 JS 接口列表见附录2,
        success: function(res: any) {
          console.log(res);
        }
      });

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

 	wx.openLocation({
        latitude: 31.621611, // 纬度，浮点数，范围为90 ~ -90
        longitude: 117.889349, // 经度，浮点数，范围为180 ~ -180。
        name: '合肥七中', // 位置名
        address: '合肥七中附件的地方', // 地址详情说明
        scale: 14, // 地图缩放级别,整形值,范围从1~28。默认为最大
    });

    });
  }

五、测试功能

扫码关注测试公众号，访问你内网穿透的地址的地址

https://qhy6q8.39nat.com/#/

访问扫一扫，正常