微信JSSDK分享缩略图片在IOS中不显示的问题--已解决
说明:项目前端框架vue,解决问题:微信JSSDK分享缩略图片在IOS中不显示,在安卓中显示正常。1.在基本配置中,获取AppID,并配置IP白名单2.设置js接口安全域名(坑一!!!遇到的第一个坑就是只配置了业务域名,以及网页授权域名,没有配置JS接口安全域名,导致前端一直报错invalid signature)3.安装微信sdk安装npm install weixin-js...
·
说明:项目前端框架vue,
解决问题:微信JSSDK分享缩略图片在IOS中不显示,在安卓中显示正常。
1.在基本配置中,获取AppID,并配置IP白名单
2.设置js接口安全域名
(坑一!!!遇到的第一个坑就是只配置了业务域名,以及网页授权域名,没有配置JS接口安全域名,导致前端一直报错invalid signature)
3.安装微信sdk
- 安装
npm install weixin-js-sdk
- 引用,在index.html中
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript">
4.上代码
以下操作都在App.vue中完成
- 获取wx.config的配置参数,从后台获取
- 配置wx.config,并调用方法
//在create中调用此方法
getConfigParam(){
ajaxSubmit(
this.$http,
getConfigParam,
"get",
{ url:location.href.split('#')[0]},
resData => {
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: _AppID, // 必填,公众号的唯一标识
timestamp:resData.data.timestamp , // 必填,生成签名的时间戳
nonceStr: resData.data.noncestr , // 必填,生成签名的随机串
signature: resData.data.signature ,// 必填,签名
jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填,需要使用的JS接口列表
});
wx.error(function(res){
console.log(res)
});
wx.ready(function(){
var shareTitle="***"
var shareDesc="***************************************"
var shareLink=_localBaseUrl+"login"
var shareImg="################"
wx.onMenuShareAppMessage({
title: shareTitle, // 分享标题
desc: shareDesc, // 分享描述
link: shareLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl:shareImg, // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户点击了分享后执行的回调函数
}
});
wx.onMenuShareTimeline({
title: shareTitle, // 分享标题
link:shareLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl:shareImg, // 分享图标
success: function () {
},
});
})
}
)
}
需要注意的地方:
关于微信config:invalid signature:
- 配置JS接口安全域名
- 确认url是页面完整的url(请在当前页面alert(location.href.split(’#’)[0])确认),包括’http(s)?/‘部分,以及’?‘后面的GET参数部分,但不包括’#'hash后面的部分。
- 确认签名算法正确,可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
微信JSSDK分享缩略图片
- 分享缩略图imgUrl不支持相对位置(例如:"…/…/…/static/images/share_img.jpg"),只支持绝对位置(“http://www.baidu.com/static/images/share_img.jpg”)
- 分享缩略图片在IOS中不显示,但是在安卓中显示没有问题。官方给出原因是:在iOS微信6.1版本中,分享的图片外链不显示,只能显示公众号页面内链的图片或者微信服务器的图片(微信团队已经确认此问题,会在6.2中修复)
但是我也不知道为什么在7.0以上版本的微信依旧存在这个问题,
我的解决方法:
将图片上传到微信公众号,然后把上传后图片地址考出来放进代码imgUrl
好啦,以上就是我的一个小方法,希望对大家有帮助!
更多推荐
已为社区贡献3条内容
所有评论(0)