用PhoneGap做一个手机微博客户端

PhoneGap很多人都知道了，是一个跨平台的手机应用开发框架，使用html，js等技术制作应用。在不远也不近的前段时间，我尝试着写了一个微博客户端软件。 做一个简单的微博客户端，大概就两件事情，一个是界面，另一个就是访问微博接口来获取数据。 界面的问题，我使用jquery mobile来解决。 获取数据的问题，使用微博开放平台来解决。（下面的内容假设读者知道一些微博开放平台的基本内容）首先要获取用户的授权，也就是做OAuth验证，新浪微博目前采用OAuth2验证方式，做OAuth2验证的实现手段有几种，比如说新浪移动云采用的，仿照PhoneGap Facebook Plugin做的Weibo Plugin插件，这种做法是集成了官方提供的对应平台的SDK，然后再自己封装PhoneGap的插件。这种插件其实很好写，对外暴露的js接口只是一层对SDK相应接口的调用，实际的事情都是SDK里面去做。这种做法的有点就是简单，缺点是过重。 另一种方法是，基于PhoneGap的childBrowser插件来做，可以很简单方便轻量的的做好此事。childBrowser是一个用来显示网页的单独的子窗口，可以用它来写访问的oauth验证接口的逻辑。 oauth验证的目的是用户授权，获取access_token等参数。新浪微博的oauth2授权机制说明可以参看这个文档：http://t.cn/zWgMZl6，新浪微博开放平台提供了这样一个接口（大写单词为需要替换的变量，下同），https://api.weibo.com/oauth2/authorize?client_id=YOUR_CLIENT_ID&response_type=token&redirect_uri=YOUR_REGISTERED_REDIRECT_URI，这个接口访问成功后后会回调下面这个地址：YOUR_REGISTERED_REDIRECT_URI/#access_token=ACCESS_TOKEN&expires_in=3600，在这个回调的url地址中带着access_token等参数，也就是我们需要访问微博API接口必须的参数。常规的Web站点在设置正确的回调地址后，会跳转到你填写的站点的地址，但是这里的问题是PhoneGap是本地页面，这个回调地址没法回到你的本地页面。所以可以通过获取这个回调的url，然后从中取出这些想要的参数。使用childBrowser可以方便的做到。childBrowser有个onLocationChange方法，监听浏览器location的改变。可以用childBrowser去访问这个授权地址，然后当回调地址跳转发生时，通过onLocationChange方法拦截这个地址，提取access_token等参数。这样就得到了授权后的到access_token等信息。 示例代码：

function login() {
    var redirect_uri = "http://phonegapoauth.sinaapp.com";
    var encode_redirect_uri = encodeURIComponent(redirect_uri);
    var url = "https://api.weibo.com/oauth2/authorize?display=mobile&client_id=3808126424&response_type=token&redirect_uri=" + encode_redirect_uri;
    plugins.childBrowser.showWebPage(url, {
        showLocationBar: false
    });
    plugins.childBrowser.onLocationChange = function (location) {
        console.log("location: " + location);
        if (location.indexOf(redirect_uri) & gt; = 0) {
            var values = location.match("access_token=(.*)&remind_in=(.*)&expires_in=(.*)&uid=(.*)");
            var access_token = values[1];
            var remind_in = values[2];
            var expires_in = values[3];
            var uid = values[4];
            document.getElementById("content")
                .innerText = "access_token: " + access_token;
            plugins.childBrowser.close();
        } else {
            console.log("other");
        }
    };
}

有了access_token等以后，就可以方便的进行微博的接口调用了，微博的接口文档地址：http://t.cn/aF4zI1。例如使用jQuery访问public_timeline接口，接口将会返回json数据。 示例代码：

$.get("https://api.weibo.com/2/statuses/public_timeline.json", {
    access_token: "2.0062PdpBm15MGD37a38e2787N6pVdE"
},

function (response) {
    alert(JSON.stringify(response));
});

对于微博开放平台的更多细节，可以参考开放平台的文档。也可以参看我开源在github上的这个微博应用tinybo，https://github.com/qhm123/tinybo。 有关PhoneGap上实现OAuth的更多方法和细节，可以参看：http://blog.qhm123.com/2012/07/29/phonegap-implement-sina-weibo-oauth2.html，有关tinybo中更多的技术说明可以参看：http://blog.qhm123.com/2012/10/7/develop-mobile-web-app-tools-experience.html，这里就不多写了。