Recientemente, hice una solicitud para compartir y reenviar en WeChat. Es un dolor de cabeza hablar. Normalmente uso Twitter y Weibo, y coloqué un WeChat especialmente para esta necesidad.
1. Regístrese para obtener una cuenta oficial de prueba https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
La configuración de la interfaz y el nombre de dominio de seguridad js completan su propia dirección de entorno de prueba en línea
Relleno de token
2. Busque un proyecto de demostración en github https://github.com/binarywang/weixin-java-mp-demo-springboot
Eche un vistazo, hay muchas cosas y ni siquiera me molesto en mirarlas.
3. El archivo de configuración del proyecto tiene una plantilla, cópiela
4. La configuración de la interfaz en la administración de cuenta oficial usa la dirección en el controlador (cópiela es / wx / portal / (appid), si la ruta no es fácil de recordar, cámbiela por la suya)
5. wx.config necesita el back-end para generar una firma, continuar copiando (yo lo copié, tú copias la mía)
@GetMapping("/wechatParam")
public ResponseModel getWXConfigSignature(String url) {
WxMpProperties.MpConfig config = wxMpProperties.getConfigs().get(0);
long timeStampSec = System.currentTimeMillis() / 1000;
String timestamp = String.format("%010d", timeStampSec);
String nonceStr = Fun.randString(8);
String[] urls = url.split("#");
String newUrl = urls[0];
logger.info("随机串："+nonceStr+", 获取签名URL: " + newUrl);
JSONObject respJson = new JSONObject();
String wxJsapiTicket = getWXJsapiTicket(config.getAppId(),config.getSecret());
String[] signArr = new String[]{"url=" + newUrl, "jsapi_ticket=" + wxJsapiTicket, "noncestr=" + nonceStr, "timestamp=" + timestamp};
Arrays.sort(signArr);
String signStr = String.join("&",signArr);
String resSign = DigestUtils.sha1Hex(signStr);
logger.info("返回的签名：" + resSign);
respJson.put("appId", config.getAppId());
respJson.put("timestamp", timestamp);
respJson.put("nonceStr", nonceStr);
respJson.put("signature", resSign);
respJson.put("url", url);
logger.info(respJson.toJSONString());
return ResponseModel.newSuccess(respJson);
}
private String getWXJsapiTicket(String appid,String secret) {
ValueOperations valueOperations = redisTemplate.opsForValue();
String ticket = (String) valueOperations.get(appid);
if (Strings.isBlank(ticket)) {
String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + getWXaccessToken(appid,secret) + "&type=jsapi";
String resp = restTemplate.getForObject(url, String.class);
JSONObject resJson = JSONObject.parseObject(resp);
logger.info("获取到ticket：" + resJson.getString("ticket"));
valueOperations.set(appid, resJson.getString("ticket"), 2, TimeUnit.HOURS);
return resJson.getString("ticket");
}
return ticket;
}
private String getWXaccessToken(String appid,String secret) {
String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+appid+"&secret="+secret;
String resp = restTemplate.getForObject(url, String.class);
JSONObject resJson = JSONObject.parseObject(resp);
logger.info("获取到access_token：" + resJson.getString("access_token"));
return resJson.getString("access_token");
}
No me importa la lógica, es una interfaz wechatParam (wxMpProperties se obtiene mediante Autowired)
6. El front-end encuentra el back-end para obtener la firma, monitorea el evento compartido y prueba el código js usted mismo:
<h1 id="msg"></h1>
<script>
$(function(){
var url = location.href.split('#').toString();//url不能写死
$.ajax({
type : "get",
url : "/wx/{公众号的appid}/wechatParam",
dataType : "json",
async : false,
data:{url:url},
success : function(data) {
wx.config({
debug: true,生产环境需要关闭debug模式
appId: data.data.appId,//appId通过微信服务号后台查看
timestamp: data.data.timestamp,//生成签名的时间戳
nonceStr: data.data.nonceStr,//生成签名的随机字符串
signature: data.data.signature,//签名
jsApiList: [//需要调用的JS接口列表
'checkJsApi',//判断当前客户端版本是否支持指定JS接口
'onMenuShareTimeline',//分享给好友
'onMenuShareAppMessage'//分享到朋友圈
]
});
alertx('config is over:'+JSON.stringify(data.data));
},
error: function(xhr, status, error) {
alertx(JSON.stringify(status));
alertx(JSON.stringify(xhr));
alertx(JSON.stringify(error));
}
});
});
wx.ready(function () {
var link = window.location.href;
var protocol = window.location.protocol;
var host = window.location.host;
alertx('wx is ready');
//分享朋友圈
wx.onMenuShareTimeline({
title: '分享朋友圈！',
link: link,
imgUrl: protocol+'//'+host+'/resources/images/icon.jpg',// 自定义图标
trigger: function (res) {
// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回.
alertx('click shared');
},
success: function (res) {
alertx('shared success');
//some thing you should do
},
cancel: function (res) {
alertx('shared cancle');
},
fail: function (res) {
alertx(JSON.stringify(res));
}
});
//分享给好友
wx.onMenuShareAppMessage({
title: '分享给好友！', // 分享标题
desc: '分享给好友123！', // 分享描述
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: protocol+'//'+host+'/resources/images/icon.jpg', // 自定义图标
type: 'link', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
alertx('shared success!');
},
cancel: function () {
// 用户取消分享后执行的回调函数
alertx('shared cancle!');
}
});
wx.error(function (res) {
alertx(JSON.stringify(res));
});
});
function alertx(msg) {
alert(msg);
console.log(msg);
$('#msg').append(msg+'<br/>');
}
</script>