微信H5 分享(自定义标题、图片、链接) 与 禁止分享(微信隐藏功能按钮) 功能的写法

使用场景：

最近有个H5项目在微信浏览器上运行，在项目开发过程中有一个奇特的需求，就是打开这个项目网页的用户分享 和 静止分享（就是有些页面要求要有分享【可自己定义标题、图片、链接】，而有些页面要求要不让用户分享）。

自定义分享到是经常做，但要不让用户分享还真没做过，经过一翻折腾最终搞定了，代码如下：

 

注：无论是信自定义分享还是静止分享都要引入微信的js-sdk文件，官网下载地址：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js

 

官网文档地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

 

一、微信自定义分享的写法：

由于项目需求，要自定义分享的标题、图片、链接等参数在后台管理中进行自由设置，所以这里先请求后端拿到分享相应的参数。

<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

$.ajax({
    url: 'https:www.xxx.com/index.php?r=index/share',  //后端API地址。。。
	method: 'GET',
	data: {
		url: 'https:www.abcd.com/index.html'
	},
	success: (e) => {
		let o = e.data.result;
		if (10000 == o.code) {
			wx.config({
				debug: o.data.debug, 							// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: o.data.appid, 							// 必填，公众号的唯一标识
				timestamp: o.data.timestamp, 					// 必填，生成签名的时间戳
				nonceStr: o.data.nonceStr, 						// 必填，生成签名的随机串
				signature: o.data.signature,					// 必填，签名
				jsApiList: [									// 必填，需要使用的JS接口列表
					'checkJsApi',
					'onMenuShareTimeline',						//分享到微信朋友圈
					'onMenuShareAppMessage',					//分享给微信朋友
					'onMenuShareQQ',							//分享到QQ
					'onMenuShareWeibo',							//分享到微博
					'onMenuShareQZone',							//分享到QQ空间
				] 										
			});
			wx.ready((d = o.data.shareConfig) => {
				wx.onMenuShareTimeline({
					title: d.title, 							// 分享标题
					link:  this.$.__URL__ + '/web/index.html', 	// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: d.cover, 							// 分享图标
					success: function() {},
					cancel: function() {}
				});
				wx.onMenuShareAppMessage({
					title: d.title, 							// 分享标题
					desc: d.content, 							// 分享描述
					link: this.$.__URL__ + '/web/index.html', 	// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: d.cover, 							// 分享图标
					type: 'link', 								// 分享类型,[music、video或link，不填默认为link]
					success: function() {},
					cancel: function() {}
				});
				wx.onMenuShareQQ({ 
					title: d.title, 							// 分享标题
					desc: d.content, 							// 分享描述
					link: encodeURIComponent(d.link), 			// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: d.cover, 							// 分享图标
					success: function () {}						// 设置成功回调
				});
				wx.onMenuShareWeibo({
					title: d.title, 							// 分享标题
					desc: d.content, 							// 分享描述
					link: encodeURIComponent(d.link), 			// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: d.cover, 							// 分享图标
					success: function () {}						// 设置成功回调
				});
				wx.onMenuShareQZone({
					title: d.title, 							// 分享标题
					desc: d.content, 							// 分享描述
					link: encodeURIComponent(d.link), 			// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: d.cover, 							// 分享图标
					success: function () {}						// 设置成功回调
				});
			});
			wx.error(function(res){
				// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
			});
		};
	}
});

效果图：

 

 

 

 

二、微信静止分享的写法：

在微信中叫《 批量隐藏功能按钮》

文档地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

 

<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

$.ajax({
	url: 'https:www.xxx.com/index.php?r=index/share',  //后端API地址。。。
	method: 'GET',
	data: {
		url: 'https:www.abcd.com/index.html'
	},
	success: (e) => {
		let o = e.data.result;
		if (10000 == o.code) {
			Wx.config({
				debug: o.data.debug, 						
				appId: o.data.appid, 							
				timestamp: o.data.timestamp, 					
				nonceStr: o.data.nonceStr, 						
				signature: o.data.signature,					
				jsApiList: [									
					'checkJsApi',
					'hideMenuItems' //调用下面的方法：
				] 										
			});
			Wx.ready(() => {
				Wx.hideMenuItems({
					//要隐藏功能按钮（// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮）

					menuList: [								                
                        'menuItem:share:appMessage', 	//发送给朋友
						'menuItem:share:timeline',		//分享到朋友圈
						'menuItem:share:qq',			//分享到QQ
						'menuItem:share:weiboApp',		//分享到Weibo
						'menuItem:share:favorite', 		//收藏
						'menuItem:share:facebook',		//分享到FB
						'menuItem:share:QZone',			//分享到 QQ 空间
					]
				});
			});
		};
	},
});

 

效果图：