之前一直碰到微信里消息里的文章或链接分享到朋友圈或微信好友后,链接的图标和标题都不是想要的(自定义);后来研究了一下微信公众号相关的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); //建议关闭错误输出,否则用户体验不太好
});
//大家可以自己试试,蛮好玩的,也不难!!!
相关推荐
本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记。 需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分离模式(vue...
官方文档描述: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62 确认url是页面完整的url(请在当前页面alert(location.href.split(‘#’)[0])确认),包括’http(s):confused_...
最近又在vue中捣鼓了下微信公众号api的接入,不得不说这里边水是真的深啊,上次分享了微信授权登录和js-sdk签名的部分,其中很多朋友私信我表示了疑惑,今天我就再次尝试理顺一下这里边的坑吧: 微信JS-SDK是微信...
8. **微信硬件接入流程**:接入微信硬件通常包括注册应用、获取AppID、设置服务器配置、获取access_token、获取jsapi_ticket、生成签名、在H5页面引入微信JS-SDK等步骤。每个步骤都需要遵循微信官方的文档和规定。 ...
用于记录接入微信JS-SDK的坑,以后方便查询 第一次接入公众号微信支付、分享、定位等等的坑的时候,心里是迷茫而又恐惧。因为,听说坑特别多,后来发现自己的亲身体验到了这一点。 支付的坑 1、当前URL未注册 问题:...
destoon对接微信支付接口,文档介绍了从注册微信商户号到destoon对接微信支付接口,以及微信支付交易查询接口,亲测成功
支付接口的集成是家政预约小程序的关键环节,一般会接入微信支付,用户在选择服务并提交订单后,可以通过小程序内的支付入口进行在线支付,这需要与微信支付SDK进行对接,处理支付状态的回调,确保支付安全。...
有时我们只需要在自己网页中加入个扫一扫并且获取结果的小小功能就行,然而需要操作准备很多还要读难懂的sdk,公众号后台需要各种配置,需要调用微信开发各个接口,最后可能并不会看到效果。 现在我要告诉你,你...
微信硬件平台提供设备直连微信硬件云接入方案,设备可以通过直连SDK直接接入微信硬件服务器,打通设备到云端的通道。在直连方案中,微信硬件平台将提供设备信息管理、绑定关系存储、设备权限管理、设备固件版本控制...
最近的一个公众号是基于vue的spa应用,在接入微信分享和微信语音的时候出现了:在Android上一切正常,但是在ios端调用wx.config的时候总是失败,去翻了官方文档也并没有找到解决方案,最后在测试中发现是因为初始化...
APP支付未完成当面付未完成支持微信支付原生扫码支付已验证 H5支付已验证微信网页,公众号,小程序支付开发完成但有关线上验证 APP支付开发完成但有关线上验证刷卡支付开发完成但有关线上验证认证并发控制交易日志...