微信H5分享外部链接，缩略图不显示

快来打我* 2022-12-25 15:50 358阅读 0赞

微信公众号酒酒酒搜索 “微信H5分享外部链接，缩略图不显示” 查看原文  
![微信公众号查看原文][2020120216100370.jpg]  
前言：最近做了一款推广茶的APP软件，展厅、产品需要分享功能；从APP内分享到H5网页；微信内打开H5网页，点击微信内右上角三个点，可再次分享；  
注意：大多数情况下，点击右上角三个点，再次分享后，缩略图不显示，需要做特殊处理。  
废话结束，正文开始，以下页面是在H5页面中执行。  
前置条件：  
开发环境：windows  
开发框架：uni-app , H5+，nativeJS  
编辑器：HbuilderX 2.8.13  
兼容版本：安卓，IOS已作测试  
正式进入开发：

1.  首先引入微信JS-SDK  
    1.1 在项目的跟目录下执行npm代码：npm install jweixin-module --save  
    1.2 之后在main.js 里面导入JS-SDK文件,代码如下

// main.js
    import Vue from 'vue'
    import App from './App'
    // 导入微信js-sdk
    import wx from "jweixin-module";
    // 挂载到Vue原型上
    Vue.prototype.$wx=wx;

1.  在需要进行再次分享的h5页面做如下代码处理；  
    在vue的data函数中给wx.config()一个初始化的配置项

// 在vue的data函数
    data() { 
      return { 
        wxConfig:{ 
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '', // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp:'' , // 必填，生成签名的时间戳
            nonceStr: '', // 必填，生成签名的随机串
            signature: '',// 必填，签名，见附录1
            // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            jsApiList: [
              "updateAppMessageShareData",
              "updateTimelineShareData",
              "onMenuShareTimeline",
              "onMenuShareAppMessage"
            ] 
          }
      }
    }

1.  像后端人员请求 wx.config 配置项，timestamp前端人员可自己获取，也可以从后端返回  
    3.1 前端人员通过window.location.href获取当前页面路径，传递给后端返回配置信息

// 获取微信SDK配置信息（此方法在uni-app的onLoad里面调用）
    getWxConfigInfo(){ 
      let that=this;
      // 获取当前页面路径
      let url=window.location.href;
      // 发起请求，向后端人员wx.config配置项
      that.$http.post('Wx/getsignpackage', { url:url}, { 
        'load': false
      }).then(function(response) { 
        // console.log("获取接口微信配置信息",response.data);
        let data=response.data;
        // 配置wxConfig配置项
        that.wxConfig["appId"]=data.appId;
        that.wxConfig["nonceStr"]=data.nonceStr;
        that.wxConfig["signature"]=data.signature;
        that.wxConfig["timestamp"]=data.timestamp;
        // 监听微信分享
        that.wxShare();
      })
    }

1.  处理H5网页在微信内二次分享就，点击右上角三个点，监听分享到朋友圈/微信好友事件

// 监听微信分享
    wxShare(){ 
      let that=this;
      //that.$wx 必须执行过步骤一的操作
      let wx=that.$wx;
      // 获取当前域名地址
      let href=window.location.href;
      // 配置签名wx.config属性
      wx.config(this.wxConfig);
      // 发生错误触发
      wx.error(function(res){ 
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      });
      // 接口校验成功触发
      wx.ready(function(){ 
        // 判断当前客户端版本是否支持指定JS接口
        wx.checkJsApi({ 
          // 需要检测的JS接口列表
          jsApiList: [  
          "updateAppMessageShareData",
          "updateTimelineShareData",
          "onMenuShareTimeline",
          "onMenuShareAppMessage"
          ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
          success: function(res) { 
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            // console.log("检测接口是否可用=================",res);
          },
          fail(err){ 
            // console.log("检测接口是否错误=================",err);
          }
        });
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        //需在用户可能点击分享按钮前就先调用(自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）)
        wx.updateTimelineShareData({  
          title:"标题" , // 分享标题
          link: "", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: "", // 分享图标,必须是https网络路径,不能大于20kb
          success: function () { 
            // 设置成功
            // uni.showToast({ 
            // title:"分享成功",
            // icon:"none"
            // })
          }
        })
        // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
        wx.updateAppMessageShareData({ 
          title: "标题", // 分享标题
          desc: "分享描述" , // 分享描述
          link:href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: "", // 分享图标，必须是https网络路径,不能大于20kb
          success: function () { 
            // 设置成功
          }
        })
      });
    }

https://developers.weixin.qq.com/doc/offiaccount/OA\_Web\_Apps/JS-SDK.html

1.  微信公众号需要配置js安全域名白名单，ip白名单
2.  缩略图必须是https网络路径，不能大于20kb，否则在安卓机h5分享的时候，缩略图不显示
3.  配置项 wx.config 里面的数据尽量从后端获取；传递当前页面的全路径,包含页面中的参数，传给给后端人员，生成配置项；  
    例如：http://www.u.net/h5?id=1
4.  或者可以传递当前页面的域名地址，域名地址末尾处加上"/"  
    例如：http://www.u.net/  
    笔者向后端传递的是注意事项第三点：当前页面的全路径，至于是注意事项第四点，未作测试，感兴趣的可以尝试一下。

[2020120216100370.jpg]: /images/20221120/5564ca70d8dc4852b7e15786377363f8.png