网页css js 抓取助手(一下这些API都应该怎么使用？(图)API)

　　网页css js 抓取助手(一下这些API都应该怎么使用？(图)API)

　　写了几篇关于微信内置浏览器（WebView）特有的Javascript API（Javascript接口）的文章文章，但是随着微信官方的调整，有些API已经不能直接使用了，比如直接分享对朋友圈WeixinJSBridge.invoke('shareTimeline',data,callback)这样的函数，直接调用会得到拒绝访问的响应。后来又重新研究了一下，整理出了一个WeixinAPI Javascript类库，分享给大家。如果你对微信公众平台的开发感兴趣，应该对你有用。

　　/**!

 * 微信内置浏览器的Javascript API，功能包括：

 *

 * 1、分享到微信朋友圈

 * 2、分享给微信好友

 * 3、分享到腾讯微博

 * 4、隐藏/显示右上角的菜单入口

 * 5、隐藏/显示底部浏览器工具栏

 * 6、获取当前的网络状态

 * 7、调起微信客户端的图片播放组件

 *

 * @author zhaoxianlie(http://www.baidufe.com)

 */

var WeixinApi = (function () { 

    /* 这里省略了一堆代码……下面直接看调用接口 */ 

    return {

        ready           :wxJsBridgeReady,

        shareToTimeline :weixinShareTimeline,

        shareToWeibo    :weixinShareWeibo,

        shareToFriend   :weixinSendAppMessage,

        showOptionMenu  :showOptionMenu,

        hideOptionMenu  :hideOptionMenu,

        showToolbar     :showToolbar,

        hideToolbar     :hideToolbar,

        getNetworkType  :getNetworkType,

        imagePreview    :imagePreview

    };    

});

　　接下来，让我们看看这些API应该如何使用，从最简单的开始。

　　1、如果我想一打开网页就隐藏右上角的PopUp菜单项，隐藏浏览器底部的工具栏，同时也获取当前的网络状态，那么我们的代码可以是像这样写：

　　// 所有功能必须包含在 WeixinApi.ready 中进行

WeixinApi.ready(function(Api){

    // 隐藏右上角popup菜单入口

    Api.hideOptionMenu();

    // 隐藏浏览器下方的工具栏

    Api.hideToolbar();

    // 获取网络状态

    Api.getNetworkType(function(network){

        // 拿到 network 以后，做任何你想做的事

    });

});

　　如示例代码中的注释所示，所有函数执行都必须在 WeixinApi.ready 方法中执行，就像在使用 jQuery 时，通常需要使用 jQuery(document).ready(function(){ }) 一样. 为什么要这样做？相信不用我解释大家都能理解，因为我们必须保证在执行这些方法的时候，WebView中已经添加了WeixinJsBridge API！

　　2、再看一个分享的例子，如果用户在阅读我的文章（或使用我的产品）的过程中发现它有趣或有价值，他们一般会采集或分享（给朋友、朋友圈、微博等），那么现在我希望监控用户的分享行为，比如：自定义用户可以分享的内容，即使用户分享了，取消分享，分享失败，分享成功，整个分享操作过程就结束了，大家都做点什么。所以，我们可以这样写代码：

　　// 所有功能必须包含在 WeixinApi.ready 中进行

WeixinApi.ready(function(Api){

    // 微信分享的数据

    var wxData = {

        "imgUrl":'http://www.baidufe.com/fe/blog/static/img/weixin-qrcode-2.jpg',

        "link":'http://www.baidufe.com',

        "desc":'大家好，我是Alien，Web前端&Android客户端码农，喜欢技术上的瞎倒腾！欢迎多交流',

        "title":"大家好，我是赵先烈"

    };

    // 分享的回调

    var wxCallbacks = {

        // 分享操作开始之前

        ready:function () {

            // 你可以在这里对分享的数据进行重组

        },

        // 分享被用户自动取消

        cancel:function (resp) {

            // 你可以在你的页面上给用户一个小Tip，为什么要取消呢？

        },

        // 分享失败了

        fail:function (resp) {

            // 分享失败了，是不是可以告诉用户：不要紧，可能是网络问题，一会儿再试试？

        },

        // 分享成功

        confirm:function (resp) {

            // 分享成功了，我们是不是可以做一些分享统计呢？

        },

        // 整个分享过程结束

        all:function (resp) {

            // 如果你做的是一个鼓励用户进行分享的产品，在这里是不是可以给用户一些反馈了？

        }

    };

    // 用户点开右上角popup菜单后，点击分享给好友，会执行下面这个代码

    Api.shareToFriend(wxData, wxCallbacks);

    // 点击分享到朋友圈，会执行下面这个代码

    Api.shareToTimeline(wxData, wxCallbacks);

    // 点击分享到腾讯微博，会执行下面这个代码

    Api.shareToWeibo(wxData, wxCallbacks);

});

　　3、当然，如果你的业务需求比较复杂，比如你的产品是微信网页游戏（类似于“2048数字游戏微信版”），你希望用户分享的数据是截图一个网页，或者一个将用户当前的游戏状态发送回服务器，以动态生成可分享的内容；在这种情况下我们应该怎么做？看看下面的示例代码：

　　// 所有功能必须包含在 WeixinApi.ready 中进行

WeixinApi.ready(function(Api){

    // 分享的回调

    var wxCallbacks = {

        // 分享过程需要异步执行

        async : true,

        // 分享操作开始之前

        ready:function () {

            var self = this;

            // 假设你需要在这里发一个 ajax 请求去获取分享数据

            $.post(yourServerUrl,yourPostData,function(responseData){

                // 可以解析reponseData得到wxData

                var wxData = responseData;

                // 调用dataLoaded方法，会自动触发分享操作

                // 注意，当且仅当 async为true时，wxCallbacks.dataLoaded才会被初始化，并调用

                self.dataLoaded(wxData);

            });

        }

        /* cancel、fail、confirm、all 方法同示例2，此处略掉 */

    };

    // 用户点开右上角popup菜单后，点击分享给好友，会执行下面这个代码

    Api.shareToFriend({}, wxCallbacks);

});

　　唯一不同的是，在wxCallbacks中，配置项async被添加为true，表示共享进程是异步调用的。其实就是说ready方法是异步执行的。在这种情况下，我们需要在 ready 方法中显式调用它。wxCallbacks的dataLoaded方法保证共享进程可以继续执行。可能你会发现这个wxCallbacks里面并没有配置dataLoaded方法！是的，当 async 为 true 时，我会在 WeixinApi 中自动初始化。dataLoaded 方法需要一个参数，表示需要共享的数据！

　　4、当然，如果非要配置dataLoaded方法也没问题。您的配置也将被执行并且不会被覆盖。执行顺序为：用户配置优先。

　　以上是直接给出使用方法。也许您现在开始关心每个方法的参数列表是什么样的？我们以分享到朋友圈的方法为例，看看参数有哪些配置项：

　　/**

 * 分享到微信朋友圈

 * @param       {Object}    data       待分享的信息

 * @p-config    {String}    appId      公众平台的appId（服务号可用）

 * @p-config    {String}    imageUrl   图片地址

 * @p-config    {String}    link       链接地址

 * @p-config    {String}    desc       描述

 * @p-config    {String}    title      分享的标题

 *

 * @param       {Object}    callbacks  相关回调方法

 * @p-config    {Boolean}   async                   ready方法是否需要异步执行，默认false

 * @p-config    {Function}  ready(argv)             就绪状态

 * @p-config    {Function}  dataLoaded(data)        数据加载完成后调用，async为true时有用

 * @p-config    {Function}  cancel(resp)    取消

 * @p-config    {Function}  fail(resp)      失败

 * @p-config    {Function}  confirm(resp)   成功

 * @p-config    {Function}  all(resp)       无论成功失败都会执行的回调

 */

WeixinApi.shareToTimeline(data,callbacks);

　　分享给微信朋友和分享给腾讯微博的参数列表是一样的，这里就不一一列举了。

　　5、如果你的文章里面有很多图片，那么点击图片直接调出微信客户端自带的图片播放组件一定是件好事；你可以这样做 ：

　　// 调起微信客户端的图片播放组件进行播放

WeixinApi.ready(function(Api){

    var srcList = [];

    $.each($('img'),function(i,item){

       if(item.src) {

           srcList.push(item.src);

           $(item).click(function(e){

               // 通过这个API就能直接调起微信客户端的图片播放组件了

               Api.imagePreview(this.src,srcList);

           });

       }

    });

});

　　就这么简单的一段代码，一切就搞定了！不过需要指出的是，Api.imagePreview的参数会被强检测：

　　/**

 * 调起微信Native的图片播放组件。

 * 这里必须对参数进行强检测，如果参数不合法，直接会导致微信客户端crash

 *

 * @param {String} curSrc 当前播放的图片地址

 * @param {Array} srcList 图片地址列表

 */

function imagePreview(curSrc,srcList) ;

　　需要指出的是，微信公众平台并没有统一支持Android和iOS平台，比较费力。具体有：

　　期待早日正式实现各平台API的统一！！！

　　至于API内部是如何实现的，有兴趣的可以看下源码。如果您在使用过程中遇到任何错误，请来这里反馈。

　　为了方便Api的维护和分享，已经放到了Github上。让我们从这里开始：