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

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

前言&＃xff1a;最近做了一款推广茶的APP软件&＃xff0c;展厅、产品需要分享功能&＃xff1b;从APP内分享到H5网页&＃xff1b;微信内打开H5网页&＃xff0c;点击微信内右上角三个点&＃xff0c;可再次分享&＃xff1b;
注意&＃xff1a;大多数情况下&＃xff0c;点击右上角三个点&＃xff0c;再次分享后&＃xff0c;缩略图不显示&＃xff0c;需要做特殊处理。
废话结束&＃xff0c;正文开始&＃xff0c;以下页面是在H5页面中执行。
前置条件&＃xff1a;
开发环境&＃xff1a;windows
开发框架&＃xff1a;uni-app , H5&＃43;&＃xff0c;nativeJS
编辑器&＃xff1a;HbuilderX 2.8.13
兼容版本&＃xff1a;安卓&＃xff0c;IOS已作测试
正式进入开发&＃xff1a;

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

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


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


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


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


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


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


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


https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

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