java代码

  1. <dependency>
  2.   <groupId>com.github.binarywang</groupId>
  3.   <artifactId>weixin-java-mp</artifactId>
  4.   <version>4.0.7.B</version>
  5. </dependency>
  1. import com.github.binarywang.wxpay.config.WxPayConfig;
  2. import com.github.binarywang.wxpay.service.WxPayService;
  3. import com.github.binarywang.wxpay.service.impl.WxPayServiceImpl;
  4. import lombok.extern.slf4j.Slf4j;
  5. import me.chanjar.weixin.mp.api.WxMpService;
  6. import me.chanjar.weixin.mp.api.impl.WxMpServiceImpl;
  7. import me.chanjar.weixin.mp.config.WxMpConfigStorage;
  8. import me.chanjar.weixin.mp.config.impl.WxMpDefaultConfigImpl;
  9. import org.springframework.beans.factory.annotation.Value;
  10. import org.springframework.context.annotation.Configuration;
  12. import javax.annotation.PostConstruct;
  14. /**
  15.  *  微信支付自动配置
  16.  */
  17. @Configuration
  18. @Slf4j
  19. public class WxMpAutoConfiguration {
  21.     private static WxMpService mpService;
  23.     public static WxMpService getWxMpService() {
  24.         return mpService;
  25.     }
  27.     @Value("${wx.public.account.appId}")
  28.     private String mpAppId;
  30.     @Value("${wx.public.account.appSecret}")
  31.     private String mpSecret;
  33.     @PostConstruct
  34.     public void init() {
  35.         log.info("微信公众号初始化 appId={}", appId);
  36.         WxMpService wxMpService = new WxMpServiceImpl();
  37.         WxMpDefaultConfigImpl mpConfigStorage = new WxMpDefaultConfigImpl();
  38.         mpConfigStorage.setAppId(mpAppId);
  39.         mpConfigStorage.setSecret(mpSecret);
  40.         wxMpService.setWxMpConfigStorage(mpConfigStorage);
  41.         mpService = wxMpService;
  42.         log.info("微信公众号初始化完毕 ");
  43.     }
  45. }
  1. @ApiOperation(value = "获取js签名", notes = "获取js签名")
  2. @GetMapping("/getJsConfig")
  3. public AjaxResult getJsConfig(String url) throws WxErrorException {
  4.     WxMpService wxMpService = WxMpAutoConfiguration.getWxMpService();
  5.     return AjaxResult.success(wxMpService.createJsapiSignature(url));
  6. }

前端代码

微信 JS 接口签名校验工具 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

调用微信扫一扫的示例代码：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  6.     <title>调用扫一扫</title>
  7.     <style>
  9.     </style>
  10.   </head>
  11.   <body>
  12.     <div>点我调用扫一扫</div>
  13.   </body>
  14.   <script src='https://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script>
  15.   <script>
  16.     var div=document.querySelector('div');
  17.     var data;//接受配置信息
  18.     var getWxConfig=function(){
  19.       var xhr=null;
  20.       if(window.XMLHttpRequest){
  21.         xhr=new XMLHttpRequest();
  22.       } else if(window.ActiveXObject){
  23.         xhr=new ActiveXObject("Microsoft.XMLHTTP");
  24.       }
  25.       //     xhr.open('get','http://xxx.com/prod-api/config/getJsConfig');
  26.       //     xhr.onreadystatechange=function(){
  27.       //         if(xhr.readyState==4&&xhr.status==200){
  28.       // alert(xhr.responseText)
  29.       //             data=(xhr.responseText);
  30.       //         }
  31.       //     };
  32.       //     xhr.send(); 
  33.     }
  34.     getWxConfig();
  35.     div.onclick=function(){
  36.       wx.config({
  37.         debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  38.         // debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  39.         appId : "wx65a341c782f9b468", // 必填，公众号的唯一标识
  40.         timestamp : "1653280580", // 必填，生成签名的时间戳
  41.         nonceStr : "ZwXnrf3bzTaxzTcT", // 必填，生成签名的随机串
  42.         signature : "c3cc903d94700da0f2e2f0ade253f83cd3fb9cea",// 必填，签名，见附录1
  43.         jsApiList : ['checkJsApi', 'scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  44.       });
  45.       wx.ready(function() {
  46.         wx.scanQRCode({   
  47.           needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
  48.           scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
  49.           success: function (res) {
  50.             var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
  51.             console.log(res);
  52.             alert(res);
  53.             var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
  54.             sessionStorage.setItem('saomiao_result',result);
  55.             //其它网页调用二维码扫描结果： 
  56.             //var result=sessionStorage.getItem('saomiao_result');
  57.           }
  58.         });
  59.       });
  60.     }
  62.   </script>
  63. </html>

image.png
前端vue代码

  1. if (isWeiXin()) {
  2.   var jweixin = require('jweixin-module')
  3.   wxJsapi({
  4.     url: location.href.split("#")[0]
  5.   }).then(ras => {
  6.     console.log(ras, 'wxJsapi')
  7.     let params = ras.data
  8.     jweixin.config({
  9.       "appId": params.appId,
  10.       "timestamp": params.timestamp,
  11.       "nonceStr": params.nonceStr,
  12.       "signature": params.signature,
  13.       jsApiList: ["scanQRCode"] //根据需要看需要哪些SDK的功能
  14.     });
  15.     // sdk加载完成后执行
  16.     jweixin.ready(() => {
  17.       jweixin.checkJsApi({
  18.         jsApiList: ['scanQRCode'],
  19.         success: function(ras) {
  20.           jweixin.scanQRCode({
  21.             needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
  22.             scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
  23.             success: function (res) {
  24.               console.log(res,'111111111');
  25.               resolve(res)
  26.               var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
  27.             }
  28.           });
  29.         }
  30.       });
  31.       jweixin.error(function(res) {
  32.         console.log("接口调取失败")
  33.       });
  34.     })
  35.   })
  36. }