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

前端代码：
引入微信对象

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

主要代码：

wxscan() { // 调用扫一扫const that = this;getWxScan(this.url).then((res) => { // eslint-disable-linethis.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 一定要动态获取，不能 hardcodeString 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);
}
}

前端页面调用微信扫一扫功能相关推荐

前端JS调用微信JSAPI之扫一扫
扫一扫按钮增加点击事件 <div class="a2" onclick="onQscan()"><span>扫一扫</span&g ...
asp源码爱好者福利,asp调用微信扫一扫代码,用asp写的调用微信内置扫一扫功能源码下载
接到一个用户的需求,要在他的手机版网页里实现扫一扫功能,扫出他的产品编号入库,这太简单了,花了几分种时间给他实现一下. 微信扫一扫必须使用微信内置浏览器访问此页面才能查看效果: 程序功能: 通过微信J ...
微信公众号页面支付接口java,[Java教程]微信公众号支付（三）：页面调用微信支付JS并完成支付...
[Java教程]微信公众号支付(三):页面调用微信支付JS并完成支付 0 2015-09-15 15:00:30 一.调用微信的JS文件 1.首先要绑定[JS接口安全域名],"公众号设置&q ...
H5页面调用微信支付
1.H5页面使用微信支付,首先需要注册微信公众号,在设置与开发>公众号设置>功能设置中配置业务域名.JS接口安全域名.网页授权域名.支付功能页面需在此域名链接下的页面. 2.加入域名后,就 ...
html页面调用微信扫一扫功能,微信JSSDK调用微信扫一扫功能的方法
如何利用微信jssdk调用微信扫一扫功能?具体内容如下 1. 确保有调起微信扫一扫接口权限,测试号可能不行: 2. 导入相关js 3. 页面触发扫码元素 4. 相关js代码 var _appid ...
前端JS调用微信扫一扫二维码
来源: 最近做一个项目,H5页面,在微信中打开,里面有个功能,就是点击按钮弹出微信二维码扫一扫. 项目截图: 暂时没有图,下次再补上.就是页面点击按钮,弹出扫二维码的窗口我只负责前端,所以只上前 ...
公众号开发-移动端h5页面调用微信扫一扫
前言: 大家好,我是前端小陈.今天为大家讲一下微信公众号开发,调用微信的JSSDK的案例. 前不久,接到这么一个需求:在H5网页实现扫一扫功能. 要求:微信端以及浏览器均可以实现扫一扫功能,而且不能 ...
HTML——微信浏览器H5页面调用微信扫一扫
使用JS-SDK调用微信扫一扫,需要有公众号支持,通过公众号生成JS-SDK使用权限签名.本文直接调用已封装好的接口来获取随机数(noncestr).时间戳(timestamp).签名(signatu ...
微信公众号页面调用微信扫一扫
本以为调用微信扫一扫很容易,结果看了微信的开发者文档,正如大家所说,微信的开发文档写的一塌糊涂,非常的不详细. 转载:https://www.imooc.com/article/42734 从而导致基 ...

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

前端页面调用微信扫一扫功能相关推荐

最新文章

热门文章