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


Posted in Javascript onAugust 18, 2017

解决不显示摘要和图片的问题,需要调用微信公众号的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>

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

Javascript 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
js变量以及其作用域详解
Jul 18 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
详谈innerHTML innerText的使用和区别
Aug 18 #Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 #Javascript
webpack2.0配置postcss-loader的方法
Aug 17 #Javascript
微信小程序 获取javascript 里的数据
Aug 17 #Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 #Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 #Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 #Javascript
You might like
用session做客户验证时的注意事项
2006/10/09 PHP
用PHP实现图象锐化代码
2007/06/14 PHP
php db类库进行数据库操作
2009/03/19 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
jQuery学习总结之jQuery事件
2014/06/30 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
js实现一键复制功能
2017/03/16 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
python制作一个桌面便签软件
2015/08/09 Python
Python实现定时任务
2017/02/08 Python
Python自动生产表情包
2017/03/17 Python
Python学习小技巧总结
2018/06/10 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
Python绘制股票移动均线的实例
2019/08/24 Python
Python pandas库中的isnull()详解
2019/12/26 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
党员自我评价分享
2013/12/13 职场文书
人事专员的岗位职责
2014/03/01 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
消防演习通知
2015/04/25 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA