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


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 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
JS面向对象编程详解
2016/03/06 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Django实现跨域的2种方法
2019/07/31 Python
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
党员教师工作决心书
2014/03/13 职场文书
报告会主持词
2014/04/02 职场文书
公司贷款承诺书
2014/05/30 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
转正申请报告格式
2015/05/15 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js