有好东西,大家要一起分享
也是公司运营部门在某些时候做推广的一些方式。
那么我们平时用的这些分享接口怎么实现呢?
以下为微信公众平台为我们提供的微信页面开发js-sdk说明文档:
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
我们简单的实现文档提供的步骤:
再次我直接进入调用js文件
关于1.1.3的验证,需要配合后台返回以下我们需要的参数
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
正常情况下,前端工作者只需借用ajax向后台传送本页链接:
window.location.herf
举个例子:
function getData(page) {
var pageTotal = 0;
$.ajax({
url : "XXXX",
type : "post",
async : false,//此处需要注意的是要想获取ajax返回的值这个async属性必须设置成同步的,否则获取不到返回值
data :{"url":window.location.href},
dataType : "json",
success : function(data) {
pageTotal = data;
console.log(pageTotal);
}
});
return pageTotal;
}
var wxGetDate = getData(); //包含wx.config所需要的参数
继续例子:(wx.config):
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '和谐’, // 必填,公众号的唯一标识
timestamp:wxGetDate.timestamp , // 必填,生成签名的时间戳
nonceStr: wxGetDate.noncestr, // 必填,生成签名的随机串
signature: wxGetDate.signature,// 必填,签名
jsApiList: [
//需要重写的功能列表
"updateAppMessageShareData" //此处我们使用“分享到朋友”
] // 必填,需要使用的JS接口列表 在文档末尾——附录2
});
以下内容是查错,直接copy即可
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
真正起作用位置:
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.updateAppMessageShareData({
title: '我们取个好一点的名字', // 分享标题
desc: '来啊,来玩啊', // 分享描述
link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '图片链接', // 分享图标
success: function () {
// 设置成功
}
})
})
如果你做完这一切,可以了,去分享吧!
记住官方文档,他很重要。作为开发者,要理解文档,去开发文档,而不是每每做着干想,等着别人给你思路。
或许有人领航,能事半功倍,但你也失去了前进的原动力。
至此,第一次分享完毕,二次分享则会:(借用某位博主的话)微信在进行二次分享后会给该链接自动加上from以及isappinstalled这两个参数证明该链接是二次分享过来的,有了这两个参数,便会导致二次分享进行签名时失效,一次分享拥有的自定义信息都会被抹杀,剩下空荡荡的链接以及白色缩略图,很是恶心。
而我目前也被恶心到了。
哪怕使用
window.location.href.split(‘&’)[0]
企图强行次次是第一次进入一般,还是没效果。
但既然这个问题早早被人发现,我相信我也能解决。
再次留个学习记录。