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 +
"×tamp=" + 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);
}
}