转载: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等等,此时,必须要申请一个公众号,并且需要后台的配合,才能完整的使用微信的分享功能。
申请公众号交给产品,开发接口交给网关,前端要做什么呢?
先放个官方文档链接,我来简述步骤,如果有疑问,可以留言,或者查阅官方文档。
- 页面导入官方js,http://res.wx.qq.com/open/js/jweixin-1.2.0.js。(需要吐槽的是,之前官网是是1.0.0版本,突然变成了1.2.0,毫无通知。。)
- 请求接口,获取时间戳、签名等一系列公众号的信息。
- 调用wx.config(),把这些必填的信息填入。
- 调用wx.ready() 处理一些初始化的内容。此处配置分享到朋友圈、分享给好友的内容。
- 调用wx.error()处理错误信息,有时候签名会失效,此处可以重新请求接口,重新进行2-4步。
-
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,