我的博客
开发记录
前端笔记
前端文档
我的博客
开发记录
前端笔记
前端文档

微信自定义分享

预计阅读时间: 4 分钟

微信自定义分享

业务需求：

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

  1. 自定义“分享给朋友”及“分享到 QQ”（1.4.0）；
  2. 自定义“分享到朋友圈”及“分享到 QQ 空间”（1.4.0）；
  3. 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口。
「温馨提示」

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

微信自定义分享代码：

自定义分享
1let WeChatPay = function() {
2	// 2、引入js后、获取公众号校验信息
3	let timestamp = '',
4		nonceStr = '',
5		signature = '';
6	// 用于换取微信校验信息的参数：要求不可以包含 “#” 号
7	let v = {
8		url: location.split('#')[0]
9	};
10
11	// 3、通过config接口注入权限验证配置（需要同步进行，在获取到校验信息后方可注入config，否则校验失败！）
12	wx.config({
13		debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
14		appId: '', // 必填，公众号的唯一标识
15		timestamp: , // 必填，生成签名的时间戳
16		nonceStr: '', // 必填，生成签名的随机串
17		signature: '', // 必填，签名
18		jsApiList: [
19			"checkJsApi",
20			"onMenuShareAppMessage",
21			"onMenuShareTimeline",
22			"updateAppMessageShareData",
23			"updateTimelineShareData"
24		] // 必填，需要使用的JS接口列表
25	});
26
27	// 4、通过ready接口处理成功验证
28	wx.ready(function() {
29		// 【备注：checkJsApi接口是客户端6.0.2新引入的一个预留接口，第一期开放的接口均可不使用checkJsApi来检测。】
30		wx.checkJsApi({
31			jsApiList: [
32				"onMenuShareAppMessage",
33				"onMenuShareTimeline",
34				"updateAppMessageShareData",
35				"updateTimelineShareData"
36			], // 需要检测的JS接口列表，所有JS接口列表见附录2,
37			success: function(res) {}
38		});
39		// 1.0版本的微信分享已经被废弃，为了兼容老版本写法如下
40		// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
41		if (wx.onMenuShareAppMessage) {
42			wx.onMenuShareAppMessage({
43				title: '', // 分享标题
44				desc: '', // 分享描述
45				link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
46				imgUrl: '', // 分享图标
47				success: function() {} // 设置成功
48			});
49		} else {
50			// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
51			wx.updateAppMessageShareData({
52				title: '', // 分享标题
53				desc: '', // 分享描述
54				link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
55				imgUrl: '', // 分享图标
56				success: function() {} // 设置成功
57			});
58		}
59
60		if (wx.onMenuShareTimeline) {
61			wx.onMenuShareTimeline({
62				title: '', // 分享标题
63				link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
64				imgUrl: '', // 分享图标
65				success: function() {} // 设置成功
66			});
67		} else {
68			// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
69			wx.updateTimelineShareData({
70				title: '', // 分享标题
71				link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
72				imgUrl: '', // 分享图标
73				success: function() {} // 设置成功
74			});
75		}
76	});
77}
注意事项：

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

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

业务需求：

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

界面操作 API：

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

【 代码 API 】

限制分享
1// 1、关闭当前网页窗口接口
2wx.closeWindow();
3
4// 2、批量隐藏功能按钮接口
5wx.hideMenuItems({
6	menuList: [] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
7});
8
9// 3、批量显示功能按钮接口
10wx.showMenuItems({
11	menuList: [] // 要显示的菜单项，所有menu项见附录3
12});
13
14// 4、隐藏所有非基础按钮接口
15wx.hideAllNonBaseMenuItem();
16
17// 5、显示所有功能按钮接口
18wx.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"

代码实例：

调用 SDK
1let RestrictedBtn = function() {
2		// 2、引入js后、获取公众号校验信息
3		let timestamp = '',
4			nonceStr = '',
5			signature = '';
6		// 用于换取微信校验信息的参数：要求不可以包含 “#” 号
7		let v = {
8			url: location.split('#')[0]
9		};
10
11		// 3、通过config接口注入权限验证配置（需要同步进行，在获取到校验信息后方可注入config，否则校验失败！）
12		wx.config({
13			debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
14			appId: '', // 必填，公众号的唯一标识
15			timestamp: , // 必填，生成签名的时间戳
16			nonceStr: '', // 必填，生成签名的随机串
17			signature: '', // 必填，签名
18			jsApiList: ["checkJsApi", "hideMenuItems", "updateAppMessageShareData", "updateTimelineShareData"] // 必填，需要使用的JS接口列表
19		});
20
21		// 4、通过ready接口处理成功验证
22		wx.ready(function() {
23				// 微信界面限制
24				// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮
25				wx.hideMenuItems({
26						menuList: [
27							"menuItem:share:qq", //  分享到QQ
28							"menuItem:share:weiboApp", // 分享到Weibo
29							"menuItem:favorite", // 收藏
30							"menuItem:share:facebook", // 分享到FB
31							"menuItem:share:QZone", // 分享到 QQ 空间
32							"menuItem:openWithQQBrowser", // 在QQ浏览器中打开
33							"menuItem:openWithSafari", // 在Safari中打开
34							"menuItem:share:email", // 邮件
35							"menuItem:copyUrl" // 复制链接
36						});
37
38					// 校验API
39					wx.checkJsApi({
40						jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"], // 需要检测的JS接口列表，所有JS接口列表见附录2,
41						success: function(res) {}
42					});
43				});
44		}