最近一个项目原来好好的微信分享突然就不行了,分享到朋友圈没有了文章里的缩略图,而且链接地址也变成了项目入口地址,原先这项目也不是我写的,但是没办法有活就要干,有问题就要解决嘛。
网上找了很多资料都是说在页面头部放一个隐藏的img,大小300*300px以上的图,试过了,没有任何卵用,后来总算找到一篇靠谱的博文 :http://www.cnblogs.com/lijianfu99/p/6934187.html 不能分享的原因是微信升级之后提高了安全性,对于没有接入公众号的网页分享,必须接入微信认证公众号,具体看https://mp.weixin.qq.com/s/hAdtKl2i4ilyo9HxT1kXyw
有了前人指路一切都轻松很多,主要就是用JSSDK来自定义缩略图及自定义链接,可直接参考官方手册
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
首先你要确保公众号相关设置:先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。这里要说一下公众号必须是微信认证过的,并且接口权限也必须有,绑定的安全域名就是你项目的域名。
接下来就是如何在tp5框架里引用JSSDK的问题了,我这里的顺序跟手册上写的不一样,但是更便于理解,要使用微信的接口,必定要先获取你自己公众号的一些基本信息,所以这一步就是通过微信提供的JSSDK(http://demo.open.weixin.qq.com/jssdk/sample.zip)来获取接口调用所需的参数。
将下载好的jssdk.php文件放在框架的extend或者项目的公共类库,个人比较喜欢放在common模块下面,然后在项目的主控制器或者基控制器(所有控制器继承的父控制器),调用方法也可参考下载下来的sample.php的原生php写法,很简单,我贴一下自己的代码:
如果采用框架别忘记命名空间,不然读取不到类的
//微信jssdk的Config参数生成
$jssdk = new JSSDK("你自己的appId", "你自己的appSecret");
$signPackage = $jssdk->GetSignPackage();//应该是getSignPackage,但是demo里这么调用好像也可以
$this->assign('wxJsApiParam',$signPackage);//将JSSDK拼接的签名包赋值到模板
接下来就是在项目里调用API了
首先要引入js,http://res.wx.qq.com/open/js/jweixin-1.2.0.js(简书编辑器不支持js脚本标签,哈哈哈,防止sql注入,做得有点过)
然后就是 通过config接口注入权限验证配置,微信手册也有。我贴一下我的代码:
wx.config({
debug: false,
appId: '{$wxJsApiParam.appId}',
timestamp: {$wxJsApiParam.timestamp},
nonceStr: '{$wxJsApiParam.nonceStr}',
signature: '{$wxJsApiParam.signature}',
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
]
});
这个不难理解,就是把刚刚后台赋值的数据读取到权限验证配置当中,最后一个jsApiList是定义接口列表,onMenuShareTimeline和onMenuShareAppMessage可在手册里看到是分享到朋友圈和分享给朋友的接口,当然你也可以添加其他的接口,具体看手册吧https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
下面是我的这两个接口的定义:
var shareIconUrl = $('#shareWxImg img').attr('src');
wx.ready(function () {
wx.onMenuShareTimeline({
title: '{$data["CompanyInfo"]["Ui_Name"]}',
link: '{$wxJsApiParam.url}',
imgUrl: shareIconUrl,
success: function () {
//分享成功回调函数
},
cancel: function () {
// 取消分享回调函数
}
});
wx.onMenuShareAppMessage({
title: '{$data["CompanyInfo"]["Ui_Name"]}', // 分享标题
desc: '{:mb_substr($data["CompanyInfo"]["U_PType"],0,50)}', // 分享描述
link: '{$wxJsApiParam.url}', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareIconUrl, // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
里面的数据替换成自己的站点信息即可
然后就是测试环节了,因为之前很少做微信相关的开发,都不知道微信已经出了微信调试工具了,感谢之前那篇博客的作者指导,下载地址:https://mp.weixin.qq.com/debug/cgi-bin/webdebugger/download?from=mpwiki&os=x64,安装成功后可以直接在里面测试,都不需要打开手机,很是方便
这是jssdk配置成功的测试结果,如果成功了,你可以看到分享之后的效果了(ios缩略图有点问题,安卓一切正常,如果有大神知道ios上怎么解决,请在留言区赐教)
用之前那个博主的代码测试有点问题,后来还是选择了官方手册文档上的方法,不过还是谢谢他的指导