HTML5技术

微信二次分享不显示摘要和图片的解决方法 - Me丶微笑

字号+ 作者:H5之家 来源:H5之家 2017-08-17 17:00 我要评论( )

微信二次分享不显示摘要和图片的解决方法 解决不显示摘要和图片的问题,需要调用微信公众号的js-sdk的api ,需要前端和后台的配合, 后台需要返回 appid (公众号的appid ) 、timestamp (生成签名的时间戳) 、nonceStr (签名的随机字符串) 、signature (签名*

微信二次分享不显示摘要和图片的解决方法

 解决不显示摘要和图片的问题,需要调用微信公众号的js-sdk的api ,需要前端和后台的配合,

后台需要返回 appid (公众号的appid ) 、 timestamp (生成签名的时间戳) 、nonceStr (签名的随机字符串) 、 signature (签名* 可能出错);

1.绑定域名

    先登录微信公众平台进入“公众号设置”的“功能设置”里填写“接口安全域名”。(特别提示不需要加上http或者https,吃过亏)

2.首先引入js 文件 

3.然后在配置wx.config 。

<script>

   $(function(){

          wx.config({

                 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

                 appId: '', // 必填,公众号的唯一标识

                 timestamp: , // 必填,生成签名的时间戳

                nonceStr: '', // 必填,生成签名的随机串

                signature: '',// 必填,签名,见附录1

                jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

          });

   })

</script>

4.通过ready接口处理成功验证

   wx.ready(function(){

      //详细代码

});

5.通过error接口处理失败验证

wx.error(function(res){});

详细页面代码

<script src="http://www.ciotimes.com/statics/js/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
//js引入错误导致wx没有定义。
<script>
$(function(){
//获取本页面连接,生成签名需要
var url = location.href.split('#')[0]; $.ajax({
url: "http://XXX/index.php?m=content&c=wechat_share&a=index&pc_hash=WO1sTv",
type: "POST",
async:true,
data:{'url':url},
cache: false,
dataType: "json",
success: function(data){
wx.config({
/* debug: true,*/ //调试模式
appId: data.appId,
timestamp:data.timestamp,
nonceStr:data.nonceStr,
signature:data.signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'hideOptionMenu',
'onMenuShareAppMessage'
]
});

wx.ready(function(){
wx.checkJsApi({
jsApiList: [
'getLocation',
'onMenuShareTimeline',
'onMenuShareAppMessage'
],
success: function (res) {
//alert(res.errMsg);
}
});

//分享给朋友
wx.onMenuShareAppMessage({
title: '111',
desc: '222',
link: 'http://XXX/index.php?m=content&c=index&a=test_show&catid=83&id=134521&from=singlemessage', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: 'http:/XXX/2017/0816/20170816061634987.jpg',
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
},
fail: function (res) {
//alert(res.errMsg);
//用户分享失败取消的回调函数
}
}); });
},
error: function() {
alert('ajax request failed!!!!');
return;
}
});
});

</script>

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 制作H5响应式页面注意事项、微信二次分享 - 霓好

    制作H5响应式页面注意事项、微信二次分享 - 霓好

    2017-08-14 10:00

  • 微信小程序上手项目 - 雅X共赏

    微信小程序上手项目 - 雅X共赏

    2017-07-21 10:01

  • 前端JS调用微信扫一扫二维码 - 笑笑~上善若水

    前端JS调用微信扫一扫二维码 - 笑笑~上善若水

    2017-07-01 12:00

  • 【博客园皮肤】-超简洁美观-css源码分享 - Nirvana_zsy

    【博客园皮肤】-超简洁美观-css源码分享 - Nirvana_zsy

    2017-06-28 09:02

网友点评
l