H5微信卡片分享

前期调研 微信开放文档（微信卡片分享）

 需要注意一下，即将废弃接口，建议不要再调用了。

appid对应的公众号是否有分享接口权限(必须认证)

登录公众号后，接口状态为已获得，表示有权限

设置白名单和绑定域名

分享的服务器外网ip地址，需要添加到白名单中

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

前端源码

下载 cnpm i weixin-js-sdk

引入 import wx from "weixin-js-sdk";

import wx from "weixin-js-sdk";
/*
 * 微信分享
 * 获取微信加签信息
 * @param{data}:获取的微信加签
 * @param{shareData}:分享配置参数
 */
export const wexinShare = (data, shareData) => {
	// var wx = require('weixin-js-sdk') || window['wx'];
	let appId = data.appId;
	let timestamp = data.timestamp;
	let nonceStr = data.nonceStr;
	let signature = data.signature;
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。（测试记得关掉）
		appId: appId, // 必填，公众号的唯一标识
		timestamp: timestamp, // 必填，生成签名的时间戳
		nonceStr: nonceStr, // 必填，生成签名的随机串
		signature: signature, // 必填，签名，见附录1
		jsApiList: [
			'updateAppMessageShareData',
			'updateTimelineShareData'
		] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});
	wx.checkJsApi({
		jsApiList: [
			'updateAppMessageShareData',
			'updateTimelineShareData'
		], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		success: function(res) {
			// 以键值对的形式返回，可用的api值true，不可用为false
			// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
		},
	});
	wx.ready(function() {
		// //分享到朋友圈”及“分享到QQ空间”
		wx.updateTimelineShareData({
			title: shareData.title, // 分享标题
			link: shareData.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			// link: shareData.link + "&t=" + timestamp + "&Content=1", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl: shareData.imgUrl, // 分享图标
			success: function(res) {
				// 设置成功
			},
		});

		//“分享给朋友”及“分享到QQ”
		wx.updateAppMessageShareData({
			title: shareData.title, // 分享标题
			desc: shareData.desc, // 分享描述
			link: shareData.link, // 分享链接 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl: shareData.imgUrl, // 分享图标
			success: function(res) {},

		});
	});
	wx.error(function(res) {
		// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
	});
};

 

			DispositionShare(val) {
				uni.request({
					url: '接口路径',
					method: 'POST',
					data: {
						//填写参数
					},
					success: (res) => {
						if (res.data.code == 0) {
							const datas = res.data.data
							this.verify = datas
							var url = window.location.href.split('#')[0];
							// var shareWxLink = encodeURIComponent(url);
							//微信加签
							var obj = {
								appId: datas.appId,
								nonceStr: datas.nonceStr,
								signature: datas.signature,
								timestamp: datas.timeStamp,
								jsApiList: [
									'updateAppMessageShareData',
									'updateTimelineShareData'
								] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
							};

							let imgUrl;

							var titleshare = this.shareTitle ? this.shareTitle : '填写分享默认标题';

							imgUrl = this.shareIcon ? this.shareIcon :
								'分享默认logo'
							//分享数据，这段主要是为了在hash模式下分享出去的链接不被浏览器截取，保证完全把链接分享出去
							let shareData = {
								title: titleshare, // 分享标题
								desc: '',//填写描述，根据实际情况编写
								link: url,
								imgUrl: imgUrl // 分享图标
							};
							//引用
							wexinShare(obj, shareData);
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none"
							});
							// this.$toast.warn('获取sdk参数失败！');
						}
					},
					fail: (err) => {
						// 请求失败
					},

				})
			}

这就是前端的代码啦～～～

踩坑

分享接口没有权限

1.查看配置，看看是否配置了白名单和绑定域名，公众号是否有权限调用接口。

2.updateAppMessageShareData的link参数，分享链接的地址上有带中文的参数(中文参数值会被干掉)，安卓上分享是可以正常分享，但是在IOS上会出现报错，导致你分享标题、描述、图片等都失效了：

3.查看签名是否正确，根据文档逐一排查。文档，签名校验工具