> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# 微信 JS-SDK 分享

## 微信自定义分享

- [【 微信官方文档 】](https://developers.weixin.qq.com/doc/)

### 业务需求：

开发过程中有些业务需要借助微信进行推广和宣传。难免需要使用微信提供的一些功能，比如微信的二次分享（也叫微信自定义分享）功能来方便用户查阅和了解。微信公众号提供的自定义分享功能涉及的模块主要有以下几类：

1. [自定义“分享给朋友”及“分享到 QQ”](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#111)**（1.4.0）**；
2. [自定义“分享到朋友圈”及“分享到 QQ 空间”](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#112)**（1.4.0）**；
3. 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口。

:::danger 「温馨提示」
新版的微信自定义分享相对【即将废弃】的自定义分享 api 来说简洁了好多，处理起来相比旧版自定义分享来说少了许多代码；提高了代码的复用性。
:::

### 微信自定义分享代码：

```javascript title="自定义分享"
let WeChatPay = function() {
	// 2、引入js后、获取公众号校验信息
	let timestamp = '',
		nonceStr = '',
		signature = '';
	// 用于换取微信校验信息的参数：要求不可以包含 “#” 号
	let v = {
		url: location.split('#')[0]
	};

	// 3、通过config接口注入权限验证配置（需要同步进行，在获取到校验信息后方可注入config，否则校验失败！）
	wx.config({
		debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId: '', // 必填，公众号的唯一标识
		timestamp: , // 必填，生成签名的时间戳
		nonceStr: '', // 必填，生成签名的随机串
		signature: '', // 必填，签名
		jsApiList: [
			"checkJsApi",
			"onMenuShareAppMessage",
			"onMenuShareTimeline",
			"updateAppMessageShareData",
			"updateTimelineShareData"
		] // 必填，需要使用的JS接口列表
	});

	// 4、通过ready接口处理成功验证
	wx.ready(function() {
		// 【备注：checkJsApi接口是客户端6.0.2新引入的一个预留接口，第一期开放的接口均可不使用checkJsApi来检测。】
		wx.checkJsApi({
			jsApiList: [
				"onMenuShareAppMessage",
				"onMenuShareTimeline",
				"updateAppMessageShareData",
				"updateTimelineShareData"
			], // 需要检测的JS接口列表，所有JS接口列表见附录2,
			success: function(res) {}
		});
		// 1.0版本的微信分享已经被废弃，为了兼容老版本写法如下
		// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
		if (wx.onMenuShareAppMessage) {
			wx.onMenuShareAppMessage({
				title: '', // 分享标题
				desc: '', // 分享描述
				link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: '', // 分享图标
				success: function() {} // 设置成功
			});
		} else {
			// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
			wx.updateAppMessageShareData({
				title: '', // 分享标题
				desc: '', // 分享描述
				link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: '', // 分享图标
				success: function() {} // 设置成功
			});
		}

		if (wx.onMenuShareTimeline) {
			wx.onMenuShareTimeline({
				title: '', // 分享标题
				link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: '', // 分享图标
				success: function() {} // 设置成功
			});
		} else {
			// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
			wx.updateTimelineShareData({
				title: '', // 分享标题
				link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: '', // 分享图标
				success: function() {} // 设置成功
			});
		}
	});
}
```

::: danger 注意事项：
此写法是为了兼容旧版的微信自定义分享功能。因为有些老用户没有升级微信或者没有升级最新版的【JS-SDK】，因此会导致老旧代码微信分享失败。若不考虑兼顾老版本可以舍弃【 if 】中的代码块，直接采用【else】中的代码块。

:::

## 限制分享【微信界面操作】

### 业务需求：

在开发过程中，难免会有一些特殊的要求，如：要求此次推广活动只能在微信中打开，限制微信用户分享给好友，限制分享到微信朋友圈等等。当遇到这些业务需求的时候就需要特定的操作来做一些限制了。微信浏览器右上角的的三个点，点开时下方弹出的操作按钮是可以做限制处理的，这就是在根上处理了限制微信用户分享的问题。

### [界面操作 API：](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#43)

1. 关闭当前网页窗口
2. 批量隐藏功能按钮
3. 批量显示功能按钮
4. 隐藏所有非基础按钮
5. 显示所有非基础按钮

【 代码 API 】

```javascript title="限制分享"
// 1、关闭当前网页窗口接口
wx.closeWindow();

// 2、批量隐藏功能按钮接口
wx.hideMenuItems({
    menuList: [], // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
});

// 3、批量显示功能按钮接口
wx.showMenuItems({
    menuList: [], // 要显示的菜单项，所有menu项见附录3
});

// 4、隐藏所有非基础按钮接口
wx.hideAllNonBaseMenuItem();

// 5、显示所有功能按钮接口
wx.showAllNonBaseMenuItem();
```

### 附录 3：菜单列表：

【 基本类 】

|     **举报**     | "menuItem:exposeArticle" |
| :------------: | ------------------------ |
|    **调整字体**    | "menuItem:setFont"       |
|    **日间模式**    | "menuItem:dayMode"       |
|    **夜间模式**    | "menuItem:nightMode"     |
|     **刷新**     | "menuItem:refresh"       |
| **查看公众号（已添加）** | "menuItem:profile"       |
| **查看公众号（未添加）** | "menuItem:addContact"    |

【 传播类 】

|   **发送给朋友**   | "menuItem:share:appMessage" |
| :-----------: | --------------------------- |
|   **分享到朋友圈**  | "menuItem:share:timeline"   |
|   **分享到 QQ**  | "menuItem:share:qq"         |
| **分享到 Weibo** | "menuItem:share:weiboApp"   |
|     **收藏**    | "menuItem:favorite"         |
|   **分享到 FB**  | "menuItem:share:facebook"   |
| **分享到 QQ 空间** | "menuItem:share:QZone"      |

【 保护类 】

|     **编辑标签**     | "menuItem:editTag"           |
| :--------------: | ---------------------------- |
|      **删除**      | "menuItem:delete"            |
|     **复制链接**     | "menuItem:copyUrl"           |
|      **原网页**     | "menuItem:originPage"        |
|     **阅读模式**     | "menuItem:readMode"          |
|  **在 QQ 浏览器中打开** | "menuItem:openWithQQBrowser" |
| **在 Safari 中打开** | "menuItem:openWithSafari"    |
|      **邮件**      | "menuItem:share:email"       |
|    **一些特殊公众号**   | "menuItem:share:brand"       |

### 代码实例：

```javascript title="调用 SDK"
let RestrictedBtn = function() {
		// 2、引入js后、获取公众号校验信息
		let timestamp = '',
			nonceStr = '',
			signature = '';
		// 用于换取微信校验信息的参数：要求不可以包含 “#” 号
		let v = {
			url: location.split('#')[0]
		};

		// 3、通过config接口注入权限验证配置（需要同步进行，在获取到校验信息后方可注入config，否则校验失败！）
		wx.config({
			debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: '', // 必填，公众号的唯一标识
			timestamp: , // 必填，生成签名的时间戳
			nonceStr: '', // 必填，生成签名的随机串
			signature: '', // 必填，签名
			jsApiList: ["checkJsApi", "hideMenuItems", "updateAppMessageShareData", "updateTimelineShareData"] // 必填，需要使用的JS接口列表
		});

		// 4、通过ready接口处理成功验证
		wx.ready(function() {
				// 微信界面限制
				// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮
				wx.hideMenuItems({
						menuList: [
							"menuItem:share:qq", //  分享到QQ
							"menuItem:share:weiboApp", // 分享到Weibo
							"menuItem:favorite", // 收藏
							"menuItem:share:facebook", // 分享到FB
							"menuItem:share:QZone", // 分享到 QQ 空间
							"menuItem:openWithQQBrowser", // 在QQ浏览器中打开
							"menuItem:openWithSafari", // 在Safari中打开
							"menuItem:share:email", // 邮件
							"menuItem:copyUrl" // 复制链接
						});

					// 校验API
					wx.checkJsApi({
						jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"], // 需要检测的JS接口列表，所有JS接口列表见附录2,
						success: function(res) {}
					});
				});
		}
```