1、后端： 使用weixin-java-mp 4.1.0
pom.xml引入依赖
<!--微信公众号--><dependency><groupId>com.github.binarywang</groupId><artifactId>weixin-java-mp</artifactId><version>4.1.0</version></dependency>
controller层代码：
@RestController@RequestMapping("/wx/share")public class WxShareController {private final WxMpService wxMpService;/*** 微信公众号通过config接口注入权限验证配置所需参数* @return* @throws Exception*/@GetMapping("getConfigData")public Result<?> getConfigData(@RequestParam("url")String url) throws Exception {WxJsapiSignature wxJsapiSignature2 = this.wxMpService.createJsapiSignature(URLDecoder.decode(url,"UTF-8"));return Result.OK(wxJsapiSignature2);}
vue前端：
<p class="share"><a-icon type="export" @click="toShare(info.id)" /><span class="font" >分享</span></p><script>methods: {//分享：自定义分享toShare: function (){getConfigData({url: encodeURIComponent(location.href.split('#')[0])}).then(res => {console.log("---分享",res.result);const result = res.result;// 重写的分享方法wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: result.appId, // 必填，公众号的唯一标识timestamp: result.timestamp, // 必填，生成签名的时间戳nonceStr: result.nonceStr, // 必填，生成签名的随机串signature: result.signature,// 必填，签名jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline',] // 必填，需要使用的JS接口列表});wx.ready(() => {//需在用户可能点击分享按钮前就先调用wx.onMenuShareAppMessage({title: '我的分享', // 分享标题desc: '我的描述', // 分享描述link: 'https://*******/base/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: 'https://**********.jpg', // 分享图标type: 'link', // 分享类型,music、video或link，不填默认为linksuccess: function () {// 设置成功this.$message.success("设置自定分享成功！");}})});this.$message.success('请点击右上角进行分享！');})}</script>
