h5公众号分享朋友圈

h5公众号分享朋友圈

1.导入js-sdk

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

2.分享代码

一、通过config接口注入权限验证配置

wx.config({
  // 开启调试模式,调用的所有api的返回值会在客户端alert出来，
  // 若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  debug: true, 
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表，通俗点就是你所要用的分享方式
});

二、过ready接口处理成功验证

wx.ready(function () {
	//需在用户可能点击分享按钮前就先调用
	// 分享给朋友
	wx.onMenuShareAppMessage({
		title, // 分享标题
		// desc: '朋友分享', // 分享描述
		link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		imgUrl, // 分享图标
		success: () => {
			// 设置成功
			uni.showToast({
				title:"分享成功",
				icon: "none"
			})
		}
	})
	// 分享到朋友圈
	wx.onMenuShareTimeline({
		title, // 分享标题
		// desc: '朋友分享', // 分享描述
		link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		imgUrl, // 分享图标
		success:  () => {
			// 设置成功
			uni.showToast({
				title:"分享成功",
				icon: "none"
			})
		}
	})
});

微信分享与配置
Tip：
1.目前公众号不支持分享图片列表与文字搭配的分享方式
3在进行第二步获取签名算法时，向后端发送的url地址参数不能写死，应根据当前页面的实际地址来进行调用 url: ${window.location.href.split("#")[0]}
2.在做分享功能测试时，如果以链接的形式进行调试，在微信PC端以及开发者工具上能正常分享链接，而在手机上则只有本页面的链接地址。那么此时可以用登录的链接去换取一个二维码，进行扫码进入之后再进行分享调试功能测试，看是否正常。这个问题的原因应该是微信官方对于这种明文链接有做限制或者说场景值有限制，具体还没有找到问题的答案。