vue调用微信扫描条形码

整个调用方分为三大块：
一：后端
1.提供一个接口给前端，返回相关配置，前端传递url给后台
/**
*调用微信的扫一扫相关配置
* @param
* @param
*/
@PostMapping(“getConfig”)
public void getConfig (@RequestParam String url) {
String ticket = WxUntils.getTicket();
Map<String, String> sign = Sign.sign(ticket, url);
Map<String,Object> map = new HashMap<>();
map.put(“wxConfig”, sign);
sign.put(“appId”, WxUntils.APP_ID);
setData(“data”, sign);
}
后端使用到的工具类：
public class Sign {
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());
        System.out.println("signature +"+signature);
    } catch (Exception 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;
}

public static String create_nonce_str() {
    return UUID.randomUUID().toString().replace("-", "").substring(0, 16);
}

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

}

public class WxUntils {
public static String APP_ID =“自己补充”
private static String AppSecret = “自己补充”

/**
 * @Title: getTicket
 * @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);

    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);     
    String ticket = (String) JSONObject.parseObject(backTicket).get("ticket"); 
    return ticket;
}

/**
 * @return
 * @title getAccessToken
 * @Description 获取访问令牌
 */
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;
}

/**
 * @param url
 * @param charset
 * @param timeout
 * @return
 * @title sendGet
 * @Description
 */
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;
                System.out.println("result  +"+result);
            }
            in.close();
        } catch (IOException e) {
            e.printStackTrace();
            return result;
        }
    } catch (Exception e) {
        e.printStackTrace();
        return result;
    }
    return result;
}

public static void main(String[] args) {

}

二：前端
1.添加扫描按钮：
<van-button type=“info” native-type=“button” size=“small” @click=“saoBarcode(item.drugid)”>
点击扫描条码

2. 打开微信扫一扫
saoBarcode(drugid) {
let _that = this
// wx.config({
// beta: true,
// debug: false,
// appId: _that.configData.appId,
// timestamp: _that.configData.timestamp,
// nonceStr: _that.configData.nonceStr,
// signature: _that.configData.signature,
// jsApiList: [‘scanQRCode’]
// });
wx.scanQRCode({
desc: ‘scanQRCode desc’,
needResult: 1,
scanType: [‘barCode’],
success: function (res) {
let result = res.resultStr
alert(result)
if (result.includes(’,’)) {
result = result.split(’,’)[1];
_that.queryDrugDetailByBarcode({barcode: result}, drugid)
}
}
})
},
3. // 微信js-sdk配置
getSign() {
let _that = this
let u = navigator.userAgent;
let isAndroid = u.indexOf(“Android”) > -1 || u.indexOf(“Linux”) > -1; //g
let isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
let url = “”;
if (isAndroid) {
console.log(“安卓”)
url = window.location.href;
}
if (isIOS) {
console.log(“苹果”)
url = window.location.href.split("#")[0]; //hash后面的部分如果带上ios中config会不对
}
_that.$dataControl.getConfig({
url: url
}).then(res => {
// let data = res.data
_that.configData = res.data
wx.config({
beta: true,
debug: false,
appId: _that.configData.appId,
timestamp: _that.configData.timestamp,
nonceStr: _that.configData.nonceStr,
signature: _that.configData.signature,
jsApiList: [‘scanQRCode’]
});
wx.ready(() => {
console.log(‘微信js-sdk配置 配置成功’);
})
wx.error(() => {
console.log(‘微信js-sdk配置 配置失败’);
})
}).catch(err => {
console.log(err);
})
},
三：公众号配置
1.公众号里面配置js域名

会提示放一个txt文件，放到你的应用下面，如：/usr/local/tomcat/webapp/*/template/.txt
txt文件的名字要使用公号里面提示的名字，要不然配置不成功
如：这里的文件名就是“MP_verify_TsNgOO0T0dyi7VT3.txt”

2.应用服务器的出口ip加到白名单里面