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

微信公众号酒酒酒搜索 “微信H5分享外部链接，缩略图不显示” 查看原文

前言：最近做了一款推广茶的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;


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