微信分享图标设置,以及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) {}
		});
	});

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

时间: 2024-10-12 16:22:01

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

微信JS-SDK获取signature签名以及config配置

微信的JS-SDK通过config接口注入权限验证配置,官网上的文档说的很清楚: Js代码   wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印. appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',/

微信分享自定义设置Title与Desc

前端Js引用: 1 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 2 <script> 3 function wxconfig(data) { 4 wx.config({ 5 // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印. 6 debug: fals

Bitmap 生成微信分享图标

android开发调用微信分享接口在设置分享图标时,必须对原图进行压缩处理,否则分享出来的图标会不清晰.据本人了解,微信分享的图标大小是132px*132px的. 下面给出方法 1 public static Bitmap crateWeixinShareIcon(Bitmap bmp, int target) { 2 int width = bmp.getWidth(); 3 int height = bmp.getHeight(); 4 5 if (width < target || hei

jssdk 微信分享相关设置

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><script type="text/javascript"> var CONF_WEIXIN = { appId: '{$signPackage['appId']}', // 必填,公众号的唯一标识 timestamp: {$s

微信分享图标制作

效果: 代码: 第一步:页面底部放两个浮动层,让指向图标不透明: <div class="share" style="display:none;filter:alpha(Opacity=30);-moz-opacity:0.9;opacity: 0.5;width:100%;height:90%; background:#4F4348; box-shadow: 0 0 0px rgba(0,0,0,.6);position:absolute;z-index:9000&q

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

看看网上其他人如何写的: http://www.xuebuyuan.com/414672.html 文中~的意思是用户目录下的意思: http://blog.csdn.net/newjueqi/article/details/47293897 密匙证书可以省略

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

先来看看微信分享效果: 在没有集成微信分享js-sdk前是这样的:没有摘要,缩略图任意抓取正文图片 在集成微信分享js-sdk后是这样的:标题,摘要,缩略图自定义 一.下载微信SDK开发包 下载地址:http://demo.open.weixin.qq.com/jssdk/sample.zip 二.设置安全域名 所有的微信JS接口都只能在公众号绑定的域名下调用.登录微信公众平台,点击左边的"公众号设置",切换到"功能设置",在"JS接口安全域名"

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

h5项目中需要集成微信分享,以实现自定义标题.描述.图片等功能.结果遇到了很多坑. 准备工作 务必详细阅读微信JS-SDK说明文档 需要后端支持 强烈建议下载使用微信web开发者工具 按文档配置好公众号 JSSDK使用步骤 步骤一:绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. 备注:登录后可在“开发者中心”查看对应的接口权限. 这里注意:JS接口安全域名一定要填写正确,区分子域名,且主域名需要通过备案!没有满足这一步,无法继续测试. 步骤二:引入JS文

javascript获取wx.config内部字段解决微信分享

转自:http://www.jb51.net/article/80679.htm 专题推荐:js微信开发_脚本之家 http://www.jb51.net/Special/879.htm 背景在微信分享开发的时候我们通常的流程是 <?php require_once "jssdk.php"; $jssdk = new JSSDK("yourAppID", "yourAppSecret"); $signPackage = $jssdk->