代码改变世界

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

2012-12-05 18:25 onm 阅读(...) 评论(...) 编辑 收藏
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,这里就不多写了。