Jsoup+JqueryMobile——邻居的耳朵B/S移动版小试

　　“邻居的耳朵是一片干净的心灵栖息地，没有广告及盈利，它属于来到这里的每个人。邻居的耳朵是一群在互联网音乐服务界奋斗的理想不死的音乐青年们的集体博客，基于WordPress平台的一个小众音乐赏欣网站。这些博文的作者都很牛逼。整体性的专辑越来越少，凑数赚钱的越来越多但网站力求做到：有观点的聆听，有真实的情感，有独立的判断以及来自我心的推荐。”

　　这是来关于邻居的耳朵这个网站的简介（自百度百科）。网站基于WordPress平台，可能是这个原因，所以，它一直没有一个正经的移动客户端。

　　早就有了要开发一个移动端的冲动，苦于技术有限就一直搁置了下来。虽然近期管理员“花花”的离开让我有些惆怅，但因为新项目的一些研究，让我有了新的思路可以继续网站移动端的畅想。。。

首先是，Jsoup：

　　这是一个开源Jar包，地址在这里http://jsoup.org/，还有个中文的：http://www.open-open.com/jsoup/。它可以让我轻而易举的通过url读取到html网页的内容，并且提取到我想要的数据。以对邻居的耳朵首页内容解析为例，代码如下：

/**
 * 得到首页文章数据
 * @param url (http://kxt.fm/)
 * @return
 */
public List<Article> getFrontPageData(String url) {
    List<Article> list = new ArrayList<Article>();
    Article a = null;
    Document doc = null;
    try {
        doc = Jsoup.connect(url).get();//通过url得到页面内容
        Elements posts = doc.getElementsByClass("post"); 
        for (int i = 0; i < posts.size(); i++) {
            a = new Article();
            Element post = posts.get(i);
            String link = post.getElementsByTag("a").attr("href");//全文内容链接
            String title = post.getElementsByClass("title").first()//标题
                            .getElementsByTag("a").text();
            String imgLink = post.getElementsByTag("img").attr("src");//图片链接
            String entry = post.getElementsByClass("entry").first()//内容摘要
                            .getElementsByTag("p").text();
            
            a.setLink(link);
            a.setTitle(title);
            a.setImgUrl(imgLink);
            a.setEntryShort(entry);
            list.add(a);
        }
    } catch (IOException e) {
        e.printStackTrace();
    }
    return list;
}

自己封装一个类，把首页文章列表中的内容逐个读出来。就是这么简单。。。看到方法中的getElementsByClass用起来像JS一样，简直太轻松加愉快了。

WordPress网页内容相对规范，所以解析起来也容易的很。帖子内容页面的解析跟上面的类似。只要解决了音乐播放问题（原网站音乐文件地址好像有防盗链设置）。

其次是，JqueryMobile

在移动开发组里混了将近一年半，现在移动开发似乎没有之前那样叫的火热了。而且大量的移动产品集中在CS架构，的确有它的优势。不过对于像我这种小股低技术小成本的研究来说，JqueryMobile可以帮我轻松解决各移动设备的兼容问题，同时又保证了界面风格统一，和适当的美观，偶尔尝试，还是不错的。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<!-- 这是关于下面一行代码的解释，这行是有必要的，更详细的可以去jquery那里找喽。。
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
 -->
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>无标题文档</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div data-role="header" data-position="fixed">
        <h1>邻居的耳朵</h1>
        <a data-icon="arrow-l" data-iconpos="left" class="ui-btn-left"class="ui-btn-left" href="#">上一页</a>
    </div>
    <!-- 内容 -->
    <div data-role="content">    
        <ul data-role="listview">
            <li>
                <a data-ajax="false" href="">
                    <img src="" />
                    <h4>文章标题</h4>
                    <p>内容摘要。。。</p>
                </a>
            </li>
            <li>
                <a data-ajax="false" href="">
                    <img src="" />
                    <h4>文章标题2</h4>
                    <p>内容摘要2。。。</p>
                </a>
            </li>
        </ul>
    </div>
    <!-- 底部 -->
    <div data-role="navbar" data-position="fixed">
           <ul>
               <li>
                   <a id="homePage" href="#" class="ui-state-persist">首 页</a>
               </li>
               <li><a id="radio" href="#">有声电台</a></li>
               <li><a id="moreType" href="#">更多分类</a></li>
           </ul>
       </div>
  </body>
</html>

上面是一个静态的DEMO把前面JSOUP读到的数据动态放进来就OK了。可以ajax，也可以jsp，看个人习惯了。。。jquery的ajax还是挺好用的。。。

从代码中可以看得出，JqueryMobile还是挺简的，引入必要的js文件，三个div分出上中下。实在不行可以用JqueryMobile提供的编辑器，鼠标拖一下，代码下载下来，轻松搞定。

最终，完成的各界面效果如下（小米手机自带浏览器全屏模式下截图）：

posted on 2012-11-30 11:39 Durton 阅读(427) 评论(2) 收藏举报

刷新页面返回顶部

Durton

Jsoup+JqueryMobile——邻居的耳朵B/S移动版小试

公告

导航