美文网首页
微信二次分享卡片

微信二次分享卡片

作者: 奔跑的兔子_ | 来源:发表于2018-11-08 21:32 被阅读0次

二次分享:即分享之后再次分享的卡片

微信官方api:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

以下是我在vue中的应用

import axios from 'axios';
var url = ???//自己公司的生成签名地址,不方便透露啦
export default (options) => {
    axios
    .get(url)
    .then(function (res) {
        if (res.data.no !== 0) {
            return;
        }
        let data = res.data.data;
        window.wx.config({
            debug: false,
            appId: data.appId, // 必填,公众号的唯一标识
            timestamp: data.timestamp, // 必填,生成签名的时间戳
            nonceStr: data.nonceStr, // 必填,生成签名的随机串
            signature: data.signature, // 必填,签名,见附录1
            jsApiList: [
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareQZone',
                'onMenuShareWeibo'
            ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
        });
        window.wx.ready(function () {
            let title = options.title;
            let link = options.url;
            let desc = options.desc;
            let imgUrl = options.imgUrl || 'http:' + __uri('../../img/common/logo.png');
            let successCallback = function() {};

            window.wx.onMenuShareTimeline({
                title: title,
                link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: imgUrl,
                success: successCallback
            });
            window.wx.onMenuShareAppMessage({
                title: title,
                desc: desc, // 分享描述
                link: link,
                imgUrl: imgUrl,
                type: '', // 分享类型,music、video或link,不填默认为link
                success: successCallback
            });
            window.wx.onMenuShareQQ({
                title: title,
                desc: desc, // 分享描述
                link: link,
                imgUrl: imgUrl,
                success: successCallback
            });
            window.wx.onMenuShareQZone({
                title: title,
                desc: desc,
                link: link,
                imgUrl: imgUrl,
                success: successCallback
            });
            window.wx.onMenuShareWeibo({
                title: title,
                desc: desc,
                link: link,
                imgUrl: imgUrl,
                success: successCallback
            });
        });
        window.wx.error(function (err) {
            console.log('error',err);
        });
    });
};

用法:

在index.html引入

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

在相关vue引入

import wxshare from '@/assets/js/wxshare/wxshare.js'

调用接口

wxshare({
    title: 'title',
    link: 'href',
    desc: '描述', 
    imgUrl: 'imgurl'
});

相关文章

网友评论

      本文标题:微信二次分享卡片

      本文链接:https://www.haomeiwen.com/subject/dbegxqtx.html