最近公司要求我做一个关于页面分享微信显示小图和描述的功能,由于之前没有做过,所以说是从零开始,看jssdk说明文档,网上搜索各种资料,甚至连三四年前的内容都搜索出来了,也试过以前的简单方法,包括在页面设置一个隐藏的图片,宽高都是300像素,微信就会抓取这张图片做为分享图片,但经本人测试无法使用,后来查到了原因,是微信对自定义分享内容作了限制,于是最终还是得回到配置wx.config上来。

wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
appId: data.configMap.appId, // 必填,公众号的唯一标识
timestamp: data.configMap.timestamp, // 必填,生成签名的时间戳
nonceStr: data.configMap.nonceStr, // 必填,生成签名的随机串
signature: data.configMap.signature,// 必填,签名,见附录1
jsApiList: [
"onMenuShareTimeline",//分享朋友圈接口
"onMenuShareAppMessage"//分享给朋友接口
] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

  测试的时候最好将debug设置为true,这样可以在手机微信测试页面的时候查看到出错的地方,有四个参数,appId,timestame,nonceStr,signature是由后台给你提供,具体的后台怎样实现这里不多做解释,百度搜索和微信官方都有提供,

var link = location.href;
$.ajax({
url:"your_url",//后台给你提供的接口
type:"GET",
data:{"url":link},
async:true,
dataType:"json",
success:function (data){
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
appId: data.configMap.appId, // 必填,公众号的唯一标识
timestamp: data.configMap.timestamp, // 必填,生成签名的时间戳
nonceStr: data.configMap.nonceStr, // 必填,生成签名的随机串
signature: data.configMap.signature,// 必填,签名,见附录1
jsApiList: [
"onMenuShareTimeline",
"onMenuShareAppMessage"
] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.error(function (res) {
alert(res);
});
},
error:function (error){
alert(error)
}
});

  注意,在这里请求四个参数的时候,需要将页面的url(不包括#以及后面的内容)传给后台,这一步比较重要。

在这里之前犯了个错误,async,请求是否异步的时候,我写的是false,也就是同步,结果导致页面在ios系统分享不了,有时候能分享但没有图片显示,但是在安卓系统就可以正常显示和分享,后来改为true之后就ok了。

这是后台返回的参数,

jsApiList里面的参数是调用的接口列表数组,分享到朋友圈和分享给朋友时必须写上以上两个参数,onMenuShareTimeline 和 onMenuShareAppMessage,

测试的时候如果有哪个参数不正确,就会弹出对应的错误信息,之前没有传url的时候,报的是signature错误,也就是签名错误。

当参数都正确的时候,打开了调试时在微信客户端打开会弹出:errMsg:config:ok!

当wx.config()成功之后,wx.ready()方法就可以调用了,这时候就是设置一些分享时的图片,标题,以及描述信息了,这个都很简单,根据需要填写。

wx.ready(function(res) {
wx.onMenuShareAppMessage({
title: document.title,
desc:document.title,
link: link,
imgUrl: Imgurl,
trigger: function(res) {},
success: function(res) {},
cancel: function(res) {},
fail: function(res) {}
});
wx.onMenuShareTimeline({
title: document.title,
link: link,
imgUrl: Imgurl,
trigger: function(res) {},
success: function(res) {},
cancel: function(res) {},
fail: function(res) {}
});
});

  这时候基本上就大功告成了,其实这块原理不是很复杂,但稍有一个地方出错就不能成功,所以如果不成功的时候不要心急,耐心寻找哪个地方写的不对,多上网搜索总会找到答案的。

微信分享图标设置,以及wx.config配置的更多相关文章

  1. 微信JS-SDK接口上传图片以及wx.config的配置

    最近做的微信网页要实现一个上传图片的功能,倒腾了半天终于搞好了,具体的步骤可以查看微信官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_W ...

  2. 微信公众号网页开发-jssdk config配置参数生成(Java版)

    一.配置参数 参考官方文档:http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&la ...

  3. 判断终端是ios还是安卓的一些妙用(附加微信分享图标修改)

    最近遇到一个项目 要求有两个icon(就是下载地址 下载安卓的apk  和ios的安装包) 一开始的方案是 什么设备都显示这两个icon 但是后来老大说这样不好   安卓用户给他下载ios 也不行  ...

  4. 56.如何清除已经设置的npm config配置

    npm config delete registry npm config delete disturl 或者 npm config edit 找到淘宝那两行,删除

  5. window快捷登陆linux的的设置方式(设置ssh的config配置)

    看看网上其他人如何写的: http://www.xuebuyuan.com/414672.html 文中~的意思是用户目录下的意思: http://blog.csdn.net/newjueqi/art ...

  6. ThinkPHP3.2.3集成微信分享JS-SDK实践

    先来看看微信分享效果:在没有集成微信分享js-sdk前是这样的:没有摘要,缩略图任意抓取正文图片 在集成微信分享js-sdk后是这样的:标题,摘要,缩略图自定义 一.下载微信SDK开发包下载地址:ht ...

  7. Vue2中实现微信分享支付功能

    Vue2中实现微信分享支付功能  近期做了一个微信公众号前后分离项目,前端采用Vue2开发,后端SpringBoot,今天迫不及待的来给大家分享一下这次在开发中遇到的一些坑以及解决办法. 在这里,一些 ...

  8. php框架tp3.2.3和js写的微信分享功能心得,分享的标题内容图片自定义

    https://blog.csdn.net/weixin_42231483/article/details/81585322 最近用PHP的tp3.2.3框架和js写的微信分享功能心得,分享的标题内容 ...

  9. 使用JSSDK集成微信分享遇到的一些坑

    h5项目中需要集成微信分享,以实现自定义标题.描述.图片等功能.结果遇到了很多坑. 准备工作 务必详细阅读微信JS-SDK说明文档 需要后端支持 强烈建议下载使用微信web开发者工具 按文档配置好公众 ...

随机推荐

  1. office visio

    画 流程图软件 UML 是否要用做类图.时序图?????

  2. poj2987 Firing[最小割]

    题目 求选最少点个数的最大权闭合子图.(板子题) 最小割入门题,什么都不想说,丢个别人题解地址就跑. 附加几点个人理解:与s相通的S点集是闭合子图,剩下的与t相通的T点集是其他的.任意一个割都保证了有 ...

  3. 【洛谷P3128】Max Flow

    题目大意:给定一棵 N 个节点的无根树,有 M 个操作,每次选定一条树链,将这条链上所有点的点权 +1,最后求树上点的最大点权是多少. 题解:树上差分算法的应用. 发现操作有 M 次,但是询问只有一次 ...

  4. hibernate中Session的load和get方法的区别是什么?

    主要有以下三项区别:  ① 如果没有找到符合条件的记录,get方法返回null,load方法抛出异常.  ② get方法直接返回实体类对象,load方法返回实体类对象的代理.  ③ 在Hibernat ...

  5. 对于Arraylist 的一些疑问

    是否保证线程安全? ArrayList 和 LinkedList 都是不同步的,也就是不保证线程安全. 底层数据结构区别? Arraylist 底层使用的是Object数组:LinkedList 底层 ...

  6. 用SWPM导入SAP时因用户Culture及系统Locale引发的问题

    [问题]SWPM安装SAP时因用户Culture及系统Locale引发的问题 [现象] ①IE浏览器显示空白(SWPM界面不显示) ②SAP安装时出现“Error occurs when execut ...

  7. LAMP 搭建,wordpress.xcache,powerdns及poweradmin

    一,概念 CGI: CGI全称是通用网关接口(Common Gateway Interface),是外部应用程序与与服务器之间的接口标准,是在CGI程序和web服务器之间传递信息的规程 CGI是一段程 ...

  8. Visual Studio右侧缩略图

    打开Visual Studio→工具→选项 点击确定,完成!Enjoy!

  9. Linux命令-磁盘管理(二)

    Linux命令-磁盘管理(二) Linux mmount命令 Linux mmount命令用于挂入MS-DOS文件系统. mmount为mtools工具指令,可根据[mount参数]中的设置,将磁盘内 ...

  10. openvas 安装

    NMAP apt-get update & apt-get upgrade kali的更新命令 https://www.fujieace.com/kali-linux/update-sourc ...