Preface
产物愿望我们在微信分享出去的链接,有本身的款式,而不是仅仅一个链接。用产物的话来讲,你发给客户一个链接,客户敢点么???
听着比较有意思,不过也不能说完整没有原理,毕竟林林总总的欺骗人人也是有所耳闻,经确认,产物想要:
而我们当前分享是:
Main
总监给我提醒说,微信有 js-sdk ,能够在 js 里设置这个款式。
因而,我找到了微信 JS-SDK 申明文档,基本上就是依据文档走些设置,这个要和产物那里要些账号密码,改些东西之类,依据文档来,没什么好说的。
大致流程以下:
- 步骤一:绑定域名
- 步骤二:引入 JS 文件
- 步骤三:经由过程 config 接口注入权限考证设置
wx.config({}) //传入一些初始化参数
- 步骤四:经由过程 ready 接口处置惩罚胜利考证
wx.ready(function() {}) //传入胜利回调
- 步骤五:经由过程 error 接口处置惩罚失利考证
wx.error(function() {}) //传入失利回调
实际操纵的时刻,遇到了几点贫苦,这里须要提一下:
测试的时刻,注重开启 debug 形式,轻易定位题目。
wx.config({ debug: true /*其他参数*/ })
出于平安斟酌,开发者必须在效劳器端完成署名的逻辑。
这个是文档说的,横竖就是给背景处置惩罚了,终究前端初始化须要的几个字段,除了 debug
和 jsApiList
,都是从背景拿的。
wx.config({
debug: true, // 开启调试形式,挪用的一切api的返回值会在客户端alert出来,若要检察传入的参数,能够在pc端翻开,参数信息会经由过程log打出,仅在pc端时才会打印。
appId: '', // 必填,民众号的唯一标识
timestamp: , // 必填,天生署名的时候戳
nonceStr: '', // 必填,天生署名的随机串
signature: '',// 必填,署名
jsApiList: [] // 必填,须要运用的JS接口列表
});
背景在完成的时刻,能够须要注重文档提醒的两点:
- access_token(有效期 7200 秒,开发者必须在本身的效劳全局缓存 access_token)
- jsapi_ticket(有效期 7200 秒,开发者必须在本身的效劳全局缓存 jsapi_ticket)
因为这会致使一开始天生的署名没错,然则两个小时后就失效了。
代码逻辑
一般的逻辑都是前端从背景拿到上面的几个字段,在前端完成初始化,然后增加初始化胜利和失利的回调。
示例:
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.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.error(function(res) {
alert(res)
})
},
error: function(error) {
alert(error)
}
})
我司轻微特别些,直接把初始化的代码放在前面须要引入微信的 js 文件背面了,所以我直接引入这个文件就完成了初始化操纵。不过,我照样须要在引入后监听初始化胜利和失利的回调。
我司代码:
<script src="./js/shareInWeChat.js?debug=1"></script>
<!-- 内里包含了 wx.config({}) 的代码-->
<!-- 经由过程 debug 参数来切换调试形式 -->
setWeChatShareStyle(product, imgUrl)
function setWeChatShareStyle(product, imgUrl) {
var success = function(res) {}
var fail = function(res) {}
var desc =
product.description && product.description !== ''
? product.description
: '后备形貌'
wx.ready(function() {
var eventConf = {
title: product.name,
desc: desc,
imgUrl: imgUrl,
link: window.location.href,
success: success
}
if (pubMethods.isAndroid()) {
// 安卓适用于老接口,新接口不可
wx.onMenuShareAppMessage(eventConf)
wx.onMenuShareTimeline(eventConf)
wx.onMenuShareQQ(eventConf)
wx.onMenuShareQZone(eventConf)
}
if (pubMethods.isIOS()) {
// iOS 适用于新接口,老接口不可
wx.updateAppMessageShareData(eventConf, success)
wx.updateTimelineShareData(eventConf, success)
}
})
wx.error(fail)
}
最初我忧郁,如许能够会监听不到 wx.config
初始化的结果,结果发明照样能够监听到的,申明 wx.config
内里的操纵是个异步操纵。
代码兼容性
- 统一传参
如上面代码所示,虽然依据微信的文档,关于差别的接口,传的参数稍有区分,然则我为了轻易,都放在 eventConf
内里了,事实证明也是能够的(不能够我就要吐槽了,毕竟传入的是对象)。
- 接口更新的 bug
虽然微信文档上有接口更新的申明:
请注重,原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口,行将烧毁。请尽快迁徙运用客户端 6.7.2 及 JSSDK 1.4.0 以上版本支撑的 wx.updateAppMessageShareData、updateTimelineShareData 接口。
但我实际上测试的结果是,安卓不支撑新接口,iOS 支撑,然则我如果把新老接口全用上,有一端会失利,所以终究才有上面谁人机型推断的结果,关于差别的机型采用了差别的接口。
if (pubMethods.isAndroid()) {
// 安卓适用于老接口,新接口不可
wx.onMenuShareAppMessage(eventConf)
wx.onMenuShareTimeline(eventConf)
wx.onMenuShareQQ(eventConf)
wx.onMenuShareQZone(eventConf)
}
if (pubMethods.isIOS()) {
// iOS 适用于新接口,老接口不可
wx.updateAppMessageShareData(eventConf, success)
wx.updateTimelineShareData(eventConf, success)
}
- 分享的图片不能是 base64
因为我司须要对图片举行处置惩罚再去分享,所以当我用 canvas
导出 base64
作为 imgUrl
的时刻,我发明是没有结果的。