Vue H5微信分享添加图片 标题 描述

最近公司新加了个需求说个人H5分享在微信里太难看了（没图片 描述是连接，标题是网页默认title），并且和别人家的不同。而后我去看了一下别人家的果真别人家的网页分享出来和手机app分享出来的同样（以前作ios开发，公司须要就学习了一下H5）。因而我就去找了微信官方文档。

通常的H5网页分享不能自定义标题 图片的缘由。

在微信里不是全部的网页均可以按照微信友好的分享形式分享的，对于通常的网页来讲（如非被微信屏蔽掉）是能够分享传播的，但仅限于分享转发（就是默认的没图片 默认标题 连接显示）

若是想要更好看，自定义标题 图片 描述，能够。必需要微信认证过，加到本身的白名单里就能够了 说白点就是要掏钱购买公众号，在公众号里绑定Js安全域名。

首先 咱们须要一个公众号（必须是通过认证的，没有认证的或者认证过时的都不能够），还要有备案过的域名（必须是备案过的，否则是没法使用的）

1 绑定域名

先登陆微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登陆后可在“开发者中心”查看对应的接口权限

2 引入js文件

在须要调用JS接口的页面引入以下JS文件，（支持https）：res.wx.qq.com/open/js/jwe…

若是是和我同样是Vue的在 index.html 文件中的引入

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
复制代码

3 经过config接口注入权限验证配置

全部须要使用JS-SDK的页面必须先注入配置信息，不然将没法调用 (同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用）

也就是说若是你所分享的是多页面的而且都想让别人从H5 入口页面进入那么你只须要进入时配置一次信息就能够了，并不须要每一个页面配置一次.

1 首先你须要从后台获取分享配置信息

你须要上传你要分享的的网页连接的 # 之前的 对当前页面连接以# 切割获取# 之前部分进行编码（后台须要相应的解码）

var localUrl = encodeURIComponent(location.href.split('#')[0])
复制代码

而后传给后台获取配置信息。（由于签名是根据你当前的分享连接 和时间戳生成的），其实这样咱们分享出去的连接是被微信加过签名参数的连接，和咱们看的连接有点不同了

httpGet('xforh5/service/sys/wechat/js/config?url=' + localUrl, {}).then(response => {
 
 //在这里获取到配置信息 进行配置
 }
复制代码

获取回来的配置信息

{ "status": 0, "result": { "appId": "wx9e3d362372762cc1", "timestamp": 1563269390, "nonStr": "u1n8BylqEcBBlkZ7", "signature": "72a46eac7b1505e51b148b0949f1f8e90e5ef9ab" } }

获取到配置信息后就已完成大半了，接下来就要用的引入的微信 JS Api

wx.config({

})

wx.config({
            debug: false, //默认为false 为true的时候是调试模式，开启调试模式,调用的全部api的返回值会在客户端alert出
            appId: appId,//必填，公众号的惟一标识
            timestamp: timestamp,// 必填，生成签名的时间戳
            nonceStr: nonStr,// 必填，生成签名的随机串
            signature: signature,// 必填，签名
            // 必填，须要使用的JS接口列表
            jsApiList: [
              'checkJsApi',
              'onMenuShareTimeline',
              'onMenuShareAppMessage',
              'onMenuShareQQ',
              'onMenuShareWeibo',
              'onMenuShareQZone',
              'updateAppMessageShareData',
              'updateTimelineShareData',
            ],
          });
复制代码

须要的JS接口列表 根据公司分享须要选择接口

wx.ready(function () {

}) 上面 config信息验证后会执行ready方法，全部接口调用都必须在config接口得到结果以后，config是一个客户端的异步操做，因此若是须要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则能够直接调用，不须要放在ready函数中。

wx.ready(function () {
            wx.onMenuShareAppMessage(window.share_config.share); // 微信好友
            wx.onMenuShareTimeline(window.share_config.share); // 微信朋友圈
            wx.onMenuShareQQ(window.share_config.share); // QQ
            wx.updateAppMessageShareData(window.share_config.share);
              wx.updateTimelineShareData(window.share_config.share);
          });
复制代码

window.share_config.share 挂载的分享的配置信息

//配置自定义分享内容 window.share_config = { share: { title: 自定义标题, // 这是分享展现卡片的标题 desc: 自定义描述, // 这是分享展现的摘要 link: 要分享的连接, // 这里是分享的网址 imgUrl: 右下角显示图标, // 这里是须要展现的图标 success: function (rr) { 分享成功回调 能够在这儿加 alert 打印 便于调试 console.log('成功' + JSON.stringify(rr)) }, cancel: function (tt) { 分享失败回调 能够在这儿加 alert 打印 便于调试 console.log('失败' + JSON.stringify(tt)); } } };

wx.error(function (res) {

}) 在error 函数中可获取的错误信息，尤为是配置信息的错误，由于须要先配置配置信息而后微信验证，验证经过后再调用 wx.ready() 里的分享配置信息（其实验证不经过也会走 应该是异步的）

因此在这里看错误信息很重要 能够加 alert 固然若是是调试模式它本身也会跳出alert 提示

注意

发生错误信息检查 1 公众号 appid是否绑对了 2 安全域名是否改了 3 就是取配置信息的时候是否取到而且上传对了（我就是觉得对着api字段就没事儿，结果有个字段和后台传过来的不一致而后一直配置信息失败 提示 invalid signature）

最后附上完整分享函数 只须要在你获取到须要分享的必要信息在调用（记得修改里面的参数）

share() {

        //对url 进行编码

        var localUrl = encodeURIComponent(location.href.split('#')[0]);//
        // //url传到后台的格式
        // var url = 'URL=' + localUrl;
        // //这几个参数都是后台从微信公众平台获取到的
        // var nonceStr,signature,timestamp,appId,shareUrl;
        //+ this.$route.query.viewid

        let currentUrl = location.href

        httpGet('xforh5/service/sys/wechat/js/config?url=' + localUrl, {}).then(response => {

          const {appId, nonStr, signature, timestamp} = response.result
          //经过微信config接口注入配置
          wx.config({
            debug: false, //默认为false 为true的时候是调试模式，会打印出日志
            appId: appId,
            timestamp: timestamp,
            nonceStr: nonStr,
            signature: signature,
            jsApiList: [
              'checkJsApi',
              'onMenuShareTimeline',
              'onMenuShareAppMessage',
              'onMenuShareQQ',
              'onMenuShareWeibo',
              'onMenuShareQZone',
              'updateAppMessageShareData',
              'updateTimelineShareData',
            ],
          });

          //配置自定义分享内容
          window.share_config = {
            share: {

              title:  `自定义标题`, // 这是分享展现卡片的标题
              desc: `自定义描述`, // 这是分享展现的摘要
              link: `要分享的连接`, // 这里是分享的网址
              imgUrl: `右下角显示图标`, // 这里是须要展现的图标
              success: function (rr) {
             ` 分享成功回调 能够在这儿加 alert 打印 便于调试`
                console.log('成功' + JSON.stringify(rr))
              },
              cancel: function (tt) {
              ` 分享失败回调 能够在这儿加 alert 打印 便于调试`
                console.log('失败' + JSON.stringify(tt));
              }
            }
          };

          // config
          wx.ready(function () {
            wx.onMenuShareAppMessage(window.share_config.share); // 微信好友
            wx.onMenuShareTimeline(window.share_config.share); // 微信朋友圈
            wx.onMenuShareQQ(window.share_config.share); // QQ
            wx.updateAppMessageShareData(window.share_config.share);
              wx.updateTimelineShareData(window.share_config.share);
          });
          wx.error(function (res) {

          });
        });
      }
复制代码