java、vue实现微信网页分享

前提：拥有已认证的公众号 + 备案域名

一、微信公众号相关

在公众号的功能设置好自己的业务域名、js接口安全域名、网页授权域名（已完成备案才可以使用） 

获取公众号对应的appID、appsecret，这里一定要记得设置ip白名单，不然没有权限获取到微信的AccessToken

二、JAVA提供接口

描述：接口主要返回appid（公众号id）、timestamp(生成签名的时间戳)、nonceStr（生成签名的随机字符串）、signature（签名）

controller层： @CrossOrigin是解决跨域的

@RestController
@Slf4j
@CrossOrigin

@RequestMapping("/wx")
public class WxController {

    @Resource
    private WxSignService wxSignService;


//    /**
//     * 微信公众号通过config接口注入权限验证配置所需参数
//     * @return
//     * @throws Exception
//     */
//    @GetMapping("/getConfigData")
//    public ApiResult<Map<String, Object>> getConfigData(@RequestParam("url")String url) throws Exception {
//        WxJsapiSignature wxJsapiSignature2 = wxMpService.createJsapiSignature(URLDecoder.decode(url,"UTF-8"));
//        Map map = new HashMap();
//        map.put("fileList", wxJsapiSignature2);
//        return ApiResult.ok(map);
//    }


    /**
     * 获取signature(微信分享)
     */
    @RequestMapping(value = "/getSignature", method = RequestMethod.POST)
    public ApiResult<Map<String, Object>>getSignature(@RequestBody UrlParam param) {

        return ApiResult.ok(wxSignService.getSignature(param)).setMsg("分享成功");
        //return wxSignService.getSignature(param);
    }
//
//    }

}

完整的后端代码自行去下载使用https://download.youkuaiyun.com/download/qq_31151123/86263221

三、VUE前端代码实现

1.执行命令

npm install weixin-js-sdk

2.在需要分享的页面添加导包

import wx from 'weixin-js-sdk';

3.在需要分享的页面添加代码1.2.

wxshare是你获取后端的api接口，现在都是使用1.6的接口，微信不再支持'onMenuShareTimeline', 'onMenuShareAppMessage',，使用'updateAppMessageShareData', 'updateTimelineShareData'进行分享，分享中出现问题请查看处理办法https://mp.youkuaiyun.com/mp_blog/creation/editor/126016467

mounted() {
			this.initData();
		},

		methods: {
			//微信分享源码
			initData() {
				$_resList(this.id).then(res => {
					this.list = res.data.fileInfo;
					var urls = encodeURI(window.location.href.split('#')[
						0]); //分享成功之后再次分享，微信会再url附带额外参数造成二次分享签名错误，这里处理下避免config：invalid signature签名失效
					wxshare({
							url: urls,
							// contentType: "application/json;charset=UTF-8", //定义数据格式为JSON
							// dataType : "json",

						}).then((response) => {
							console.log("我试试", response.data.signature)
							var result = response.data;
							wx.config({
								debug: false, //生产环境需要关闭debug模式
								appId: result.appid,
								timestamp: result.timestamp, //生成签名的时间戳
								nonceStr: result.nonceStr, //生成签名的随机字符串
								signature: result.signature, //签名
								jsApiList: [
									// 'onMenuShareTimeline', 'onMenuShareAppMessage',
									'updateAppMessageShareData', 'updateTimelineShareData'
								]
							});
							const shareData = {
								title: this.list.keyword, // 分享标题
								desc: this.list.info, // 分享描述
								link: encodeURI(window.location
									.href), // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
								imgUrl: this.list.image, // 分享图标
							};
							wx.ready(function() {
								//alert("sss")
								// wx.onMenuShareTimeline(shareData);
								// wx.onMenuShareAppMessage(shareData);
								wx.updateAppMessageShareData(shareData); //“分享给朋友”及“分享到QQ”
								wx.updateTimelineShareData(shareData); //“分享到朋友圈”及“分享到 QQ 空间”
								wx.error(function(res) {
									alert(res.errMsg);
								});

							});
						})
						.catch((e) => {

						});
				});
			},

最后实现的效果如下图