分享详解手机开发

占坑保存一部分资源

日后整理

是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&style=11', 
        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 style="height:100%;width:100%;object-fit: cover;" 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 class="bigCover"  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> 
        <br> 
        <img src="http://mmbiz.qpic.cn/mmbiz/ibbmVK4uC7iacR4KGWnyJHvQxl276DK6eGlZQ10E7BeY7Fw0ZlnPLXOSF8W4qIiaCsNspcEiaicD0McR79qmicfPGntg/0" /><br> 
        <h1>js破解之后：</h1> 
        <br> 
        <div id="hotlinking"> 
        </div> 
    </body> 
    <script type="text/javascript"> 
        function showImg(url) { 
            var frameid = 'frameimg' + Math.random(); 
            window.img = '<img id="img" style="width:50%" 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>

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

原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/6130.html

分享详解手机开发

相关推荐

发表回复