Onelong

分享知识,与你一起进步......
RSS icon Home icon
  • 将web应用迁移到android上

    post by onelong / 2010-8-28 16:02 Saturday [android]

    互联网的发展大多数依赖浏览器来实现的!的确,有了浏览器,很多web应用就将不是pc的专利了!android提供了webkit的开源包,方便我们自定浏览器,当然也提供丰富的开发方式!利用WebView可以使用web json api和实现jsonp,又或者使用jquery在页面上实现一些动画!之前的android QQ不是说的webqq的打包吗!

    package com.hl;

    import android.app.Activity;
    import android.os.Bundle;
    import android.webkit.JsResult;
    import android.webkit.WebChromeClient;
    import android.webkit.WebSettings;
    import android.webkit.WebView;

    public class WebAPI extends Activity {
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            WebView wv=new WebView(this);
            WebSettings wset=wv.getSettings();
            wset.setJavaScriptEnabled(true);
            wset.setSaveFormData(false);
            wset.setSavePassword(false);
            wset.setSupportZoom(false);
            wv.loadUrl("file:///android_asset/j.html");
            //wv.loadUrl("file:///android_asset/s.html");
            wv.setWebChromeClient(new MyWebChromeClient());//设置一个终端了监听js的alert()函数
            wv.setVerticalScrollBarEnabled(false);
            setContentView(wv);   
        }
        final class MyWebChromeClient extends WebChromeClient{
            @Override
            public boolean onJsAlert(WebView view, String url,String message, JsResult result){
              return super.onJsAlert(view, url, message, result);
            }
          }
    }

    html代码:

    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="jquery.js" type="text/javascript"></script>
    <title>demo</title>
    </head>

    <body style="background:#000; color:#333;">
    <input type="text" id="ip" />
    <input type="button" value="test" onclick="getMsg()" />
    <div></div>
    <script type="text/javascript">
     $("div").hide().css({background:'#EEE',width:'478px',margin:'10px 0 0',padding:'5px 10px',border:'1px solid #CCC' });
    function getMsg(){
     var url='http://coosola.com/api/ip/?type=json&q='+$('#ip').val();
     $.getJSON(url,function(data){
      $("div")
      .hide(200)
      .html("你查询的ip是:"+data.country+data.city).show(500);
      });
       alert("完成了!");
     }
    </script>
    </body>

    </html>

    点击查看原图

    这个就是实现ip归属地查询的页面了!

    至于这些web api怎样使用的呢?http://coosola.com/api

    附带上源码的吧!界面可能做得不好,毕竟这是一个演示而已

    asset文件夹下面有两个html文件,s.html是用于翻译的:简体中文-》英语;j.html就是ip查询的!有兴趣的体验一下吧!开发android不是Java程序员的专利!web开发者也可以拥有自己的发挥空间

    附件下载:
    WebAPI.rar 98.28KB

    引用地址:
     

    我要评论