前端页面调用微信扫一扫功能

前端代码：
引入微信对象

import wx from '@/plugins/wechat/wechat';

主要代码：

wxscan() { // 调用扫一扫
      const that = this;
      getWxScan(this.url).then((res) => { // eslint-disable-line
        this.jsonData = res.data;
        if (!wx) {
          return false;
        }
        wx.config({
          // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          debug: false,
          // 必填，公众号的唯一标识
          appId: this.jsonData.appId,
          // 必填，生成签名的时间戳
          timestamp: "" + this.jsonData.wxConfig.timestamp, // eslint-disable-line
          // 必填，生成签名的随机串
          nonceStr: this.jsonData.wxConfig.nonceStr,
          // 必填，签名
          signature: this.jsonData.wxConfig.signature,
          // 必填，需要使用的JS接口列表，所有JS接口列表
          jsApiList: ['checkJsApi', 'scanQRCode'],
        });
        // return true;
      });
      wx.error((res) => {
        alert('出错了:' + res.errMsg); // eslint-disable-line
        // 这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
      });
    },
    goWxClick() {
      wx.ready(() => {
        wx.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ['qrCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: (res) => {
            window.location = res.resultStr;
            // alert(JSON.stringify(res)); // eslint-disable-line
            // that.number = res.resultStr.substring(res.resultStr.indexOf('=') + 1);
            // that.searchResults();
          },
        });
      });

注意：如果没有特殊要求可以将这个两部分写在一个方法里，但是在这里通过点击调用微信的扫一扫需要写在两个方法中，在created生命周期中先调用wxscan()方法获取微信的相关信息等，点击后调用微信的扫一扫，如果载一个方法中通过点击调起，就会出现第一次点击无法调起，第二次点击之后才可调起。
注意：
观看JSSDK的使用步骤加以理解。
后端代码：

/**
 *
 * @Title: getWxConfigs
 * @Author: DXW
 * @Date: 2019年08月20日 下午 04:26:55
 * @Description: 生成调用扫一扫需要的签名
 * @Param:
 * @Return:
 * @Throws:
 */
@RequestMapping(value = "/getWxConfigs", method = RequestMethod.POST)
public ResponseResult getWxConfigs(HttpServletRequest request, HttpServletResponse response){
    ResponseResult responseResult = new ResponseResult(RESULT_CODE_0.getKey(),"");
    /*当前页面地址 与微信js接口域相呼应 **/
    String url = "http://"+WxUntils.APP_DOMAIN;
    /*获取微信需要的ticket**/
    String ticket = WxUntils.getTicket();
    Map<String, String> sign = Sign.sign(ticket, url);
    Map<String,Object> map = new HashMap<>();
    map.put("wxConfig", sign);
    map.put("appId", WxUntils.APP_ID);
    responseResult.setData(map);
    System.out.println(map);
    return responseResult;
}
获取签名工具类
package com.thinkgem.jeesite.modules.sys.utils;

import com.alibaba.fastjson.JSONObject;
import com.thinkgem.jeesite.modules.sys.constant.AppLoginEnum;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;


public class WxUntils {
    public static String APP_ID = String.valueOf(AppLoginEnum.WX_APPID);
    private static String AppSecret = String.valueOf(AppLoginEnum.APP_SCREPT);
    public static String APP_DOMAIN =String.valueOf(AppLoginEnum.APP_DOMAIN);//安全域名 注一定要后面带'/',例如"ajtsbb.jlsenssang.com/",因为这个调试了一天才找的问题所在

/**
 *
 * @Title: getTicket
 * @Author: DXW
 * @Date: 2019年08月20日 下午 06:52:44
 * @Description: 生成ticket
 * @Param:
 * @Return:
 * @Throws:
 */
public static String getTicket(){
    String urlToken="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+APP_ID+"&secret="+AppSecret+"";
    String backToken = sendGet(urlToken,"utf-8",60000);
    System.out.println("token:"+backToken);
    String accessToken = (String) JSONObject.parseObject(backToken).get("access_token");
    String url="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+accessToken+"&type=jsapi";
    String backTicket = sendGet(url,"utf-8",60000);
    System.out.println("Ticket:"+backTicket);
    String ticket = (String) JSONObject.parseObject(backTicket).get("ticket");
    System.out.println(ticket);
    return ticket;
}
/**
 *
 * @title  getAccessToken
 * @Description 获取访问令牌
 * @author daixiaowei
 * @Date 2018-5-18上午11:07:18
 * @return
 */
public static String getAccessToken(){
    String url="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+APP_ID+"&secret="+AppSecret+"";
    String backData = sendGet(url,"utf-8",10000);
    String accessToken = (String) JSONObject.parseObject(backData).get("access_token");
    return accessToken;
}
/**
 *
 * @title  sendGet
 * @Description
 * @author daixiaowei
 * @Date 2018-5-18上午11:15:33
 * @param url
 * @param charset
 * @param timeout
 * @return
 */
public static String sendGet(String url, String charset, int timeout)
{
    String result = "";
    try
    {
        URL u = new URL(url);
        try
        {
            URLConnection conn = u.openConnection();
            conn.connect();
            conn.setConnectTimeout(timeout);
            BufferedReader in = new BufferedReader(new InputStreamReader(conn.getInputStream(), charset));
            String line="";
            while ((line = in.readLine()) != null)
            {
                result = result + line;
            }
            in.close();
        } catch (IOException e) {
            return result;
        }
    }
    catch (MalformedURLException e)
    {
        return result;
    }
    return result;
}
}

package com.thinkgem.jeesite.modules.sys.entity;

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;

public class Sign {
    /*public static void main(String[] args) {
        String ticket = WxUtils.getTicket();
        // 注意 URL 一定要动态获取，不能 hardcode
        String url = "http://"+WxUtils.APP_DOMAIN+"/RAFFLE/gotoLetter";
        Map<String, String> ret = sign(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;
}

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().replace("-", "").substring(0, 16);
}

private static String create_timestamp() {
    return Long.toString(System.currentTimeMillis() / 1000);
}
}