一、需求

从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() 返回的参数：
微信端再次分享出来的效果：

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

安卓苹果手机在微信内打开支付宝h5拉起app支付
// 监控微信浏览器isWeiXin() { let ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMesseng ...
微信内打开H5问题错误10003
错误编号:10003 错误描述: 发布h5商城后,在微信中打开,提示 redirect_uri域名和后台配置不一样解决方案: 发现这个问题后,查了资料说是属于微信授权类问题,于是开始登陆微信公众号 ...
聊聊微信内打开H5链接时如何自动跳转外部浏览器打开
很多朋友问我怎么解决微信内点击链接或扫描二维码可以直接跳出微信在外部浏览器打开网页链接,其实这并不难,只要我们实现微信跳转功能即可.下面跟大家聊聊微信内如何实现自动跳转外部浏览器打开网页功能目的生 ...
微信内打开的网页不能下载APP，微信无法打开浏览器访问指定页面的解决方案...
不管是app的下载链接还是普通文件的链接在微信内置浏览器或者QQ内置浏览器分享都会被拦截.这是腾讯对第三方下载域名实施的打压政策.被屏蔽了也就意味着链接在微信中是无法正常打开的,那么此时用户在微信内打 ...
网页无法访问，微信内打开链接提示已停止访问该怎么解决
大家在使用微信推广的时候是不是经常都会遇到推广链接被拦截导致无法下载app的情况,此时用户在微信中打开会提示 "已停止访问该网页".这对于使用微信推广的商家来说非常不友好,而且造成 ...
微信内打开链接，跳转到公众号关注页面
制作一个链接,点击该链接跳转到公众号关注页面. 1.登录微信公众平台 2.F12 打开开发者工具 >>Elements 3.ctrl+f 搜索 uin_base64 4.将下面链接的__ ...
JS判断当前页面是否在微信内打开
有的时候我们的页面只允许在微信内才能使用,这个时候就要判断是否是在微信内打开的页面,只需要加入一行代码判断下就可以了 var wx= (function(){ return navigator.use ...
微信内置浏览器动态生成二维码并长按识别
现如今围绕微信生态相关开发已经非常常见,本期带来如何通过 qrcode.js 实现微信内置浏览器动态生成二维码并能够长按识别以及通过 html2canvas 生成图片并长按保存说几个知识点微信 ...
苹果用户在微信内打开下载链接如何不用跳转就能下载app
分析由于微信引流具备快速性和高效的二次传播性,故众多商家纷纷选择微信推广为主要的推广方式.但在使用微信分享链接和营销方案的过程中经常会遇到分享链接在微信内被拦截从而无法打开或者打开后无法下载文件的 ...

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

一、需求

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

三、代码实现

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

最新文章

热门文章