最近公司要求我做一个关于页面分享微信显示小图和描述的功能,由于之前没有做过,所以说是从零开始,看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. pytest重复执行

    安装 pip install pytest-repeat 命令: pytest --count=10 test_file.py

  2. 原生js实现简单的下拉刷新功能

    前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...

  3. python fc21~fc29踩坑记录

    最近在公司的linux fc21上安装python和anaconda, 直接mintmenu给挂掉了. 真是弱爆了. 后来,升级终于来了, 升到了fc29.好,再看看, python2.7还在, py ...

  4. css文件分类

    简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. ...

  5. CentOS下nagios报警飞信部署四步走

    CentOS下nagios报警飞信部署四步走   今天 帮群里一兄弟配了下nagios上的飞信,这个东西 我个人感觉还是很实用的,不过好久没配了,今天配置了一遍,顺便 就把过程记录下来了,供大家学习! ...

  6. "main" java.io.IOException: Mkdirs failed to create /user/centos/hbase-staging (exists=false, cwd=file:/home/centos)

    Exception in thread "main" java.io.IOException: Mkdirs failed to create /user/centos/hbase ...

  7. 使用Eclipse Memory Analyzer Tool(MAT)分析故障

    Eclipse Memory Analyzer Tool(MAT)是一个强大的基于Eclipse的内存分析工具,可以帮助我们找到内存泄露,减少内存消耗. 工作中经常会遇到一些内存溢出.内存泄露等问题, ...

  8. 1、Qt应用程序

    新建Qt Widgets Application,基类选择QWidget Qt项目特点(参考上图):头文件名与类名一样,成对出现 main.cpp代码解释如下 #include "mywid ...

  9. 窗体操作:ShowWindow(SW_HIDE)

    BOOL ShowWindow( int nCmdShow ); Return Value 作用: 如果窗口原来可见,则返回非零值:如果CWnd原来是隐藏的,则返回0   参数: Parameters ...

  10. Ubuntu访问samba共享文件方法

    1.1  安装samba客户端 sudo apt-get install smbclient -y 1.2  查看文件共享权限 smbclient -L //192.168.100.6 1.3  创建 ...