微信公众号开发之H5分享SDK接入
pureChilder 2017-08-12
之前一直碰到微信里消息里的文章或链接分享到朋友圈或微信好友后，链接的图标和标题都不是想要的(自定义)；后来研究了一下微信公众号相关的SDK接入demo；微信在6.5之前的版本好像是微信自己抓取链接或文章的标题/图片(貌似是300*300)，但是在6.5版本之后微信变得恶心了需要接入他的分享接口(SDK)，效果如下：
接入微信分享SDK，可以将这四个参数自定义显示：标题，链接，描述，图标，都可以达到自定义的效果。
实现如下：
1.进入微信公众号取到你的yourAppID，yourAppSecret
2.下载微信分享SDK(见博客下方)；
3.项目中引入SDK(我的项目是thinkphp框架)；
3.1因为很多H5需要进行分享，所以通过yourAppID，yourAppSecret获取微信配置信息放入基础控制器类方便供任何被继承的类使用：
//微信分享--获取机密配置信息 ======PHP代码部分=======
protected function getWxShareConfig(){
$signPackage = array();
require THINK_PATH.'Extend/Wxsharesdk/jssdk.php'; //我的SDK放在ThinkPHP/Extend目录下
$jssdk = new JSSDK($this->_wxshare_Appid, $this->_wxshare_AppSecret);
//填写开发者中心你的开发者ID
$signPackage = $jssdk->GetSignPackage();
return $signPackage;
}
//需要分享的控制器类赋值
public function __construct() {
parent::__construct();
$wxShareConfig = $this->getWxShareConfig();
$this->assign("signPackage",$wxShareConfig);
}
3.2 //微信分享=======javascript代码部分=======
在需要调用JS接口的页面引入如下JS文件，（支持https）http://res.wx.qq.com/open/js/jweixin-1.2.0.js 建议将次js代码另存到自己项目的js
<script type="text/javascript" src="/Public/js/jweixin-1.2.0.js"></script>
<script>
wx.config({
debug: false, //调式模式，设置为ture后会直接在网页上弹出调试信息，用于排查问题
appId: '{$signPackage["appId"]}', // 建议后台传出，避免敏感信息泄露
timestamp: '{$signPackage["timestamp"]}',
nonceStr: '{$signPackage["nonceStr"]}',
signature: '{$signPackage["signature"]}',
jsApiList: [ //需要使用的网页服务接口
'checkJsApi', //判断当前客户端版本是否支持指定JS接口
'onMenuShareTimeline', //分享到朋友圈
'onMenuShareAppMessage', //分享给好友
'onMenuShareQQ', //分享到QQ
'onMenuShareQZone' //分享到qq空间
]
});
var share_title = '{$share["title"]}'; //分享的标题
var share_link = '{$share["link"]}'; //分享的链接
var share_imgUrl = '{$share["imgUrl"]}'; //分享的图片地址
wx.ready(function () { //ready函数用于调用API，如果你的网页在加载后就需要自定义分享和回调功能，需要在此调用分享函数。//如果是微信游戏结束后，需要点击按钮触发得到分值后分享，这里就不需要调用API了，可以在按钮上绑定事件直接调用。因此，微信游戏由于大多需要用户先触发获取分值，此处请不要填写如下所示的分享API
wx.onMenuShareTimeline({ //例如分享到朋友圈的API
title: share_title, // 分享标题
link: share_link, // 分享链接
imgUrl: share_imgUrl, // 分享图标-
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareAppMessage({ //分享给好友
title: share_title, // 分享标题
link: share_link, // 分享链接
imgUrl: share_imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareQQ({ //分享到QQ
title: share_title, // 分享标题
link: share_link, // 分享链接
imgUrl: share_imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareQZone({ //分享到qq空间
title: share_title, // 分享标题
link: share_link, // 分享链接
imgUrl: share_imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
wx.error(function (res) {
//alert(res.errMsg); //建议关闭错误输出，否则用户体验不太好
});
//大家可以自己试试，蛮好玩的，也不难！！！
