分享详解手机开发

是webapp，在浏览器里跑的，那么这几个分享要分情况讨论：

1 平台暴露有分享api的，直接用js调用分享api就可以了。http://overtrue.me/share.js/这个项目的源码：

var templates = { 

 qzone: http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{URL}} title={{TITLE}} desc={{DESCRIPTION}} summary={{SUMMARY}} site={{SOURCE}}, 

 qq: http://connect.qq.com/widget/shareqq/index.html?url={{URL}} title={{TITLE}} source={{SOURCE}} desc={{DESCRIPTION}} pics={{IMAGE}}, 

 tencent: http://share.v.t.qq.com/index.php?c=share a=index title={{TITLE}} url={{URL}} pic={{IMAGE}}, 

 weibo: http://service.weibo.com/share/share.php?url={{URL}} title={{TITLE}} pic={{IMAGE}} appkey={{WEIBOKEY}}, 

 wechat: javascript:, 

 douban: http://shuo.douban.com/!service/share?href={{URL}} name={{TITLE}} text={{DESCRIPTION}} image={{IMAGE}} starid=0 aid=0 , 

 diandian: http://www.diandian.com/share?lo={{URL}} ti={{TITLE}} type=link, 

 linkedin: http://www.linkedin.com/shareArticle?mini=true ro=true title={{TITLE}} url={{URL}} summary={{SUMMARY}} source={{SOURCE}} armin=armin, 

 facebook: https://www.facebook.com/sharer/sharer.php?u={{URL}}, 

 twitter: https://twitter.com/intent/tweet?text={{TITLE}} url={{URL}} via={{ORIGIN}}, 

 google: https://plus.google.com/share?url={{URL}} 

2、 没有暴露有分享api的，比如分享到微信和朋友圈，那就要自己去找解决方案。在微信自带的浏览器和uc浏览器里都可以做到这两个，前者调用微信官方的jssdk，后者可能是uc自己封装了app层的分享方法。

==============================

3、关于用iframe引入微信文章，会有防盗链问题，图片加载不出来，看了一下，大概是微信文章都是data-src的，需要转换为src，iframe是受微信的安全限制。防止挂马入侵，因此阻止了的很多事件的默认行为，经历周折找了一段代码，在浏览器上图片是可以加载出来的，但在微信浏览器上gg了：

 1 $.ajaxPrefilter(function(options) { 

 2 if(options.crossDomain jQuery.support.cors) { 

 3 var http = (window.location.protocol === http: ? http: : https:); 

 4 options.url = http + //cors-anywhere.herokuapp.com/ + options.url; 

 5 } 

 6 }); 

 7 8 var share_link = “地址”; 

 9 //微信文章地址 

10 $.get( 

11 share_link, 

12 function(response) {14 var html = response; 

15 html = html.replace(/data-src/g, "src"); 

16 var html_src = data:text/html;charset=utf-8, + html;18 $("#iframeID").attr("src", html_src); 

19 });

这个在微信内只能说限制很多，偶发会出现卡死现象，目前的操作是判断是微信，提示在浏览器打开. =_= |||

操作很不好啊

还有单独的处理微信图片的问题，加载微信图片，链接也会有相应问题，微信真是大佬，各种安全操作防护，但我广大人民群众的智慧是伟大的，

因为我这里用的vue，返回的图片有很多是微信文章里的图片，所以操作起来有点麻烦，原理是把图片放在iframe里显示出来，单张图片还好，多张的话window.img会记忆混乱，需要清除。代码如下： 

注:在把处理完成的string放到iframe的src里时,一定要在前面拼上解析码 data:text/html;charset=utf-8, 否则中文会出现乱码

 1 function load(src,id) { 

 2 3 if (src.indexOf("http://mmbiz.qpic.cn") =0) { 
 window.img = ""; 

 4 var url = src; 

 5 var myid = (bigCover+id); 8 var frameid = frameimg + Math.random(); 

 9 window.img =  img src=/ + url + ? + Math.random() + / / ; 

10 document.getElementById(myid).innerHTML =  iframe id=" + frameid + " src="javascript:parent.img;" frameBorder="0" scrolling="no" /iframe ; 

12 } 

13 } 
14 html内img
 div id="bigCover{{item}}" 
15 img v-show="item.picture" :src="index.picture" data-id="{{index}}" onload=load($(this)[0].src,$(this).data("id"))/ 
 /div 

 单个demo是没有问题的

 对于微信的防盗链，第一种解决方法是借助跳板：

借助跳板，直接在图片链接前加上http://read.html5.qq.com/image？src=forum q=5 r=0 imgflag=7 imageUrl=图片地址

    企鹅提供这个反向代理是有白名单的，判断请求是否在白名单内，不就是判断请求头的referrer属性，把referrer设置为空是不是可以绕过这个

所以需要在 head 标签里加 meta name="referrer" content="never" 

http 协议中，如果从一个网页跳到另一个网页，http 头字段里面会带个 Referer。图片服务器通过检测 Referer 是否来自规定域名，来进行防盗链。如果盗用网站是 https 的 protocol，而图片链接是 http 的话，则从 https 向 http 发起的请求会因为安全性的规定，而不带 referer，从而实现防盗链的绕过。

一个完整的demo

 !DOCTYPE html 

 html 

 head 

 meta charset="UTF-8" 

 !-- meta name="referrer" content="never" / -- 

 title /title 

 /head 

 body 

 h1 原图： /h1 

 img src="http://mmbiz.qpic.cn/mmbiz/ibbmVK4uC7iacR4KGWnyJHvQxl276DK6eGlZQ10E7BeY7Fw0ZlnPLXOSF8W4qIiaCsNspcEiaicD0McR79qmicfPGntg/0" / br 

 h1 js破解之后： /h1 

 div id="hotlinking" 

 /div 

 /body 

 script type="text/javascript" 

 function showImg(url) { 

 var frameid = frameimg + Math.random(); 

 window.img =  img id="img" src=/ + url + ? + Math.random() + / / script window.onload = function() { parent.document.getElementById(/ + frameid + /).height = document.getElementById(/img/).height+/px/; }  + /script ; 

 document.write( iframe id=" + frameid + " src="javascript:parent.img;" frameBorder="0" scrolling="no" width="50%" /iframe ); 

 showImg(http://mmbiz.qpic.cn/mmbiz/ibbmVK4uC7iacR4KGWnyJHvQxl276DK6eGlZQ10E7BeY7Fw0ZlnPLXOSF8W4qIiaCsNspcEiaicD0McR79qmicfPGntg/0); 

 /script 

 /html 

尚有不完善的地方需要继续学习

6130.html