微信分享网页到好友、朋友圈等

目录

文档

准备工作

获取APPID和APPSecret，设置IP白名单

设置JS接口安全域名

代码开发

后端

pom.xml

新增一个controller

前端

安装VUE封装的SDK

分享工具类

在main.js引入工具类

在需要分享的页面进行分享初始化

---

文档

微信分享文档

准备工作

登录微信公众平台

获取APPID和APPSecret，设置IP白名单

开发>基本配置

设置JS接口安全域名

设置>公众号设置>功能设置

注意如果是tomcat，验证文件如果直接放在webapps下是无法直接访问的，需要放在下一级目录中。

确保分享的地址是上面设置的地址，包括域名后的项目名。

代码开发

后端

pom.xml

        <dependency>
            <groupId>com.github.binarywang</groupId>
            <artifactId>wx-java-mp-spring-boot-starter</artifactId>
            <version>4.0.0</version>
        </dependency>

新增一个controller

/**
 * 微信相关
 * @ClassName WeChatController
 * @Author snow
 * @Date 2021/3/24 10:09
 */
@RestController
@RequestMapping("/api/v1/weChat")
public class WeChatController extends BaseController {

    @Autowired
    private WxMpService mpService;

    /**
     * 获取分享需要的相关参数
     * @param url   待分享的网页url
     */
    @GetMapping("/getJsSignature")
    public JSONObject getJsSignature(String url) {
        WxJsapiSignature wxJsapiSignature;
        try {
            wxJsapiSignature = mpService.createJsapiSignature(url);
        } catch (WxErrorException e) {
            e.printStackTrace();
            return fail(StringUtil.EXCEPTION_WECHAT_SIGNATURE_ERROR);
        }
        System.out.println(wxJsapiSignature.toString());
        return success(wxJsapiSignature);
    }

}

前端

安装VUE封装的SDK

npm install weixin-js-sdk --save

分享工具类

// https://blog.csdn.net/cmy120813/article/details/106192471
import Vue from 'vue';
import wx from 'weixin-js-sdk';
import {HTTP} from "./http";
const httpObj = new HTTP();
import config from "./config";
//存储服务器授权链接 
const jsSDKAuth = '/api/weChat/getJsSignature'; 
//存储各个链接的签名信息
const signMap = new Map();
// 设置默认的分享信息，因为如分享图、请求授权项、隐藏授权项等基本不变，此处设置直接引用，避免使用时繁琐设置
const defaultWxShareConfig = { 
	title: "考试报名查询系统", 
	desc: '考试报名查询系统',
	link: location.href,
	imgUrl: config.base_url + '/static/2021/03/16/other/b932abca7cef48858210c6e85d69fe43.png',
	jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
	// ,hideMenuList: ['menuItem:editTag', 'menuItem:delete', 'menuItem:originPage', 'menuItem:readMode','menuItem:openWithQQBrowser', 'menuItem:openWithSafari', 'menuItem:share:email', 'menuItem:share:brand']
} 
//存储临时的分享信息
const wxShareConfig = {
	
}
 
const wxShare = {
    //各个页面加载后，调用此方法，传入的参数config是对象，其属性参考defaultWxShareConfig
	updateWxShareConfig(config = {}) {
		wxShareConfig.title = config.title || defaultWxShareConfig.title;
		wxShareConfig.desc = config.desc || defaultWxShareConfig.desc;
        wxShareConfig.link = config.link || defaultWxShareConfig.link;
		wxShareConfig.imgUrl = config.imgUrl || defaultWxShareConfig.imgUrl;
        wxShareConfig.jsApiList = config.jsApiList || defaultWxShareConfig.jsApiList;
        // wxShareConfig.hideMenuList = config.hideMenuList || defaultWxShareConfig.hideMenuList;
        //微信中二次分享的处理，截取到有效的分享链接
		var authUrl = wxShareConfig.link.split("#")[0];
		authUrl = authUrl.split("?")[0];
        //判断是否已经签名了
		if (signMap.has(authUrl)) {
			this._wxConfigJSSDK(signMap.get(authUrl), wxShareConfig);
		} else {
			this._wxShareAuth(authUrl);
		}
 
	},
 
    //从服务器获取某分享链接的签名信息，并存储起来
	_wxShareAuth(authUrl) {
        //此处我使用的是自己封装的网络请求方法
		// const promise = Vue.http.get(jsSDKAuth + "?url=" + encodeURIComponent(authUrl));
		const promise = httpObj.$ajax(jsSDKAuth + "?url=" + encodeURIComponent(authUrl));
		promise.then(res => {
            //此处请根据各自的服务器返回数据文档进行操作
			if (res.code == 200) {
				//分享链接授权签名信息
				const sign = res.data;
				signMap.set(authUrl, sign);
				this._wxConfigJSSDK(sign);
			}
		});
		promise.catch((err) => {
			console.log(err.response);
		})
	},
 
    //将签名信息更新到微信的SDK中
	_wxConfigJSSDK(shareSign) {
		wx.config({
			debug: false,
			appId: shareSign.appId,
			timestamp: shareSign.timestamp,
			nonceStr: shareSign.nonceStr,
			signature: shareSign.signature,
			jsApiList: ['updateTimelineShareData', 'updateAppMessageShareData']
		})
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
		wx.ready(function() {
		    const {title,desc,link,imgUrl} = wxShareConfig;
			wx.updateTimelineShareData({
			    title,
				link,
				imgUrl,
				success: function() {
					console.log("分享成功");
				},
				fail: function() {
					console.log("分享失败");
				},
				cancel: function() {
					console.log("取消分享");
				}
			})
			wx.updateAppMessageShareData({
				title,
                desc,
				link,
				imgUrl,
				success: function() {
					console.log("分享成功");
				},
				cancel: function() {
				    console.log("取消分享");
				}
			})
			
		});
				  
		// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。	
		wx.error(function(res) {
			console.log("分享失败: error", res);
		});
		
	}
}
//导出工具类
export default wxShare;
//将工具类添加到Vue静态方法方便调用
Vue.prototype.$wxShare = wxShare;

在main.js引入工具类

import "./utils/wxShare";

在需要分享的页面进行分享初始化

// 在钩子函数中调用下面函数

wxShareInit() {
                var shareUrl = 'http://localhost/form-management/#/formDataSearchPhone?id=' + this.templateId;
                let shareConfig = {
                    title: this.settingInfo.title,
                    desc: this.settingInfo.title,
                    imgUrl: this.$http + this.settingInfo.logo,
                    link: shareUrl
                };
                console.log(JSON.stringify(shareConfig));
                this.$wxShare.updateWxShareConfig(shareConfig);
            }