vue 使用微信JSSDK 实现微信分享卡片效果

安装 npm install weixin-js-sdk
导入 import jWeixin from ‘weixin-js-sdk’
使用 （本文实现微信分享实现卡片样式，所以只使用了[‘onMenuShareAppMessage’, ‘onMenuShareTimeline’]两个接口）

jWeixin.config({debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。appId: data.appId, // 必填，公众号的唯一标识timestamp: data.timestamp, // 必填，生成签名的时间戳nonceStr: data.nonceStr, // 必填，生成签名的随机串signature: data.signature, // 必填，签名jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'], // 必填，需要使用的 JS 接口列表});//config 验证成功后通过 ready 接口处理js   
jWeixin.ready(function (res) {// config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。jWeixin.onMenuShareAppMessage({title: that.wxShareTitle, // 分享标题desc: that.wxShareDescription, // 分享描述imgUrl: that.wxShareLogo, // 分享图标link: `${window.location.href.split('#')[0]}#/?surveyId=${that.surveyId}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致success(res) {console.log('success(res)==', res);alert('分享成功')},fail(res) {console.log('fail(res)==', res);alert('分享失败')}});jWeixin.onMenuShareTimeline({title: that.wxShareTitle,// imgUrl: 'https://ouzhou-file-1302887350.file.myqcloud.com/weixin/xiaochenxu/shar-recommendCtr.png',imgUrl: that.wxShareLogo,link: `${window.location.href.split('#')[0]}#/?surveyId=${that.surveyId}`})});

更多配置

具体细节可以转微信官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

H5微信分享，不显示卡片效果，只显示链接

如果配置方面没有问题，那么只要注意以下几点就可以

1.在公众号菜单中的链接打开，才能正常分享卡片；
2.可以通过收藏链接，再打开分享也是卡片；
3.把链接换成二维码，扫码后进入分享也是卡片。如果是用微信直接打开链接分享会是链接。