I have been encountering articles or links in WeChat messages before and after sharing them to Moments or WeChat friends, the icon and title of the link are not what I want (customized); later I studied the SDK access demo related to WeChat public account; The version of WeChat before 6.5 seems to be that WeChat grabs the title/picture of the link or article by itself (it seems to be 300*300), but after version 6.5, WeChat becomes disgusting and needs to access its sharing interface (SDK), the effect is as follows :
Accessing the WeChat Share SDK, you can customize the display of these four parameters: title, link, description, icon, all of which can achieve custom effects.
The implementation is as follows:
1. Enter your WeChat official account to get your yourAppID, yourAppSecret
2. Download the WeChat Share SDK (see the blog below);
3. The SDK is introduced into the project (my project is the thinkphp framework);
3.1 Because a lot of H5 needs to be shared, the WeChat configuration information is obtained through yourAppID and yourAppSecret and put into the basic controller class for any inherited class to use:
//WeChat sharing--get confidential configuration information ======PHP code part =======
protected function getWxShareConfig(){
$signPackage = array();
require THINK_PATH.'Extend/Wxsharesdk/jssdk.php'; //My SDK is placed in the ThinkPHP/Extend directory
$jssdk = new JSSDK($this->_wxshare_Appid, $this->_wxshare_AppSecret);
//Fill in your developer ID in the developer center
$signPackage = $jssdk->GetSignPackage();
return $signPackage;
}
// Assignment of the controller class that needs to be shared
public function __construct() {
parent::__construct();
$wxShareConfig = $this->getWxShareConfig();
$this->assign("signPackage",$wxShareConfig);
}
3.2 //Wechat sharing ======= javascript code part =======
Introduce the following JS file to the page that needs to call the JS interface, (support https) http://res.wx.qq.com/open/js/jweixin-1.2.0.js It is recommended to save the secondary js code to the js of your own project
<script type="text/javascript" src="/Public/js/jweixin-1.2.0.js"></script>
<script>
wx.config({
debug: false, //Debug mode, after setting to true, debugging information will pop up directly on the web page for troubleshooting
appId: '{$signPackage["appId"]}', // It is recommended to send out in the background to avoid sensitive information leakage
timestamp: '{$signPackage["timestamp"]}',
nonceStr: '{$signPackage["nonceStr"]}',
signature: '{$signPackage["signature"]}',
jsApiList: [ //Web service interface to be used
'checkJsApi', //Determine whether the current client version supports the specified JS interface
'onMenuShareTimeline', //Share to Moments
'onMenuShareAppMessage', //Share to friends
'onMenuShareQQ', //Share to QQ
'onMenuShareQZone' //Share to qq space
]
});
var share_title = '{$share["title"]}'; //The title of the share
var share_link = '{$share["link"]}'; //Shared link
var share_imgUrl = '{$share["imgUrl"]}'; //The shared image address
wx.ready(function () { //The ready function is used to call the API. If your web page needs to customize the sharing and callback functions after loading, you need to call the sharing function here. //If the WeChat game is over, you need to Click the button to trigger to get the score and share it. There is no need to call the API here. You can bind the event on the button and call it directly. Therefore, since most WeChat games require users to trigger the score first, please do not fill in the following. Share API
wx.onMenuShareTimeline({ //For example, the API of sharing to the circle of friends
title: share_title, // share title
link: share_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); //建议关闭错误输出，否则用户体验不太好
});
//大家可以自己试试，蛮好玩的，也不难！！！