最近公司要求我做一个关于页面分享微信显示小图和描述的功能,由于之前没有做过,所以说是从零开始,看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. Linux系统层级结构标准

    Linux Foundation有一套标准规范: FHS: Filesystem Hierarchy[‘haɪərɑːkɪ] Standard(文件系统层级标准)目前最新的标准是2.3版本:http: ...

  2. Visual Studio开发首选!DevExtreme v19.1.6全新来袭

    DevExtreme Complete Subscription是性能最优的 HTML5,CSS 和 JavaScript 移动.Web开发框架,可以直接在Visual Studio集成开发环境,构建 ...

  3. fedora29 下一款截图工具shutter的安装和调试

    运行命令安装shutter sudo yum install shutter 如果使用过程中出现花屏 sudo vim /etc/gdm/custom.conf 把 #WaylandEnabled=f ...

  4. 阅读之https及加密原理

    HTTPS(全称:Hypertext Transfer Protocol Secure,超文本传输安全协议),是以安全为目标的HTTP通道,简单讲是HTTP的安全版. 为什么需要https 使用htt ...

  5. Python---函数参数---王伟

    #### 定义函数 ```python#定义函数def function():    print("hello world")#调用函数function() #输出结果hello ...

  6. JavaScript 内置函数有什么?

    javaScript内置函数 1.Date:日期函数 属性:constructor 所修立对象的函数参考prototype 能够为对象加进的属性和方法 方法:getDay() 返回一周中的第几天(0- ...

  7. CPU风扇转速异常

    本文适用于Ubuntu 16.04,造冰箱的大熊猫@cnblogs 2018/10/9 近日发现一个问题,新笔记本的CPU风扇转速很高.笔记本刚刚启动,就能听到风扇呼呼的声音,转速高的异常.以前不是这 ...

  8. POJ 3352 Road Construction 中一个结论的证明

    题面 分析: 很多人都给出了做法,在这里不赘述.大概就是先把桥找出来,然后边双缩点,最后统计新图上的度数.因为缩点后为一棵树,所以度数为1(即为叶子)的点的数目+1再除以2下取整就是答案. 这里主要证 ...

  9. String类型中"=="和"equals"的区别

    "=="比较的是两个字符串的内存地址.  "equals"比较的是两个字符串的实际值. 例子1. String s1="abc"; Stri ...

  10. Python3学习笔记(十):赋值语句和布尔值

    一.赋值语句 1.序列解包 多个赋值同时进行: >>> x,y,z = 1, 2, 3 >>> print(x, y, z) 1 2 3 变量交换: >> ...