一篇搞定微信分享和line分享

转载：http://www.cnblogs.com/liuyongjia/p/7581813.html

 

前言

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

微信分享

最简单的配置

微信分享静态页
微信分享需要后台回传时间戳、签名等信息，如果页面比较简单，就可以用下述方法做简单设置。
微信默认抓取第一张符合要求的图片作为分享图，图片大于300px × 300px，图片不能是display：none的。
根据上述规则，img的设置可以为这样：

<img src="//img30.360buyimg.com/mobilecms/jfs/t4033/80/1876911537/17072/11729313/589bec20Nc5555ece.jpg" style="position:absolute;width:100%;z-index:0;">

要记得把这张图片放到最前面，如果网页加载了其他符合规则的图片，也能保证正常分享。
（之前看到过一个weixinjsbridge的源码，抓取的规则大概是这样，具体忘记了，后面也找不到那个源代码了，如果有错误，请通知我。）
分享标题是取页面标题，可以使用js动态修改标题，但是iOS下会有问题，有关修改title的hack，方法如下。

/**
 * 处理微信设置title问题  * 页面在加载完成后设置title在微信下不会触发改变  */ define(function(){ return function(src){ var frame = document.createElement('iframe'),flag = false; frame.style.display = 'none'; frame.onload=frame.onerror=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。

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

与好友分享后是这样

如果对于分享的要求不高，上面的方法就可以了。
But，怎么可能？

真正的分享

在传播性极强的h5活动页中，经常会需要带有不同的图片、定制的描述、title等等，此时，必须要申请一个公众号，并且需要后台的配合，才能完整的使用微信的分享功能。
申请公众号交给产品，开发接口交给网关，前端要做什么呢？
先放个官方文档链接，我来简述步骤，如果有疑问，可以留言，或者查阅官方文档。

1. 页面导入官方js，http://res.wx.qq.com/open/js/jweixin-1.2.0.js。（需要吐槽的是，之前官网是是1.0.0版本，突然变成了1.2.0，毫无通知。。）
2. 请求接口，获取时间戳、签名等一系列公众号的信息。
3. 调用wx.config()，把这些必填的信息填入。
4. 调用wx.ready() 处理一些初始化的内容。此处配置分享到朋友圈、分享给好友的内容。
5. 调用wx.error()处理错误信息，有时候签名会失效，此处可以重新请求接口，重新进行2-4步。

6. end
   简单吧，官方文档十分详细，接下来分享一个方法，大家可以自行参考修改。

   var wxShares = function(title, desc, link, imgUrl) { // req为我封装的一个ajax方法 req({ url: '//youdomainulr.com', // 请求接口url success: function(data) { if (typeof data == "string") { data = JSON.parse(data); } // 具体的数据结构不一定是这样，只是例子 var appId = data.shareResult.appId, timestamp = data.shareResult.timestamp, nonceStr = data.shareResult.nonceStr, signature = data.shareResult.signature; wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: appId, // 必填，公众号的唯一标识 timestamp: timestamp, // 必填，生成签名的时间戳 nonceStr: nonceStr, // 必填，生成签名的随机串 signature: signature, // 必填，签名，见附录1 jsApiList: ['checkJsApi', 'openLocation', 'getLocation', 'onMenuShareTimeline', 'onMenuShareAppMessage' ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 }); wx.ready(function() { wx.checkJsApi({ jsApiList: [ 'getLocation', 'onMenuShareTimeline', 'onMenuShareAppMessage' ], success: function(res) { // alert(JSON.stringify(res)); } }); wx.onMenuShareAppMessage({ title: title, // 分享标题 desc: desc, // 分享描述 link: link, // 分享链接 imgUrl: imgUrl, // 分享图标 type: 'link', // 分享类型,music、video或link，不填默认为link dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 success: function() { console.log("分享成功"); // 用户确认分享后执行的回调函数 }, cancel: function() { // 用户取消分享后执行的回调函数 } }); wx.onMenuShareTimeline({ title: title, // 分享标题 link: link, // 分享链接 imgUrl: imgUrl, 

转载于:https://www.cnblogs.com/BluceLee/p/7716370.html