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

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

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

首先引入微信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;

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


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

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

处理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网络路径,不能大于20kbsuccess: function () {// 设置成功// uni.showToast({//   title:"分享成功",//   icon:"none"// })}})// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）wx.updateAppMessageShareData({title: "标题", // 分享标题desc: "分享描述" , // 分享描述link:href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: "", // 分享图标，必须是https网络路径,不能大于20kbsuccess: function () {// 设置成功}})});
}

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

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

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

微信分享网页链接缩略图不显示解决方法
微信分享网页链接缩略图不显示解决方法参考文章: (1)微信分享网页链接缩略图不显示解决方法 (2)https://www.cnblogs.com/68xi/p/11596254.html 备忘一下.
html页面微信分享如何隐藏链接,微信分享网页链接缩略图不显示解决方法
微信分享网页不显示缩略图片的原因为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK"分享到朋友圈"及"发送给朋友"接口,自定义的分享 ...
微信h5分享好友和朋友圈功能
在开发公众号H5项目时,如果想和小程序一样有分享朋友圈和好友功能时发现会不一样. 开发微信小程序时做分享有会有onShareAppMessage 这个方法.因为H5有许多限制,所以在做微信H5分享时就 ...
微信H5分享接口问题（避开99%坑）
记录一下微信H5分享接口问题(一次性跳出99%的坑)-小叶白龙博客这个是官方分享接口地址:概述 | 微信开放文档微信 JS 接口签名校验工具:微信 JS 接口签名校验工具 1,按文档第一步到第四步 ...
微信html5推广,制作微信H5漂亮推广链接网站大收集，很多伙伴都收藏了
原标题:制作微信H5漂亮推广链接网站大收集,很多伙伴都收藏了微信朋友圈刷了无数遍相信很多小伙伴们都看过朋友圈那些漂亮绚丽的H5链接吧那么很多人会问那是怎样制作的也许很多小伙伴都会制作但是很 ...
微信自定义分享卡片链接的解决方案（可自定义标题描述图片）
微信自定义分享卡片链接的解决方案(可自定义标题描述图片) 参考文章: (1)微信自定义分享卡片链接的解决方案(可自定义标题描述图片) (2)https://www.cnblogs.com/rg ...
微信分享到朋友圈的链接，内容打开正常,但在微信中分享时封面缩略图图像和标题显示不出来？
1.如果你是使用sdk分享到微信会话图片显示不出来,解决代码如下: Bitmap bmp = bitmap;WXImageObject imgObj = new WXImageObject(bmp); ...
微信分享到朋友圈的链接，内容打开正常,但在微信中分享时封面缩略图图像和标题显示不出来？...
如果你是使用sdk分享到微信会话图片显示不出来,解决代码如下: Bitmap bmp = bitmap;WXImageObject imgObj = new WXImageObject(bmp);WX ...
uniapp - 微信H5 分享微信朋友圈展示链接，不是缩略图卡片的原因与解决方案
问题: 在分享页面点了分享朋友圈,就会只展示链接前置条件 : 1. 微信公众号已经配置完域名并且已完成微信认证 / appId 也没有问题的情况下原因 : 微信开放全域名访问后出现的限制解决办 ...

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

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

最新文章

热门文章