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

可关注微信公众号酒酒酒酒查看原文：

前言：最近做了一款推广茶的APP软件，展厅、产品需要分享功能；从APP内分享到H5网页；微信内打开H5网页，点击微信内右上角三个点，可再次分享；

注意：大多数情况下，点击右上角三个点，再次分享后，缩略图不显示，需要做特殊处理。

废话结束，正文开始，以下页面是在H5页面中执行。

前置条件：

1. 开发环境：windows

2. 开发框架：uni-app , H5+，nativeJS

3. 编辑器：HbuilderX 2.8.13

4.兼容版本：安卓，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;

2. 在需要进行再次分享的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"
        ]
      }
  }
}

3. 像后端人员请求 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();
  })
}

4. 处理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/

笔者向后端传递的是注意事项第三点：当前页面的全路径，至于是注意事项第四点，未作测试，感兴趣的可以尝试一下。