zoukankan      html  css  js  c++  java
  • 微信分享到朋友圈的脚本奥秘(转)

    微信最近推出的一个社交工具网站 www.faxinxi.la ,能发投票、活动、文章。

    但在微信外的浏览器包括PC端和移动端的都无法浏览这个网站任何内容,那是通过什么来控制的呢?通过微信内输出特定JS接口不太可能,那就只能通过Header信息里的User-agent了,实验后证实没错,通过探测可以知道微信内的User-agent信息:

    Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B329 MicroMessenger/5.0.1

    就是通过识别MicroMessenger这个关键字来确定是否来自微信,通过浏览器的user-agent插件就可以轻松绕过这个限制。

    接下来就可以轻松获得www.faxinxi.la的网页源码,其实这不是一个微信官方的应用,服务端是用ASP.NET写的,而且是IIS服务器,有没有注入漏洞就不知道了,不过注入了也没什么实际价值,呵呵。

    为什么要挖掘他的网页源码呢,这才是关键。譬如你发一个投票,网址是http://www.faxinxila.com/post/vote, 但你填完所有信息按提交后,网页地址并没有发生跳转,而是ajax提交信息后弹出一个遮罩层,提示你点右上角的分享按钮,注意,点分享前网址一直保持在 /post/vote路径,但点开分享里的信息已经发生了变化,分享出去后,网址也发生了变化,变成了/vote/3投票实际的展示路径。 这是怎么做到的呢?

    查看faxinxi里唯一js文件,你会发现一个WeixinJSBridge的输出对象,再对比下通过微信公众平台发出来的文章源文件,也有 WeixinJSBridge对象脚本,问题迎刃而解,微信在内嵌webview里输出了WeixinJSBridge对象供web端js调用。 faxinxi已经将有用的js提取出来了,详细脚本如下:

    var dataForWeixin={
       appId:"",
       MsgImg:"http://img1.faxinxila.net/images/share_msg.png",
       TLImg:"http://img1.faxinxila.net/images/share.png",
       url:"http://faxinxi.la/vote/1",
       title:"input title here",
       desc:"input description here",
       fakeid:"",
       callback:function(){}
    };
    (function(){
       var onBridgeReady=function(){
       WeixinJSBridge.on('menu:share:appmessage', function(argv){
          WeixinJSBridge.invoke('sendAppMessage',{
             "appid":dataForWeixin.appId,
             "img_url":dataForWeixin.MsgImg,
             "img_width":"120",
             "img_height":"120",
             "link":dataForWeixin.url,
             "desc":dataForWeixin.desc,
             "title":dataForWeixin.title
          }, function(res){(dataForWeixin.callback)();});
       });
       WeixinJSBridge.on('menu:share:timeline', function(argv){
          (dataForWeixin.callback)();
          WeixinJSBridge.invoke('shareTimeline',{
             "img_url":dataForWeixin.TLImg,
             "img_width":"120",
             "img_height":"120",
             "link":dataForWeixin.url,
             "desc":dataForWeixin.desc,
             "title":dataForWeixin.title
          }, function(res){});
       });
       WeixinJSBridge.on('menu:share:weibo', function(argv){
          WeixinJSBridge.invoke('shareWeibo',{
             "content":dataForWeixin.title,
             "url":dataForWeixin.url
          }, function(res){(dataForWeixin.callback)();});
       });
       WeixinJSBridge.on('menu:share:facebook', function(argv){
          (dataForWeixin.callback)();
          WeixinJSBridge.invoke('shareFB',{
             "img_url":dataForWeixin.TLImg,
             "img_width":"120",
             "img_height":"120",
             "link":dataForWeixin.url,
             "desc":dataForWeixin.desc,
             "title":dataForWeixin.title
          }, function(res){});
       });
    };
    if(document.addEventListener){
       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    }else if(document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady'   , onBridgeReady);
       document.attachEvent('onWeixinJSBridgeReady' , onBridgeReady);
    }
    })();
    

     转至:http://blog.4wer.com/wechat-timeline-share

  • 相关阅读:
    迷你版jQuery——zepto核心源码分析
    zepto.js 源码解析
    zepto.js swipe实现触屏tab菜单
    zepto.js 处理Touch事件
    Zepto 使用中的一些注意点(转)
    判断js对象的数据类型,有没有一个最完美的方法?
    html 5 本地数据库(Web Sql Database)核心方法openDatabase、transaction、executeSql 详解
    HTML5本地存储——Web SQL Database
    js事件监听器用法实例详解-注册与注销监听封装
    10 个非常有用的 AngularJS 框架
  • 原文地址:https://www.cnblogs.com/lichuntian/p/4617947.html
Copyright © 2011-2022 走看看