需要公众号appid，APPSECRET，与公众号绑定的js安全域名
三样就可以完成微信jssdk的配置，这里以微信分享自定义文案链接为例
一、前端vue页面编写
1、设置data参数
2、设置js参数配置方法，以及分享自定义
二、后端代码可以
1、新建实体类AccessToken与JsApiToken用于保存参数
2、编写获取token的工具类 TokenUtil 用于http获取
3、生成微信配置参数WxFenServiceImpl实现类
4、配置分享的服务 WxFenService
5、配置微信分享的WxFenController控制层
注意：前端设置地址的动态提交，后端url没有动态获取
vue 前端页面编写
设置参数
export default {data(){return {wxfx_info:{title:'文件标题',desc: '摘要',link: '',imgUrl: 'https://cdn.via.cool/web/zy/sport0808/img/share.jpg'// 图片地址},}}}
微信配置 方法实现
wxJsSdk(){var url = window.location.href.split('#')[0];url = encodeURIComponent(url)// url 与后端加密的url保持一致 可由前台传入wxToolApi.getJsToken(url).then(response =>{var that = thisvar configmap = response.data.data.configmapwx.config({debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: configmap.appId,// 必填，公众号的唯一标识timestamp: configmap.timestamp, // 必填，生成签名的时间戳nonceStr: configmap.noncestr, // 必填，生成签名的随机串signature: configmap.signature, // 必填，签名jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','hideOptionMenu'] // 必填，需要使用的JS接口列表，需要用什么必须放在列表里声明});wx.ready(function(){// alert("config配置成功，执行success方法")});wx.error(function(res){// alert("config配置失败，执行error方法")});wx.onMenuShareTimeline({title: this.wxfx_info.title, // 朋友圈 即将废弃link: this.wxfx_info.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: this.wxfx_info.imgUrl, // 分享图标success: function () {// 分享成功以后的回调函数}});wx.onMenuShareAppMessage({title: this.wxfx_info.title, // 朋友即将废弃desc: this.wxfx_info.desc, // 分享描述link: this.wxfx_info.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致type: '',dataUrl: '',imgUrl: this.wxfx_info.imgUrl, // 分享图标success: function () {// 分享成功以后的回调函数}});}) },
java后端代码实现
思路：
1.获取access——token
2、获取jsapi_ticket
3、用时间戳、随机数、jsapi_ticket和要访问的url按照签名算法拼接字符串
4、获取url 该url与浏览者的当前页一致
5、将参数排序并拼接字符串 str
6、对第三步的字符串进行SHA1加密，得到签名,并返回结果
第一步：新建实体类AccessToken与JsApiToken用于保存参数
实体类 AccessTokenpublic class AccessToken {private String access_token;private long expires_in;// 生成过期的时间public AccessToken(String accesstoken, String expires){super();this.access_token = accesstoken;expires_in = System.currentTimeMillis()+Integer.parseInt(expires)*1000;}//判断当前是否过期public boolean isExpired(){return System.currentTimeMillis()>expires_in;}public String getAccess_token() {return access_token;}public void setAccess_token(String access_token) {this.access_token = access_token;}public long getExpires_in() {return expires_in;}public void setExpires_in(long expires_in) {this.expires_in = expires_in;}}
JsApiTokenpublic class JsApiToken {private String jsapi_ticket;private long expires_in;// 生成过期的时间public JsApiToken(String jsapi_ticket, String expires){super();this.jsapi_ticket = jsapi_ticket;expires_in = System.currentTimeMillis()+Integer.parseInt(expires)*1000;}//判断当前是否过期public boolean isExpired(){return System.currentTimeMillis()>expires_in;}public String getAccess_token() {return jsapi_ticket;}public void setAccess_token(String access_token) {this.jsapi_ticket = access_token;}public long getExpires_in() {return expires_in;}public void setExpires_in(long expires_in) {this.expires_in = expires_in;}}
第二步：编写获取token的工具类TokenUtil 用于http获取AccessToken、JsApiToken
创建保存AccessToken和JsApiToken类 TokenUtilpublic class TokenUtil {private static final String GET_TOKEN_URL="https://api./cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET";private static final String GET_JSAPI_TICKET_URL="https://api./cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";private static AccessToken at;private static JsApiToken jt;// 对外开放获取Access_token方法public static String getAppsecret(String APPID,String APPSECRET){if(at == null || at.isExpired()){getToken(APPID,APPSECRET);}return at.getAccess_token();}// 对外开放获取JsToken方法public static String getJsapi_ticket(String ACCESS_TOKEN){if(jt == null || jt.isExpired()){getJsToken(ACCESS_TOKEN);}return jt.getAccess_token();}// 获取 token 使用get提交方法获取private static void getToken(String APPID,String APPSECRET){String url = GET_TOKEN_URL.replace("APPID",APPID).replace("APPSECRET",APPSECRET);String tokenStr = get(url);JSONObject jsonObject = JSONObject.parseObject(tokenStr);String access_token = jsonObject.getString("access_token");String expires_in = jsonObject.getString("expires_in");at = new AccessToken(access_token,expires_in);}private static void getJsToken(String ACCESS_TOKEN){String url = GET_JSAPI_TICKET_URL.replace("ACCESS_TOKEN",ACCESS_TOKEN);String tokenStr = get(url);JSONObject jsonObject = JSONObject.parseObject(tokenStr);if (jsonObject.getString("errmsg").equals("ok")){String jsapi_ticket = jsonObject.getString("ticket");String expires_in = jsonObject.getString("expires_in");jt = new JsApiToken(jsapi_ticket,expires_in);}}// 请求地址获取 通过url请求返回数据 的方法private static String get(String url){try {URL urlObj = new URL(url);// 发送请求URLConnection connection = urlObj.openConnection();InputStream is = connection.getInputStream();byte[] b = new byte[1024];int len;StringBuilder sb = new StringBuilder();while((len=is.read(b)) != -1){sb.append(new String(b,0,len));}return (String) sb.toString();} catch (Exception e) {e.printStackTrace();}return null ;}}
第三步：生成微信配置参数WxFenServiceImpl实现类
@Servicepublic class WxFenServiceImpl implements WxFenService {/*1.获取access——token2、获取jsapi_ticket3、用时间戳、随机数、jsapi_ticket和要访问的url按照签名算法拼接字符串4、获取url 该url与浏览者的当前页一致5、将参数排序并拼接字符串 str6、对第三步的字符串进行SHA1加密，得到签名,并返回结果分享接口需求输入参数 url返回参数timestamp 必填，生成签名的时间戳appIdnoncestr必填，生成签名的随机串 随机字符串signature 必填，签名url可输出参数（未添加）浏览者的当前页面 url*///生成微信签名等，config必要参数@Overridepublic Map<String, Object> getJsTokenMap() {String access_token = TokenUtil.getAppsecret(WxInfoUtil.getAppId(),WxInfoUtil.getAPPSECRET());// appid 与 APPSECRET 在公众号里面可以查询到String jsapi_ticket = TokenUtil.getJsapi_ticket(access_token);String noncestr = RandomStringUtils.randomAlphanumeric(10);String timestamp = String.valueOf(System.currentTimeMillis() / 1000);String url = WxInfoUtil.getUrl();// 该url可以通过前端传入，需保证与前端保持一致String str = "jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"×tamp="+timestamp+"&url="+url;//字符串进行拼接方便加密String signature = DigestUtils.sha1Hex(str);Map<String,Object> map=new HashMap();map.put("timestamp",timestamp);map.put("appId",WxInfoUtil.getAppId());map.put("noncestr",noncestr);map.put("signature",signature);map.put("url",url);return map;}}
第四步：配置分享的服务 WxFenService
配置分享的服务 WxFenServicepublic interface WxFenService {Map<String, Object> getJsTokenMap();}
第五步：配置微信分享的WxFenController控制层
@RestController@RequestMapping("wxfx")@CrossOriginpublic class WxFenController {@Autowiredprivate WxFenService wxFenService;@GetMapping("getjstoken")public R getJsToken(){Map<String,Object> map = wxFenService.getJsTokenMap();return R.ok().data("configmap",map);}}
地址可以从前台动态获取传入到后台
