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


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 相关文章推荐
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
Node.js笔记之process模块解读
May 31 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 Javascript
详谈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
php中simplexml_load_file函数用法实例
2014/11/12 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
前端性能优化及技巧
2016/05/06 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
大二学期个人自我评价
2014/01/13 职场文书
亮化工程实施方案
2014/03/17 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
家庭困难证明
2014/10/12 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
初中英语教学随笔
2015/08/15 职场文书
决心书格式范文
2015/09/23 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
关于mysql中string和number的转换问题
2022/06/14 MySQL