一、前端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 = this
var configmap = response.data.data.configmap
wx.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用于保存参数
实体类 AccessToken
public 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;
}
}JsApiToken
public 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类 TokenUtil
public class TokenUtil {
private static final String GET_TOKEN_URL="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET";
private static final String GET_JSAPI_TICKET_URL="https://api.weixin.qq.com/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实现类
@Service
public class WxFenServiceImpl implements WxFenService {
/*
1.获取access——token
2、获取jsapi_ticket
3、用时间戳、随机数、jsapi_ticket和要访问的url按照签名算法拼接字符串
4、获取url 该url与浏览者的当前页一致
5、将参数排序并拼接字符串 str
6、对第三步的字符串进行SHA1加密，得到签名,并返回结果
分享接口需求
输入参数 url
返回参数
timestamp 必填，生成签名的时间戳
appId
noncestr 必填，生成签名的随机串 随机字符串
signature 必填，签名
url
可输出参数（未添加）
浏览者的当前页面 url
*/
//生成微信签名等，config必要参数
@Override
public 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
配置分享的服务 WxFenService
public interface WxFenService {
Map<String, Object> getJsTokenMap();
}第五步：配置微信分享的WxFenController控制层
@RestController
@RequestMapping("wxfx")
@CrossOrigin
public class WxFenController {
@Autowired
private WxFenService wxFenService;
@GetMapping("getjstoken")
public R getJsToken(){
Map<String,Object> map = wxFenService.getJsTokenMap();
return R.ok().data("configmap",map);
}
}地址可以从前台动态获取传入到后台
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
