前言
在进行微信公众号业务开发的时候，有些时候需要用到微信分享，以卡片的形式分享出去，例如订单信息，用户信息。该篇文章每一步都有记录，力争理解的同时各位小伙伴也能够实现功能
效果图如下：
1、绑定域名
先登录微信公众平台进入“设置与开发”，“公众号设置”的“功能设置”里填写“JS接口安全域名”。
2、前端代码实现
1、引入JS文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>
2、在public目录下创建 index.html文件，内容如下
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.12/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.12/aliplayer-min.js"></script>
<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script>
<!-- 引入播放器 css 文件 -->
<link href="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
<!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
<!--[if lt IE 9]>
<script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
<![endif]-->
<!-- 如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.v4.1.min.js 之前引入 hls.min.0.13.2m.js -->
<script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
<!-- 引入播放器 js 文件 -->
<script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
<!-- 示例 CSS 样式可自行删除 -->
<title>Eric的分享示例</title>
</head>
<body>
<script type="text/javascript" src="https://static-1.talk-fun.com/open/TalkFun_SDK_Pack/v6.0/TalkFunWebSDK-6.2-2.min.js"></script>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
3、创建工具类JS：wxShare.js 文件
/**
* 微信js-sdk
* 参考文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
*/
const wxShare = {
/**
* [wxRegister 微信Api初始化]
* @param {Function} callback [ready回调函数]
*/
wxRegister(data,option) { //data是微信配置信息，option是分享的配置内容
wx.config({
debug: true, // 开启调试模式
appId: data.appId, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature,// 必填，签名，见附录1
jsApiList: [
'onMenuShareAppMessage'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function(){
wx.onMenuShareAppMessage({
title: option.title, // 分享标题
desc: option.desc, // 分享描述
link: option.link, // 分享链接
imgUrl: option.imgUrl, // 分享图标
success() {
// 用户成功分享后执行的回调函数
// option.success()
console.log('ok');
},
cancel() {
// 用户取消分享后执行的回调函数
// option.error()
console.log('cancel');
}
});
});
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
//alert('error:'+JSON.stringify(res));
});
}
}
export default wxShare
3、后端代码实现
说明：微信分享要对当前url加密处理，由于我们的url路由都是带“#”符号，服务器端接收不到，因此通过“ericToken”单词代替了“#”。
@RestController
@RequestMapping("/api/wechat/share")
@Slf4j
public class ShareController {
@Autowired
private WxMpService wxMpService;
@GetMapping("/getSignature")
public Result getSignature(@RequestParam("url") String url) throws WxErrorException {
String currentUrl = url.replace("ericToken", "#");
WxJsapiSignature jsapiSignature = wxMpService.createJsapiSignature(currentUrl);
WxJsapiSignatureVo wxJsapiSignatureVo = new WxJsapiSignatureVo();
BeanUtils.copyProperties(jsapiSignature, wxJsapiSignatureVo);
wxJsapiSignatureVo.setUserEedId(Base64Util.base64Encode(AuthContextHolder.getUserId()+""));
return Result.ok(wxJsapiSignatureVo);
}
}
WxJsapiSignatureVo 内容如下
@Data
public class WxJsapiSignatureVo {
private String appId;
private String nonceStr;
private long timestamp;
private String url;
private String signature;
//加密用户id
private String userEedId;
}
4、前端使用方式
1、在要分享的vue页面引入js文件
import wxShare from '@/utils/wxShare'
2、代码实现
wxRegister() {
//说明：后台加密url必须与当前页面url一致
let url = window.location.href.replace('#', 'ericToken')
shareApi.getSignature(url).then(response => {
console.log(response.data);
//记录分享用户
let link = '';
if(window.location.href.indexOf('?') != -1) {
link = window.location.href + '&recommend=' + response.data.userEedId;
} else {
link = window.location.href + '?recommend=' + response.data.userEedId;
}
let option = {
'title': this.courseVo.title,
'desc': this.description,
'link': link,
'imgUrl': this.courseVo.cover
}
wxShare.wxRegister(response.data, option);
});
}
总结
微信分享这个功能总体来说前端工作量要比后端多一点，不过整体逻辑不难，当然，最需要注意的还是配置域名了
【微信开发第一章】SpringBoot实现微信公众号创建菜单，同步菜单功能：https://blog.csdn.net/weixin_47316183/article/details/127821095?spm=1001.2014.3001.5502
【微信开发第二章】SpringBoot实现微信公众号普通消息和模板消息回复：https://blog.csdn.net/weixin_47316183/article/details/127821653?spm=1001.2014.3001.5502
【微信开发第三章】SpringBoot实现微信授权登录
https://blog.csdn.net/weixin_47316183/article/details/127833802?spm=1001.2014.3001.5502
【微信开发第四章】SpringBoot实现微信H5支付
https://blog.csdn.net/weixin_47316183/article/details/127949620?spm=1001.2014.3001.5502
【微信开发第五章】SpringBoot实现微信分享
https://blog.csdn.net/weixin_47316183/article/details/127950090?spm=1001.2014.3001.5502