微信H5分享外部链接，缩略图不显示
可关注微信公众号酒酒酒酒查看原文：
前言：最近做了一款推广茶的APP软件，展厅、产品需要分享功能；从APP内分享到H5网页；微信内打开H5网页，点击微信内右上角三个点，可再次分享；
注意：大多数情况下，点击右上角三个点，再次分享后，缩略图不显示，需要做特殊处理。
废话结束，正文开始，以下页面是在H5页面中执行。
前置条件：
-
开发环境：windows
-
开发框架：uni-app , H5+，nativeJS
-
编辑器：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/
笔者向后端传递的是注意事项第三点：当前页面的全路径，至于是注意事项第四点，未作测试，感兴趣的可以尝试一下。
