最近开发微信公众号内嵌H5页面，使用vue搭建的项目，由于业务需求，需要实现微信自定义分享功能，所以项目中集成微信JS-SDK。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
1.绑定域名
微信公众号开发测试帐号： ... ，需要填写接口配置，一个公网能访问的域名，推荐用natapp/路由侠。填写JS接口安全域名 ，设置JS接口安全域后，通过关注该测试号，开发者即可在该域名下调用微信开放的JS接口，请阅读 微信JSSDK开发文档
1）这里使用路由侠，实现内网穿透 ，下载安装后，配置相应的内网映射地址
2）设置JS接口安全域
2.引入JS文件
通过npm安装微信的js-sdk，或者在index.html页面中直接加script标签来引用，这里采用npm安装，
npm install weixin-js-sdk
在需要分享的页面中引入
import wx from 'weixin-js-sdk'
3.java实现js-sdk权限签名算法
1)jsapi_ticket
生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket。
2）获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）
access_token是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token，官方文档：
https://mp.weixin.qq.com/wiki ...
@RequestMapping(value = "/get_access_token", method = RequestMethod.GET) public String getAssessToken() { String url = "https://api.weixin.qq.com/cgi-bin/token"; String str = HttpClientUtil.sendGet(url, "grant_type=" + Constants.GRANTTYPE + "&secret=" + Constants.APPSECRET + "&appid=" + Constants.APPID); JSONObject jsonObject = JSONObject.fromObject(str); return jsonObject.toString(); }
3）获取access_token后，采用http GET方式请求获得jsapi_ticket
@RequestMapping(value = "/get_ticket", method = RequestMethod.GET) public String getTicket() { String urlToken = "https://api.weixin.qq.com/cgi-bin/token"; String tokenObj = HttpClientUtil.sendGet(urlToken, "grant_type=" + Constants.GRANTTYPE + "&secret=" + Constants.APPSECRET + "&appid=" + Constants.APPID); JSONObject jsonToken = JSONObject.fromObject(tokenObj); String access_token = jsonToken.getString("access_token"); String urlTicket = "https://api.weixin.qq.com/cgi-bin/ticket/getticket"; String strTicket = HttpClientUtil.sendGet(urlTicket, "type=jsapi" + "&access_token=" + access_token); JSONObject jsonTicket = JSONObject.fromObject(strTicket); return jsonTicket.toString(); }
4）签名算法
签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。
//主要代码 @RequestMapping(value = "/get_signature", method = RequestMethod.GET) public Map<String, String> getSignature(String url) { Map<String, String> ret = new HashMap<String, String>(); String wxTicket = getWxApiTicket(); String nonce_str = create_nonce_str(); String timestamp = create_timestamp(); String str; String signature = ""; //注意这里参数名必须全部小写，且必须有序 str = "jsapi_ticket=" + wxTicket + "&noncestr=" + nonce_str + "×tamp=" + timestamp + "&url=" + url; logger.info(str); try { MessageDigest crypt = MessageDigest.getInstance("SHA-1"); crypt.reset(); crypt.update(str.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", wxTicket); ret.put("nonceStr", nonce_str); ret.put("timestamp", timestamp); ret.put("signature", signature); ret.put("appId", Constants.APPID); return ret; }
签名接口返回信息