当你网站需要微信分享的时候,你很多时候都是分享出去都是直接带着链接且没有图片,这个时候都很难看。
于是我们这边需要开发出新的微信分享样式,这个样式需要有自动获取标题图片等功能,然后在文章页面直接分享即可。
需求:
1.在网站页面可以直接转发到朋友圈或者好友功能
2.自动获取标题
3.自动获取缩略图做分享图片
分析:
1.拥有微信服务号接口
2.对公众号进行调试匹配,ip加入白名单
3.网页链接代码
实施:
1.在调用页面加入当下代码
<script type="text/javascript">window.jQuery || document.write("<script src='https://cdn.dedemao.com/jquery/1.11.3/jquery.min.js'>"+"<"+"/script>");</script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script><script>
timestamp = '';
noncestr = '';
signature = '';
url = '';
var is_debug = '{dede:global.wx_appdebug/}';
is_debug = parseInt(is_debug);
is_debug = is_debug==1 ? true : false;
$(function(){
$.ajaxSettings.async = false; //重要:开启同步
url = window.location.href.split('#')[0];
//请求第二步添加的php文件获取timestamp、noncestr、signature等信息
$.getJSON("你的网站/plus/weixin_share.php",{url:url},function(data){
if (data.errmsg){
alert('微信分享配置错误:'+data.errmsg);
}
timestamp = data.timestamp;
noncestr = data.noncestr;
signature = data.signature;
});
wx.config({
debug: is_debug,
appId: '{dede:global.ws_appid/}', //填写你的appid
timestamp: timestamp,
nonceStr: noncestr,
signature: signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
]
});
wx.ready(function (){
//获取“分享给朋友”按钮点击状态及自定义分享内容接口
url = window.location.href.split('#')[0];
wx.onMenuShareAppMessage({
title: "{dede:field.title/}",
desc: "{dede:field.description functinotallow='html2text(@me)'/}",
link: url,
imgUrl: '{dede:global.cfg_basehost/}{dede:field.litpic/}',
trigger: function (res) {
},
success: function (res) {
},
cancel: function (res) {
},
fail: function (res) {
}
});
//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
wx.onMenuShareTimeline({
title: '{dede:field.title/}', // 分享标题
desc: "{dede:field.description functinotallow='html2text(@me)'/}",
link: url, // 分享链接
imgUrl: '{dede:global.cfg_basehost/}{dede:field.litpic/}', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
});
</script>
2.公众号进入设置与开发-基本配置将ip白名单里加入你的服务器ip
3.进入后台,将你的{dede:global.ws_appid/}等信息填入即可
然后,我们的微信分享就好啦~~~