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


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 相关文章推荐
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
domReady的实现案例
Nov 23 Javascript
js实现下拉菜单效果
Mar 01 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
ES2020 新特性(种草)
Jan 12 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 8小时时间差的解决方法小结
2009/12/22 PHP
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
php自定义apk安装包实例
2014/10/20 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
js下拉菜单语言选项简单实现
2013/09/23 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
python中有关时间日期格式转换问题
2019/12/25 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
JPA的特点
2014/10/25 面试题
大学生毕业求职简历的自我评价
2013/10/24 职场文书
事业单位公务员的职业生涯规划
2014/01/15 职场文书
七一党建活动方案
2014/01/28 职场文书
合作意向书模板
2014/03/31 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
婚庆答谢词
2015/01/04 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL