如何在微信6.0.2+版本不接入微信API的情况下设置自定义分享内容(图片、链接、标题)
微信在6.0.2及以上版本已经回收客户端自定分享的权限,而是以授权api的形式开放出来。有时候我们只想简单地自定义分享的title,分享的图片以及分享的链接时,而不想或者缺乏资源去接入微信api的时候该怎么实现呢?
1.设置分享title:动态改变document.title值即可:
document.title = 'test'
2.设置分享图片:在页面隐藏一张尺寸大于290*290的图(图片需要容器包裹,设置容器css属性display:none即可):
<div style="display:none"><img src="share.jpg" /></div>
3.设置分享的链接:动态修改document.documentURI的值即可
document.documentURI = "http://navyxie.github.io/"
以上方法即可在微信6.0.2+版本自定义分享内容,不需额外引入微信的js文件
-----------------------------------------------------------华丽丽分割线-----------------------------------------------------------
在微信6.0.2以前的版本,我们在做微信h5页面上做分享时,还清晰地记得一段这样的代码吗?
WeixinJSBridge.on('menu:share:timeline', function(argv) { // 分享到朋友圈 WeixinJSBridge.invoke('shareTimeline', { "img_url": window.ShareData.img, "link": window.ShareData.link, "title": window.ShareData.TimelineTitle, "desc": window.ShareData.TimelineTitle }, function(res) { window.ShareData.TimelineSuccess(); }); });
所以我们通过搜索关键字:link,title,desc可以轻松地找到设置分享内容的位置(会找到多个,因为分享的渠道很多,朋友圈,朋友等),我们找到分享到朋友圈那段设置分享内容的源代码(2549-2578行):
// share timeline _on('menu:share:timeline',function(argv){ _log('share timeline'); var data; if (typeof argv.title === 'string') { data = argv; _call('shareTimeline',data); }else{ data = { // "img_url": "", // "img_width": "", // "img_height": "", "link": document.documentURI || _session_data.init_url, "desc": document.documentURI || _session_data.init_url, "title": document.title }; var shareFunc = function(_img){ if (_img) { data['img_url'] = _img.src; data['img_width'] = _img.width; data['img_height'] = _img.height; } _call('shareTimeline',data); }; getSharePreviewImage(shareFunc); } });
我们可以看到,当参数argv带有参数title时(通过调用微信api返回),会自然使用参数内容,否则title会使用document.title,desc会使用document.documentURI(当前页面打开的链接),link同样使用document.documentURI,那么自定图片的代码在哪里呢?上面代码的最后的函数getSharePreviewImage 就是获取页面分享图片的地址,我们追踪到函数getSharePreviewImage里去(2467-2576行)
// 获取页面图片算法: // 在页面中找到第一个最小边大于290的图片,如果1秒内找不到,则返回空(不带图分享)。 var getSharePreviewImage = function(cb){ var isCalled = false; var callCB = function(_img){ if (isCalled) {return;}; isCalled = true; cb(_img); } var _allImgs = _WXJS('img'); if (_allImgs.length==0) { return callCB(); } // 过滤掉重复的图片 var _srcs = {}; var allImgs = []; for (var i = 0; i < _allImgs.length; i++) { var _img = _allImgs[i]; // 过滤掉不可以见的图片 if (_WXJS(_img).css('display')=='none' || _WXJS(_img).css('visibility')=='hidden') { // _log('ivisable image !! ' + _img.src); continue; } if (_srcs[_img.src]) { // added } else { _srcs[_img.src] = 1; // mark added allImgs.push(_img); } }; var results = []; var img; for (var i = 0; i < allImgs.length && i < 100; i++) { img = allImgs[i]; var newImg = new Image(); newImg.onload = function() { this.isLoaded = true; var loadedCount = 0; for (var j = 0; j < results.length; j++) { var res = results[j]; if (!res.isLoaded) { break; } loadedCount++; if (res.width>290 && res.height>290) { callCB(res); break; } } if (loadedCount==results.length) { // 全部都已经加载完了,但还是没有找到。 callCB(); }; } newImg.src = img.src; results.push(newImg); } setTimeout(function(){ for (var j = 0; j < results.length; j++) { var res = results[j]; if (!res.isLoaded) { continue; } if (res.width>290 && res.height>290) { callCB(res); return; } } callCB(); },1000); }
阅读上面代码,真相终于浮出水面,看注释:在页面中找到第一个最小边大于290的图片,如果1秒内找不到,则返回空(不带图分享),所以当你需要设置自定义分享的图片时,只需要在页面中隐藏一张尺寸大于290*290的图片即可(图片不能太大,因为1秒钟内如果加载不完这种图会视为失败,分享出去的内容就会不带图了,这也是为什么我们分享出去的内容有时候带图有时候不带图的原因)。
注意,设置分享的图片必须包含在一个容器中,比如div,设置容器的css属性,display:none即可,直接设置图片display:none或者visibility:false,会被过滤掉,过滤代码如下
// 过滤掉不可以见的图片 if (_WXJS(_img).css('display')=='none' || _WXJS(_img).css('visibility')=='hidden') { // _log('ivisable image !! ' + _img.src); continue; }
总结
小坑
git>>