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>