资讯专栏INFORMATION COLUMN

微信公众号 扫一扫

msup / 2968人阅读

使用 weixin-java-tools 完成公众端唤起微信扫一扫

如果没有引入相关的jar 可以查看之前的文章 点我

Java代码 使用 wxMpService 很方便获取一些微信需要的参数

</>复制代码

  1. @Autowired
  2. private WxMpService wxMpService;
  3. @GetMapping(path = "scannerQrcode")
  4. public Result scannerQrcode(HttpServletRequest request) {
  5. try {
  6. String url = request.getHeader("referer");
  7. WxJsapiSignature jsapiSignature = wxMpService.createJsapiSignature(url);
  8. return Result.success(jsapiSignature);
  9. } catch (Exception e) {
  10. e.printStackTrace();
  11. return Result.error("获取微信配置失败");
  12. }
  13. }

前端拿到对象后直接塞到配置中

</>复制代码

  1. // 这里是加载事件,加载的时候取获取参数
  2. var data = {};
  3. $.ajax({
  4. type : "get",
  5. url : globalUrl+"/wechatScanne/scannerQrcode",
  6. data : {},
  7. dataType : "json",
  8. beforeSend: function (xhr) {
  9. xhr.setRequestHeader("token", $.cookie("token"));
  10. },
  11. crossDomain: true,
  12. success:function (res) {
  13. data=res.data;
  14. }
  15. })
  16. //点击事件时 填充config 并且调用扫一扫
  17. $("#item1 ul").on("tap",".border-orange",function(){
  18. // 这里是个坑 ,config 一定是在参数存在后才加载,不然会出错。这里把config 放在点击事件里 而获取参数是在加载时完成的
  19. wx.config({
  20. debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  21. appId: data.appId, // 必填,公众号的唯一标识
  22. timestamp: data.timestamp, // 必填,生成签名的时间戳
  23. nonceStr: data.nonceStr, // 必填,生成签名的随机串
  24. signature: data.signature,// 必填,签名,见附录1
  25. jsApiList: [
  26. "checkJsApi",
  27. "startRecord",
  28. "stopRecord",
  29. "translateVoice",
  30. "scanQRCode",// 微信扫一扫接口
  31. "openCard"
  32. ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
  33. });
  34. //这里是唤醒扫一扫的代码
  35. wx.ready(function() {
  36. wx.scanQRCode({
  37. needResult : 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  38. scanType : [ "qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
  39. success : function(res) {
  40. var result = res.resultStr;
  41. // result 为扫描结果
  42. alert(result);
  43. },
  44. error : function(){
  45. //console.log("123");
  46. alert("错误")
  47. }
  48. });
  49. });
  50. })

扫一扫完成。
好记性不如烂笔头记录下代码和坑...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/77253.html

相关文章

  • vue.js 在微信JS-SDK中分享、微信支付、一扫等签名失效的解决

    摘要:处理自己的逻辑四重点来了,解决微信无效的问题使用的网友都知道,路由上带有做路由的跳转,而在发过去做微信验证的的时候,会被干掉,最终导致签名无效。 一,先登陆微信公众号后台绑定js安全域名,不需要加http或https,详情百度。 二、信公众号后台设置服务器的IP为白名单,否则无法获取access_token,详情百度 三、引入wx-js-sdk 1.使用script标签 http://...

    jay_tian 评论0 收藏0
  • vue.js 在微信JS-SDK中分享、微信支付、一扫等签名失效的解决

    摘要:处理自己的逻辑四重点来了,解决微信无效的问题使用的网友都知道,路由上带有做路由的跳转,而在发过去做微信验证的的时候,会被干掉,最终导致签名无效。 一,先登陆微信公众号后台绑定js安全域名,不需要加http或https,详情百度。 二、信公众号后台设置服务器的IP为白名单,否则无法获取access_token,详情百度 三、引入wx-js-sdk 1.使用script标签 http://...

    keithxiaoy 评论0 收藏0
  • vue.js 在微信JS-SDK中分享、微信支付、一扫等签名失效的解决

    摘要:处理自己的逻辑四重点来了,解决微信无效的问题使用的网友都知道,路由上带有做路由的跳转,而在发过去做微信验证的的时候,会被干掉,最终导致签名无效。 一,先登陆微信公众号后台绑定js安全域名,不需要加http或https,详情百度。 二、信公众号后台设置服务器的IP为白名单,否则无法获取access_token,详情百度 三、引入wx-js-sdk 1.使用script标签 http://...

    付永刚 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<