【bug解决】微信分享网址后显示标题、描述和logo图片

微信分享，指的是打开一个链接后，点击右上角分享给朋友/分享到朋友圈后等方式...

今天，我们想要实现的是分享出去后（这里我们讲分析给好用），会显示标题、描述以及logo图片。

【一】效果实现

原始效果：

理想效果：

首先，我们在html中的head中设置标题、描述以及logo：

<title>这是标题</title>
<meta name="description" content="这是内容">
<link rel="icon" href="./src/img/logo.jpg" type="image/x-icon">
<link rel="shortcut icon" href="./src/img/logo.jpg" type="image/x-icon">

但是发现，这样设置后，只有title显示出来了，描述显示的是网址，logo则不显示。

然后紧接着我使用了百度的很多方法，比如body最上方设置300*300px的图片等等方法...

都不管用。。。

直到最后，我找到了一个文档中说到：

微信升级改版后，要想自定义微信分享效果的话（自定义缩略图，标题，摘要），必须要调用微信自带的JS-SDK，那怎么使用呢？

官方文档如下：

微信官方文档

【步骤】

1、查看AppId、AppSecret

2、绑定域名

注意：H5页面所在的域名下，还要记得下载txt文件到该域名根目录下。

举例说明：

H5所在文件路径为：www.test.com/h5/index.html，那么你需要在公众号上绑定域名：www.test.com（不能添加http/https协议前缀），并将txt文件下载至根目录下。

3、引入js文件

在webpack中，要通过AMD/CMD的方式模块化加载js文件：

》》》和swiper-animate一样，不支持模块化，所以要借助script-loader使用。在全局上下文中执行一次JS脚本。

（1）下载script-loader

cnpm i script-loader -D

（2）然后，有两种用法：

方式一：配置webpack.config.js用法

// webpack.config.js
...
module: {
　　rules: [
　　　　{
　　　　　　test: /.exec.js$/,
　　　　　　use: ['script-loader']
　　　　}
　　　　...
　　]
}

// main.js
import exec from 'script.exec.js'

方式二：内联用法

import exec from 'script-loader!./script.js'

上述例子的截图我们用的就是第二种内联写法。

具体使用可查看官方文档：https://www.webpackjs.com/loaders/script-loader/

》》》注意补充：在vue中，也可以不使用上述方法，具体查看博文：【vue】vue中如何使用微信SDK调用...

4、通过config接口注入权限验证配置：

wx.config({
　　debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
　　appId: '', // 必填，公众号的唯一标识
　　timestamp: , // 必填，生成签名的时间戳
　　nonceStr: '', // 必填，生成签名的随机串
　　signature: '',// 必填，签名
　　jsApiList: [] // 必填，需要使用的JS接口列表
});

5、通过ready接口处理成功验证：

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

6、分享接口：

然后，我们将其整个到一起，完整js代码如下：

import logo from '../src/img/logo.jpg';
import 'script-loader!./wx'；
import axios from 'axios'

const link = window.location.href; // 动态获取当前页的link链接

function successFun(data) {
    data = data.data;
    var app_id = data.app_id;
    var timestamp = data.timestamp;
    var noncestr = data.noncestr;
    var signature = data.signature;
    wx.config({
        debug: false,
        appId: app_id,
        timestamp: timestamp,
        nonceStr: noncestr,
        signature: signature,
        // jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone'], 
　　　　 // JSSDK 1.4.0以上版本
　　　　 jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
    });

    wx.ready(function () {
        var shareData = {
            title: '标题', //分享标题 
            desc: '描述', // 分享描述  
            link: link, // 分享链接 这里填写动态获取的或者写固定的都有可以
            imgUrl: logo, //分享图片 补充：这里也需要注意路径 实在安全起见的话可以使用绝对路径
            success: function () {
                return false;
            },
            cancel: function () {
                return false;
            }
        };

        // 分享给朋友
        // wx.onMenuShareAppMessage(shareData);
        // 分享到朋友圈
        // wx.onMenuShareTimeline(shareData);
        // 分享给QQ好友
        // wx.onMenuShareQQ(shareData);
        // 分享到QQ空间
        // wx.onMenuShareQZone(shareData);

　　　　 // JSSDK 1.4.0以上版本
　　　　 // 分享给朋友及分享到QQ
　　　　 wx.updateAppMessageShareData(shareData);
　　　　 // 分享到朋友圈及分享到QQ空间
　　　　 wx.updateTimelineShareData(shareData);
    })
}

　axios.get('./wx_api/api.php', { // 这里需要注意路径

　　params: {

　　　url: link

}

}).then(successFun)



// 这里是将动态获取的url链接传给后台 后台进行接收 注意 这很重要！！！下面会说到原因

在测试过程中间，发现当我们从一级链接比如http://www.hhh.com进去，然后分享到微信后，是显示标题描述和logo图片的，但是点击这个分享进去再分享出来后，就不显示了，我们发现这两次分享出来的链接是不一样的，第一次是原始链接，第二次带有分享参数，这个参数是微信自动添加的。所以，后端php中间的链接一定要是动态的。详细说明如下：