H5微信分享自定义图标和内容（以及二次分享图片丢失的解决办法）

只列前端需要做的工作

一、需配置的东西

1、请确认公众号已经认证，只有认证的公众号才具有分享相关接口权限

2、登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。(需要调用微信接口的h5域名)

3、在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

4、配置IP白名单，基本配置-公众号开发信息-IP白名单。(调用后台接口的域名)

二、前端代码

      var title = h5_title;//这里是标题var desc = share_content;//这里是描述var imgUrl = url_img + share_img;//这里是图片$.ajax({url:url_jk+"/html/wxgetjsapi?url=" + link,type: "GET",dataType: "json",success: function (res) {console.log(res);wx.config({debug: false,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: res.appid,// 必填，公众号的唯一标识timestamp: res.timestamp,// 必填，生成签名的时间戳nonceStr: res.nonceStr,// 必填，生成签名的随机串signature: res.signature,// 必填，签名jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage","updateTimelineShareData", "updateAppMessageShareData",]// 必填，需要使用的JS接口列表});wx.ready(function () {//   config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，//  所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。//分享到朋友圈wx.onMenuShareTimeline({title: title,// 分享标题link: link,// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: imgUrl,// 分享图标success: function () {// 设置成功}});//分享给微信好友wx.onMenuShareAppMessage({title: title,desc: desc, // 分享描述link: link,imgUrl: imgUrl,type: "",// 分享类型,music、video或link，不填默认为linkdataUrl: "",// 如果type是music或video，则要提供数据链接，默认为空success: function () {}});// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容wx.updateTimelineShareData({title: title,link: link,imgUrl: imgUrl,success: function () {}});// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容wx.updateAppMessageShareData({title: title,desc: desc,link: link,imgUrl: imgUrl,success: function () {}})})},error: function (res) {// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。console.log("通信失败");}})

三、二次分享图片和自定义的内容丢失的解决办法

问题：从别人分享的链接点进去再分享出来，自定义缩略图和内容丢失

原因：微信在分享的时候，会自动给你的地址后面加入参数，导致你分享的地址改变了，这时候再去用原来的地址获取签名，就不能用了。

后面带上了这一串参数：?from=singlemessage&isappinstalled=0

解决办法：截掉地址后面给你加的那一串参数，重置地址

var link = location.href.split("#")[0];//获取url替换#后面的部分hash值
if(link.indexOf("&")>-1){link = link.substring(0,link.indexOf("&"))window.location.href = link;
}

测试有效！！！

H5微信分享自定义图标和内容（以及二次分享图片丢失的解决办法）相关推荐

我能上网，但是右下角wif图标没了，点开显示无法连接internet解决办法
我能上网,但是右下角wif图标没了,点开显示无法连接internet解决办法今天莫名其妙的发现win10右下角wifi图标没了,但是我已经连上网络了,点开显示无法连接internet 网上也找了很多 ...
android 分享二维码图片到微信QQ（url地址字符串生成二维码图片、分享二维码图片到微信QQ）
主要用到的功能 1.url地址字符串生成二维码图片 2.分享二维码图片到微信QQ 所需的依赖包 implementation 'com.google.zxing:core:3.0.1' 代码 1.将U ...
活动二维码怎么制作？如何将活动内容做成二维码图片？
现在二维码的应用场景越来越多,很多的内容都可以用二维码来展示,比如表单.图片.视频.文字.文件都可以通过制作二维码来分享给他人,那么当遇到举办活动情况时,如何将活动的计划或者菜单做成二维码展示呢?下面 ...
该微信用户未开启“公众号安全助手”的消息接收功能，请先开启后再绑定，Java微信公众号开发消息推送公众号用户绑定问题的解决办法
问题概述在进行微信公众号开发的时候遇到的这个问题,通过Web开发公众号的模板消息推送,在调试的过程中,需要进行开发者接口联调&调试,在调试之前需要将当前的公众号与用户的微信号进行绑定, 绑定 ...
html打印比例缩放,打印内容整体缩小、挤压的原因及解决办法？
打印机打印网页里的内容其行距.字体大小.整体尺寸都缩小了?其实原因很简单,请看本文分享的解决办法(基于lodop打印控件). 打印问题的详情描述用户反馈:电脑打印Word文档.电子表格.打印机测试页 ...
微信辅助验证信息填写正确却提示绑卡信息错误的解决办法
微信帮助别人辅助验证解封帐号,各项信息明明填写正确,但是却提示绑卡信息不对,需要重新填写. 今天被这个问题搞得头痛,经过多次试错终于找到了解决办法: 1.一定要选储蓄卡. 2.先解绑银行卡,再重新绑定 ...
Win10能联网，但右下角网络图标变成小地球，显示无Internet连接的解决办法
症状: 每次路由器重启后,电脑右下角网络图标会变成小地球,显示无Internet连接,但此时的电脑是可以上网.同时,电脑浏览器会自动打开一个微软MSN的网页. 解决办法: 经过测试,发现是无法连接微软 ...
阿里巴巴矢量图标（iconfont）添加后显示不出来的解决办法
问题: 添加阿里巴巴矢量图标(iconfont)后页面内能看到但是显示不出来: 解决办法: 后面发现地址栏是file://文件打开: 这样是不行的,要使用 iconfont 要在本地的服务器打开才能看 ...
微信开发该公众号暂时无法提供服务，请稍候再试解决办法
一.原因 1.网络中断 2.关注和取消过多 3.微信转发url服务器中的web项目异常二.解决办法 1.正常连接网络 2.过一会再试 3.检查web项目,建议预留一个测试过的项目作为检查使用.
VUE vue-devtools 安装成功，但是图标为灰色，且控制台无vue选项的解决办法
今天在学习VUE的过程中,安装了vue-devtools工具,但是发现图标一直是灰色,解决后,记录一下解决办法: 1.查看拓展程序打开开发者模式和插件,如图所示两个开关,具体操作为:点击浏览器右上角 ...

H5微信分享自定义图标和内容（以及二次分享图片丢失的解决办法）

一、需配置的东西

二、前端代码

三、二次分享图片和自定义的内容丢失的解决办法

H5微信分享自定义图标和内容（以及二次分享图片丢失的解决办法）相关推荐

最新文章

热门文章

H5微信分享 自定义图标和内容（以及二次分享图片丢失的解决办法）

一、需配置的东西

二、前端代码

三、二次分享图片和自定义的内容丢失的解决办法

H5微信分享 自定义图标和内容（以及二次分享图片丢失的解决办法）相关推荐

最新文章

热门文章

H5微信分享自定义图标和内容（以及二次分享图片丢失的解决办法）

H5微信分享自定义图标和内容（以及二次分享图片丢失的解决办法）相关推荐