微信分享图标设置,以及wx.config配置
最近公司要求我做一个关于页面分享微信显示小图和描述的功能,由于之前没有做过,所以说是从零开始,看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配置的更多相关文章
- 微信JS-SDK接口上传图片以及wx.config的配置
最近做的微信网页要实现一个上传图片的功能,倒腾了半天终于搞好了,具体的步骤可以查看微信官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_W ...
- 微信公众号网页开发-jssdk config配置参数生成(Java版)
一.配置参数 参考官方文档:http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&la ...
- 判断终端是ios还是安卓的一些妙用(附加微信分享图标修改)
最近遇到一个项目 要求有两个icon(就是下载地址 下载安卓的apk 和ios的安装包) 一开始的方案是 什么设备都显示这两个icon 但是后来老大说这样不好 安卓用户给他下载ios 也不行 ...
- 56.如何清除已经设置的npm config配置
npm config delete registry npm config delete disturl 或者 npm config edit 找到淘宝那两行,删除
- window快捷登陆linux的的设置方式(设置ssh的config配置)
看看网上其他人如何写的: http://www.xuebuyuan.com/414672.html 文中~的意思是用户目录下的意思: http://blog.csdn.net/newjueqi/art ...
- ThinkPHP3.2.3集成微信分享JS-SDK实践
先来看看微信分享效果:在没有集成微信分享js-sdk前是这样的:没有摘要,缩略图任意抓取正文图片 在集成微信分享js-sdk后是这样的:标题,摘要,缩略图自定义 一.下载微信SDK开发包下载地址:ht ...
- Vue2中实现微信分享支付功能
Vue2中实现微信分享支付功能 近期做了一个微信公众号前后分离项目,前端采用Vue2开发,后端SpringBoot,今天迫不及待的来给大家分享一下这次在开发中遇到的一些坑以及解决办法. 在这里,一些 ...
- php框架tp3.2.3和js写的微信分享功能心得,分享的标题内容图片自定义
https://blog.csdn.net/weixin_42231483/article/details/81585322 最近用PHP的tp3.2.3框架和js写的微信分享功能心得,分享的标题内容 ...
- 使用JSSDK集成微信分享遇到的一些坑
h5项目中需要集成微信分享,以实现自定义标题.描述.图片等功能.结果遇到了很多坑. 准备工作 务必详细阅读微信JS-SDK说明文档 需要后端支持 强烈建议下载使用微信web开发者工具 按文档配置好公众 ...
随机推荐
- 最长回文子序列LCS,最长递增子序列LIS及相互联系
最长公共子序列LCS Lintcode 77. 最长公共子序列 LCS问题是求两个字符串的最长公共子序列 \[ dp[i][j] = \left\{\begin{matrix} & max(d ...
- linux服务器上如何使用nginx访问本地静态资源
查看80端口是否被占用,一般80端口多被apache服务占用. netstat -anp|grep 80 2.修改apache服务的端口号 vim /etc/apache2/ports.conf 3. ...
- 过滤器、拦截器、AOP的区别
过滤器 过滤器可以拦截到方法的请求和响应(ServletRequest request, SetvletResponse response),并对请求响应做出响应的过滤操作,比如设置字符编码.鉴权操作 ...
- 2019春Python程序设计练习5(0416--0422)
6-1 6-1.使用函数求特殊a串数列和 (30 分) 给定两个均不超过9的正整数a和n,要求编写函数fn(a,n) 求a+aa+aaa++⋯+aa⋯aa(n个a)之和,fn须返回的是数列和 函数 ...
- [人物存档]【AI少女】【捏脸数据】少(烧)女前(钱)线
点击下载(城通网盘):9.zip 点击下载(城通网盘):AISChaF_20191112224605286.png
- wx小程序知识点(七)
七.小程序提速与性能优化 参考大佬vicyao的文章 https://blog.csdn.net/wetest_tencent/article/details/61196522 (1)提高页面加载速度 ...
- Windows环境下MySQL面试技巧
对话一: 面试官:重新安装mysql卡在最后一步,怎么解决? 应聘者:第一次安装完mysql,由于各种原因需要重新安装是经常遇到的问题,解决方案如下. 1)在注册表里搜索my ...
- QTCreator:QSS语法高亮(QSS Syntax highlight)
由于QSS几乎等同CSS[1]语法,所以我们设置有 QT 语法高亮: Qtcreator QSS syntax highlight setting: Qt Creator QSS 语法交互设置:QTC ...
- Beyong Compare 2.4.10刷新剩余日期bat批处理文件
@echo off % start )(window.close)&&exit REG DELETE "HKCU\Software\Scooter Software\Beyo ...
- #415 Div2 Problem C Do you want a data? (math && 前后缀和 && 快速幂)
题意: 首先定义集合的F值为 这个集合里面最大值和最小值的差. 现给出一个拥有n个数的集合(没有相同的元素), 要求求出这个集合内所有子集的F的值的和.例如: {4.7}这个集合里面有子集{4}.{ ...