关于微信自定义分享的一点心得

自从微信2017年4月份把分享接口改了之后,之前那种在页面选择第一张图片大于300px像素作为分享的默认图的方法已经失效,必须经过自定义接口来指定微信分享的图片。前几天做了一个项目,客户要求网站分享,必须要带自家的logo图片。于是查找官方api。总结一下步骤,以及步骤中可能遇到的坑。

1.在分享过程中,有个前提条件,由于调用微信的分享接口必须和微信的公众号进行绑定,也就是登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。此处有个坑,就是你的公众号,必须经过微信的官方认证,好像是300rmb左右,具体我也记不清,只有经过认证之后,在开发者权限里面里面,才能调用自定义接口。这就是所谓的大厂。

2.引入官方的微信js.http://res.wx.qq.com/open/js/jweixin-1.2.0.js 跟我们平常引入的js是一样的。

3.通过ajax,调用后台接口(最好是json文件),来配置wx.config文件,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var url = encodeURI(location.href.split('#')[0]); //域名必须要去掉#号。
$.ajax({
type : "post",
dataType:"json",
data:{'url':url},
url:"".//你的后台接口地址,建议用json格式。
success:function(data){ //此处有坑,success后面的空格要去掉。不然后面莫名其妙的走不通。
console.log(data);
wx.config({
debug: false, //调试的时候,开启,正式上线关闭,不然会在移动端弹出信息。
appId:data.appId, // 公众号的appid、
timestamp:data.timestamp, //时间戳 动态的。
nonceStr:data.nonceStr, //生成签名的随机串
signature:data.signature, // 必填,签名,
jsApiList: [ //接口数组,这儿写几个,底下就写几个。
"onMenuShareTimeline", //分享给好友
"onMenuShareAppMessage", //分享到朋友圈
"onMenuShareQQ", //分享到QQ
]
});
console.log("链接成功");
wx.ready(function(){
var shareData = {
title: '{{title}}' //标题,
desc: '{{title}}',//这里请特别注意是要去除html
link: url,
imgUrl: "",//图片的自定义地址。
};
wx.onMenuShareTimeline(shareData);
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareQQ(shareData);
});
},
error:function(data){
console.log("返回失败");
}
});

其余的微信的api已经讲解的很详细了。只是指出来大家少踩坑。这就是一个完整的调用微信分享的接口。上面的坑已经指出。

Mr.Naas wechat
欢迎关注本人公众号