微信内打开的H5页二次分享成卡片模式

一、需求

从APP端分享至微信好友或朋友圈的H5页面是卡片形式，但再次从微信分享出去的时候，却是链接形式；
详细情况见下图

二、如何二次分享出来的时候也是卡片呢

使用微信公众号提供的网页开发接口来实现此功能；
前提的化300块钱开通下, 不花那指定是不好使的。。。（有钱能使鬼推磨，哈哈哈，说的真没毛病）

三、代码实现

JS-SDK说明文档

按照接口文档说明，一步步来

// 从后端获取生成好的sign签名及appid等信息
// title,desc,imgUrl 是页面调用此函数是需要传的参数, imgUrl 必填项
getSign(title,desc,imgUrl){
	var self = this;
	var signStr = '';
	var url = window.location.href;
	
	axios.post(baseUrl,{sign:signStr, uri:url}).then(function(res){
		if(res.data.code==0){
			self.wxSign = res.data.data;
			self.getAccesToken(title,desc,imgUrl)
		}else{
			console.log(res.data.msg);
		}
	})
},
// 通过 config 接口注入权限验证配置
getAccesToken(title,desc,imgUrl){
	wx.config({
		  debug: true, 
		  appId: this.wxSign.appId, // 必填，公众号的唯一标识
		  timestamp: this.wxSign.timestamp, // 必填，生成签名的时间戳
		  nonceStr: this.wxSign.nonceStr, // 必填，生成签名的随机串
		  signature: this.wxSign.signature,// 必填，签名
		  jsApiList: [
			  'updateAppMessageShareData',
			  'updateTimelineShareData'
		  ] // 必填，需要使用的 JS 接口列表
	});
	this.handleShareData(title,desc,imgUrl);
},
// 设置分享的参数
handleShareData(title,desc,imgUrl){
	var url = window.location.href; // 获取页面路径
	 wx.ready(function () {
		// 微信分享的数据
		var shareData = {
			title: title, // 分享标题
			desc: desc, // 分享描述
			link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
			imgUrl: imgUrl, // 分享图标
			success: function () {
				// 分享成功可以做相应的数据处理
				alert('share调用成功')
			},
			fail: function () {
				alert('share调用失败')
			},
			complete: function () {
				alert('调用结束')
			}
		}
		wx.updateTimelineShareData(shareData)
		wx.updateAppMessageShareData(shareData)
	})
	wx.error(function (res) {
		// config信息验证失败会执行error函数，如签名过期导致验证失败，
		// 具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，
		// 对于SPA可以在这里更新签名。
		alert('分享失败', res)
		//alert('分享失败')

	})
}

• getSign() 返回的参数：
  
• 微信端再次分享出来的效果：