实现自定义微信和QQ分享成卡片

微信通过微信提供的sdk实现、QQ通过sdk+meta实现(meta实测在安卓手机不生效，sdk生效，最好两个都用)

微信

1.前置工作

微信公众平台->公众号设置->功能设置里填写JS接口安全域名

2.引入微信sdk

微信开发平台

1.
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>2.
import wx from 'weixin-js-sdk' // npm i -S weixin-js-sdk

3.代码实现

function getConfigData() {
            // 请求后端接口
            // 从后端接口获取appID timestamp noncestr signature
            wx.config({
                    debug: false, // 为true开启debug
                    appId: data.appID,
                    timestamp: data.timestamp,
                    nonceStr: data.noncestr,
                    signature: data.signature,
                    jsApiList: ['updateAppMessageShareData','updateTimelineShareData']
            })

        wx.ready(function () {          wx.updateAppMessageShareData({                title: shareConfig.title, // 分享标题                desc: shareConfig.desc, // 分享描述                link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致                imgUrl: shareUrl, // 分享图标                success: function() {}            });            wx.updateTimelineShareData({                title: shareConfig.title, // 分享标题                desc: shareConfig.desc, // 分享描述                link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致                imgUrl: shareUrl, // 分享图标                success: function() {}            })        })

             

QQ

1.引入qq-sdk

qq开发平台

<script type="text/javascript" src="https://open.mobile.qq.com/sdk/qqapi.js"></script>

2.代码实现

 <meta itemprop="name" content="分享的标题1">
 <meta name="description" itemprop="description" content="我是描述3">
 <meta itemprop="image" content="url">

<script>    mqq.data.setShareInfo({        share_url: window.location.href,        title: '分享的标题zidingyi',        desc : '分享的描述zidingyi',        image_url : 'image_url'    }, function () {        // 成功回调函数    })</script>