微信公众号JS-SDK开发

日常开发中，有时候会使用到微信的js，所以我们需要做JS-SDK开发，在这里记录一下JS-SDK开发过程

在后台配置好JS安全域名，此处域名和上面网页授权的域名一致。

配置完成后，在前端需要使用微信JS的页面上请求后台去验证签名是否正确，如果正确，后台返回签名等信息，然后前端再使用签名等信息调用wx.config，在wx.config里面jsApiList[]里面的就是我们需要用到的微信JS方法。

<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="renderer" content="webkit"><title>微信签到系统</title><!--[if lt IE 9]><meta http-equiv="refresh" content="0;ie.html"/><![endif]--><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="wrapper">index.html</div><script>$(function () {getJsSdk();console.log(location.href.split('#')[0]);})function getJsSdk(){$.ajax({url : "/wx/getJs-SDK",type : 'post',dataType : 'json',data : {//'url' : encodeURIComponent(location.href.split('#')[0])'url':location.href.split('#')[0]},success:function(data){wx.config({beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: data.appId, // 必填，企业微信的corpIDtimestamp: data.timestamp, // 必填，生成签名的时间戳nonceStr: data.nonceStr, // 必填，生成签名的随机串signature: data.signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法jsApiList: ['openDefaultBrowser'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来});wx.ready(function(){wx.invoke('openDefaultBrowser', {'url': 'http://www.baidu.com' // 在默认浏览器打开redirect_uri，并附加code参数；也可以直接指定要打开的url，此时不会附带上code参数。}, function(res){if(res.errMsg == "openDefaultBrowser:ok"){wx.closeWindow();window.close();}});});wx.error(function(res){console.log(res);// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。});}})}</script>
</body>
</html>

@PostMapping("/getJs-SDK")@ResponseBodypublic Map<String,Object> getJSSDKSignature(String url,HttpServletRequest request)throws Exception{if(StringUtils.isBlank(url)) {throw new Exception("请求路径不能为空");}//url = URLDecoder.decode(url, "UTF-8");Date time = new Date();//去redis里面获取token和TicketString accessTokenUrl = WxConstants.QIYE_ACCESS_TOKEN_URL.replace("ID", WxConstants.CORPID).replace("SECRET", WxConstants.SECRETID);String tokenJson = WxUtil.loadJson(accessTokenUrl);System.out.println(tokenJson);//String access_token =   (String) WxUtil.parseJSON2Map(tokenJson).get("access_token");String access_token = "g8LKjbYzkcmxVf2CDNGl-Ty43JORbn6tbLxepEzoV2MNrXwRWvcFWqt44HYH8eFw6koV0N5RkKiOOzQjlARcAA4_-H2TZ8Ws-7tU0vlQPwR_vBzNg47aBuddLYJhV9fnEQl8px4dd5fQaiuJ6GLyxQX_YrzS_12de5MzTYMIMpsLblCRNj6qZs1nBcY8aVuLexiRvvDZed2-7LxPSJc5RQ";System.out.println(access_token);//ticket//String ticket = WxUtil.getJsApiTicket(access_token);String ticket = "bxLdikRXVbTPdHSM05e5u74DjS18dxtXsnW1O7AWO91EmVMctXZoI_g5slEuuBDprWzl0btNpgqKbY-GXvp5yA";//存入RedisMap<String,Object> resultMap = new HashMap<>();System.out.println("ticket === "+ticket);//随机字符串String nonceStr = UUIDUtil.randomUUID8();// 时间戳long timestamp = time.getTime();String str = "jsapi_ticket=" + ticket;str += "&noncestr=" + nonceStr;str += "&timestamp=" + timestamp;str += "&url=" + url;//微信签名String signature = DigestUtils.sha1Hex(str);resultMap.put("nonceStr", nonceStr);resultMap.put("signature", signature);resultMap.put("timestamp", timestamp);resultMap.put("appId", WxConstants.CORPID);for(String key:resultMap.keySet()){System.out.println("key === "+key+"value === "+ resultMap.get(key));}return resultMap;}

如果是企业微信，在配置完成js-sdk域名之后，还需要下载一个文件，然后放在resources文件夹下面

微信公众号JS-SDK开发相关推荐

Node.js七天搞定微信公众号（又名：Koa2实现电影微信公众号前后端开发）- 问题汇总
未完待续视频资料在上一篇博客<Node.js七天搞定微信公众号(又名:Koa2实现电影微信公众号前后端开发)> 问题1:该公众号提供的服务出现故障,请稍后重试! 出处:<第4章实 ...
php 微信支付闪了一下,php,_微信公众号JS API支付，安卓没有效果（会闪一下就消失了），php - phpStudy...
微信公众号JS API支付,安卓没有效果(会闪一下就消失了) 代码如下,ios可以支付,但是到安卓手机上就会出现微信支付读条(那三个点),然后就消失了,没有跳出输入密码支付的界面.... //调用微信 ...
微信公众号H5页面开发--微信JS-SDK引用
微信公众号H5页面开发–微信JS-SDK引用微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时 ...
微信公众号Java开发-笔记01【微信公众号介绍、开发环境搭建】
学习网址:哔哩哔哩网站微信公众号开发-Java版微信公众号Java开发-笔记01[微信公众号介绍.开发环境搭建] 微信公众号Java开发-笔记02[] 微信公众号Java开发-笔记03[] 微信公 ...
微信公众号消息模板开发
为什么80%的码农都做不了架构师?>>> ##背景新需求,需要在订单的时候给用户,商家,配送员发送想对于的微信消息模板,之前没有做过微信公众号相关的开发,这次就一并熟悉吧 # ...
适合新手学习的laravel接入微信接口，实现微信公众号二次开发
2019独角兽企业重金招聘Python工程师标准>>> 最近使用laravel做微信公众号二次开发,发现网上能够参考的资料基本上很少,很多地方都讲的不够详细,致使许多新手采坑无数,所 ...
微信公众号二次开发实现自动回复文字，图片，图文功能
微信公众号二次开发实现自动回复文字,图片,图文功能自动回复文字或图片: 表单里需要有关键字和内容.但就这两个字段也需要在两个数据表里分别显示,因为要提前准备字段内容里有可能是图片,图文等等类型.所以 ...
微信公众号后台服务开发（一）：自动消息回复
微信公众号后台服务开发简述微信平台提供的自动回复机制后台服务开发配置指定服务器消息自动回复功能开发简述使用Java SpringBoot框架搭建微信工作号后台实现自定义逻辑自动回复先注 ...
微信公众号的简单开发
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能. 今天给大家分享一下,修真院官网 ...
微信公众号三方平台开发【代微信公众号接收消息事件并响应】
今天要讲的是代微信公众号接收消息并进行回复,这里要用到的就是咱们之前在微信公众号三方平台开发[帐号注册.平台创建]里写到的"公众号消息与事件接收URL",在接收的目标方法里,我们首 ...

微信公众号JS-SDK开发

微信公众号JS-SDK开发相关推荐

最新文章

热门文章