前端 微信二次分享

前端 微信二次分享

一、问题如下：
从秀健身APP分享到微信、qq、微博等时，表现形式像名片一样，有标题 描述 图片，此时打开链接查看 内容，再次点击分享按钮，分享后的名片丢失描述及图片

二、解决方案
使用微信公众号jssdk自定义分享
1.首先引入微信jssdk =》 向下兼容

           <script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script>
           <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js "></script>

2.绑定域名 ，先登录 微信公众平台 进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，可以按照提示进行填写，最多填写三个。

3. 为了保证数据安全性，需要从后台支持接口，获取配置信息
创建一个js文件，发送ajax请求将浏览器分享的地址（window.location.href.split("#")[0]）发送到后台获取公众号时间戳以及签名等信息并使用微信ready函数自定义分享标题描述以及logo

在接口请求成功后， config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，
所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中 如下图可将描述信息当做参数传到需要分享的接口中，可写死也可动态获取

备注： 微信在分享朋友时会添加一些参数，所以需要做一些处理，否则分享失败

wx.js

	$(function () {
    var url;
    var urls;
    // 获取本页面连接， 生成签名需要
    if (window.location.href.indexOf('from') != -1 || window.location.href.indexOf('isappinstalled') != -1) {
        // 二次分享url重定向 - 需要截取一次分享后微信自动拼接的url参数&from=singlemessage&isappinstalled=0
        urls = window.location.href.split('from')[0]; // 这里的split中的字符串会变换（?或&），主要看自己的url
        urls = urls.substr(0, urls.length - 1).split('#')[0]; // 这里的split中的字符串会变换（?或&），主要看自己的url
    } else {
        urls = window.location.href.split('#')[0]; // 这里的split中的字符串会变换（?或&），主要看自己的url
    }

    url = window.location.href.split('#')[0]; // 这里的split中的字符串会变换（?或&），主要看自己的url

    $.ajax({
        url: "/contest/share/getWxConfig?url=" + encodeURIComponent(url), //你获取签名的接口 
        type: "GET",
        async: false,
        cache: false,
        dataType: "json",
        success: function (data) {
            if (data.code === 0) {
                wx.config({
                    debug: false,//调试模式 
                    appId: data.data.appId,// 必填，公众号的唯一标识
                    timestamp: data.data.timestamp,// 必填，生成签名的时间戳
                    nonceStr: data.data.nonceStr,// 必填，生成签名的随机串
                    signature: data.data.signature,// 必填，签名，见附录1
                    jsApiList: [ // 必填，需要使用的JS接口列表
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo',
                        'onMenuShareQZone'
                    ]
                });
            }
        },
        error: function (s) {
            return;
        }
    });

    wx.ready(function () {
        var shareDatas = {};
        if (configShare) {
            shareDatas.title = configShare.title;
            shareDatas.desc = configShare.content;
            shareDatas.link = urls;
            shareDatas.imgUrl = configShare.logUrl;
        }
        wx.onMenuShareTimeline(shareDatas);  // 朋友圈
        wx.onMenuShareAppMessage(shareDatas); // 朋友
        wx.onMenuShareQQ(shareDatas); // QQ
        wx.onMenuShareWeibo(shareDatas); // 微博
        wx.onMenuShareQZone(shareDatas); // QQ 空间
    });
    wx.error(function (res) { });
});