微信公众号

引入 JSDK

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

封装类

wx-utils.js

class WxUtils {
	static instance = null; // 静态单例实例

	/**
	 * 获取全局单例
	 * @param {Object} wxConfig - 微信配置
	 */
	static getInstance(wxConfig) {
		if (!WxUtils.instance) {
			WxUtils.instance = new WxUtils(wxConfig);
		}
		return WxUtils.instance;
	}

	/**
	 * 微信工具类
	 * @param {Object} wxConfig - 微信配置
	 * @param {String} wxConfig.appId - 微信公众号appId
	 * @param {String} wxConfig.timestamp - 时间戳
	 * @param {String} wxConfig.nonceStr - 随机字符串
	 * @param {String} wxConfig.signature - 签名
	 * @param {Array} wxConfig.jsApiList - 需要使用的JS接口列表
	 * @param {Boolean} wxConfig.debug - 是否开启调试模式
	 */
	constructor(wxConfig = { appId: '', timestamp: '', nonceStr: '', signature: '', jsApiList: [], debug: false }) {
		if (WxUtils.instance) {
			return WxUtils.instance; // 保证单例
		}

		this.wxConfig = wxConfig;
		if (!this.wxConfig.jsApiList || this.wxConfig.jsApiList.length === 0) {
			this.wxConfig.jsApiList = [
				'scanQRCode',
				'getLocation',
				'openLocation',
				'getNetworkType',
				'updateAppMessageShareData',
				'updateTimelineShareData',
				'chooseImage',
				'getLocalImgData',
				'previewImage',
			];
		}

		this._init();

		WxUtils.instance = this; // 保存实例
	}

	_init() {
		try {
			wx.config({
				debug: this.wxConfig.debug,
				appId: this.wxConfig.appId,
				timestamp: this.wxConfig.timestamp,
				nonceStr: this.wxConfig.nonceStr,
				signature: this.wxConfig.signature,
				jsApiList: this.wxConfig.jsApiList,
			});

			wx.ready(() => {
				console.log('微信环境已准备', wx);
			});

			wx.error((err) => {
				console.error('微信环境初始化失败', err);
			});
		} catch (e) {
			console.error('微信环境初始化失败', e);
		}
	}

	/**
	 * 微信分享
	 * @param {Object} obj - 分享对象
	 * @param {String} obj.title - 分享标题
	 * @param {String} obj.desc - 分享描述
	 * @param {String} obj.imgUrl - 分享图片
	 * @param {String} obj.link - 分享链接
	 */
	wxShare(obj) {
		let shareLink = obj.link || window.location.href;

		if (shareLink.includes('#')) {
			const [base, hash] = shareLink.split('#');
			const connector = base.includes('?') ? '&' : '?';
			shareLink = `${base}${connector}from=wxshare&ts=${Date.now()}#${hash}`;
		} else {
			const connector = shareLink.includes('?') ? '&' : '?';
			shareLink = `${shareLink}${connector}from=wxshare&ts=${Date.now()}`;
		}

		const shareData = {
			title: obj.title || document.title || '',
			desc: obj.desc || '',
			link: shareLink || window.location.href,
			imgUrl: obj.imgUrl || '',
		};

		// 新版 API
		if (wx.updateAppMessageShareData) {
			wx.updateAppMessageShareData({
				...shareData,
				success: () => console.log('分享给好友设置成功'),
				fail: (err) => console.error('分享好友失败', err),
			});
		}

		if (wx.updateTimelineShareData) {
			wx.updateTimelineShareData({
				...shareData,
				title: shareData.title,
				success: () => console.log('分享到朋友圈设置成功'),
				fail: (err) => console.error('分享朋友圈失败', err),
			});
		}

		// 旧版 API 兼容
		if (wx.onMenuShareAppMessage) {
			wx.onMenuShareAppMessage({
				...shareData,
				success: () => console.log('分享给好友设置成功（旧版）'),
				fail: (err) => console.error('分享好友失败（旧版）', err),
			});
		}

		if (wx.onMenuShareTimeline) {
			wx.onMenuShareTimeline({
				...shareData,
				title: shareData.title,
				success: () => console.log('分享到朋友圈设置成功（旧版）'),
				fail: (err) => console.error('分享朋友圈失败（旧版）', err),
			});
		}
	}
}

export default WxUtils;

使用方式

import WxUtils from "@/utils/wx-utils.js";

// 获取实例
const wxUtils = WxUtils.getInstance({
  appId: "xxx",
  timestamp: "xxx",
  nonceStr: "xxx",
  signature: "xxx",
  debug: false,
  jsApiList = [
    "updateAppMessageShareData",
    "updateTimelineShareData",
  ]
});

// 调用分享
wxUtils.wxShare({
  title: "测试标题",
  desc: "测试描述",
  link: "https://example.com/page#section",
  imgUrl: "https://example.com/logo.png"
});