前端做微信好友分享_一篇搞定微信分享和line分享

前言

在h5的页面开发中，分享是不可或缺的一部分，对于一些传播性比较强的页面，活动页之类的，分享功能极为重要。例如，京东等电商年末时会有一系列的总结h5在微信中传播，就不得不提到微信的分享机制。

微信分享

最简单的配置

微信分享静态页

微信分享需要后台回传时间戳、签名等信息，如果页面比较简单，就可以用下述方法做简单设置。

微信默认抓取第一张符合要求的图片作为分享图，图片大于300px × 300px，图片不能是display：none的。

根据上述规则，img的设置可以为这样：

要记得把这张图片放到最前面，如果网页加载了其他符合规则的图片，也能保证正常分享。

(之前看到过一个weixinjsbridge的源码，抓取的规则大概是这样，具体忘记了，后面也找不到那个源代码了，如果有错误，请通知我。)

分享标题是取页面标题，可以使用js动态修改标题，但是iOS下会有问题，有关修改title的hack，方法如下。

/**

* 处理微信设置title问题

* 页面在加载完成后设置title在微信下不会触发改变

*/

define(function(){

return function(src){

var frame = document.createElement('iframe'),flag = false;

frame.style.display = 'none';

frame.οnlοad=frame.οnerrοr=frame.onreadystatechange=function(){

if(flag){return}

flag = true;

setTimeout(function(){document.body.removeChild(frame)},0)

};

//

frame.src = src? (src + (src.indexOf('?') != -1?'&':'?') + '__=' + Date.now()) : '/favicon.ico',

document.body.appendChild(frame);

}

});

类似的hack有很多，基于jquery、原生的也有很多，基本原理就是使用iframe。

之后分享以后，在朋友圈是这样