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

 更新时间:2017年08月18日 08:10:51   投稿:jingxian  
下面小编就为大家带来一篇解决微信二次分享不显示摘要和图片的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

1.绑定域名

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

2.首先引入js 文件 http://res.wx.qq.com/open/js/jweixin-1.2.0.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>

以上这篇解决微信二次分享不显示摘要和图片的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JS组件系列之使用HTML标签的data属性初始化JS组件

    JS组件系列之使用HTML标签的data属性初始化JS组件

    这篇文章主要介绍了JS组件系列之使用HTML标签的data属性初始化JS组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • webpack打包时如何修改文件名的实现示例

    webpack打包时如何修改文件名的实现示例

    本文主要介绍了webpack打包时如何修改文件名的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • js删除局部变量的实现方法

    js删除局部变量的实现方法

    下面小编就为大家带来一篇js删除局部变量的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • javascript 简单抽屉效果的实现代码

    javascript 简单抽屉效果的实现代码

    javascript 简单抽屉效果的实现代码,需要的朋友可以参考下,大家自行测试。
    2010-03-03
  • JavaScript面向对象分层思维全面解析

    JavaScript面向对象分层思维全面解析

    这篇文章主要介绍了JavaScript面向对象分层思维,js本身不是面向对象语言,在我们实际开发中其实很少用到面向对象思想。下文关于js面向对象知识给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2016-11-11
  • 浅谈bootstrap layer.open中end的使用方法

    浅谈bootstrap layer.open中end的使用方法

    今天小编就为大家分享一篇浅谈bootstrap layer.open中end的使用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javascript获取不重复的随机数的方法比较

    javascript获取不重复的随机数的方法比较

    js永不重复随机数实现代码比较
    2008-09-09
  • 如何利用Three.js实现web端显示点云数据

    如何利用Three.js实现web端显示点云数据

    这篇文章主要给大家介绍了关于如何利用Three.js实现web端显示点云数据的相关资料,最近在项目中遇到需求,需要在web端显示点云数据,将我的实现步骤介绍在这里供大家参考,需要的朋友可以参考下
    2023-11-11
  • json的结构与遍历方法实例分析

    json的结构与遍历方法实例分析

    这篇文章主要介绍了json的结构与遍历方法,结合具体实例形式分析了json常见的简单与复杂结构表示方法,以及具体的遍历操作实现技巧,需要的朋友可以参考下
    2017-04-04
  • ECMAScript6变量的解构赋值实例详解

    ECMAScript6变量的解构赋值实例详解

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring),下文中给大家提供了嵌套数组的解构例子,大家一起看看吧
    2017-09-09

最新评论