Android + HTML開發手機應用 demo 代碼

最近在接觸移動項目，為了能以後可以管理移動項目開發，得學點皮毛，自己也倒弄下android。

由於技術選型使用phoneGap+原生外掛程式，前面學習使用phoneGap，總感覺以後會依賴phoneGap太深，畢竟phoneGap還是一個新的項目，很多效果還是原生的好，最後項目選擇了完全原生開發，組裡也進入了幾個nb層級的人，但是看到他們做一些複雜應用的介面，還是很多介面細節需要程式員自己調整，費時費力，特別是前端介面改動頻繁更是痛苦至極，故而又想到了HTML5做介面，畢竟HTML5來的快，前端就可以一條龍完成，但是又不想用phoneGap，從而有了自己這個demo的方案。

這個demo的介面不要挑剔瑕疵，我不會設計介面，只是自己的一點想法，結合原生和html5實現的。

大體目標是，通訊和演算法，全部放於原生層，而主體介面展示交給HTML5。通過js互調完成資料交換。這樣可以統一通訊介面，便於整合。

每個頁面都會產生一個activity，過度效果都是原生介面，但是不需要開發很多Activity，而是一個或者幾個就足夠了，如下代碼：代碼下載

Activity：webview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"  >
    <WebView
        android:id="@+id/webView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scrollbarStyle="insideOverlay" >
    </WebView>
</LinearLayout>

統一的Activity代碼：

public class AccountActivity extends BaseWebViewActivitiy {
    @Override
    /** Called when the activity is first created. */
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        thisActivity = this;
        setContentView(R.layout.webview);
        initWebView(R.id.webView);

        Intent myIntent = getIntent();
        String page =  myIntent.getStringExtra("page");
        setupWebView(page);
    }

    private void setupWebView(String page) {
        webView.addJavascriptInterface(new JavaScriptInterface(), "caller");
        if("regist".equals(page)){
            loadurl(webView,"file:///android_asset/account/regist.html");
        }else if("forgetpassword".equals(page)){
            loadurl(webView,"file:///android_asset/account/forgetpassword.html");
        }else {
            isRoot = true;
            loadurl(webView,"file:///android_asset/account/login.html");
        }
       
    }
    private class JavaScriptInterface{
        @SuppressWarnings("unused")
        public void regist(){
            Intent myIntent = new Intent(AccountActivity.this, AccountActivity.class);
            myIntent.putExtra("page", "regist");
            AccountActivity.this.startActivity(myIntent);
        }
        @SuppressWarnings("unused")
        public void forgetPassword(){
            Intent myIntent = new Intent(thisActivity, AccountActivity.class);
            myIntent.putExtra("page", "forgetpassword");
            AccountActivity.this.startActivity(myIntent);
            //Toast.makeText(activityThis, tip, Toast.LENGTH_SHORT).show();  
        }
        @SuppressWarnings("unused")
        public void returnlast(){
            AccountActivity.this.finish();
        }
        @SuppressWarnings("unused")
        public void login(){
            UserStatus.getInst().setProfile(new UserProfile());
            Intent myIntent = new Intent(AccountActivity.this, UserActivity.class);
            //myIntent.putExtra("page", "home");
            AccountActivity.this.setResult(RESULT_OK);
            AccountActivity.this.finish ();
        }
    }
}

基類Activity：

public class BaseWebViewActivitiy extends Activity {
    protected WebView webView = null;
    protected Handler mHandler = new Handler();
    protected Activity thisActivity;
    private ProgressDialog pd;
    protected boolean isRoot = false;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    }

    protected void initWebView(int webview){
        webView = (WebView) findViewById(webview);
        mHandler=new Handler(){
            public void handleMessage(Message msg)
            {//定義一個Handler，用於處理下載線程與UI間通訊
              if (!Thread.currentThread().isInterrupted())
              {
                switch (msg.what)
                {
                case 0:
                    pd.show();//顯示進度對話方塊           
                    break;
                case 1:
                    pd.hide();//隱藏進度對話方塊，不可使用dismiss()、cancel(),否則再次調用show()時，顯示的對話方塊小圓圈不會動。
                    break;
                }
              }
              super.handleMessage(msg);
            }
        };
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        webView.setWebViewClient(new WebViewClient(){  
            public boolean shouldOverrideUrlLoading(final WebView view, final String url) {
                loadurl(view,url);//載入網頁
                return true;  
            }//重寫點擊動作,用webview載入
 
        });

        webView.setWebChromeClient(new WebChromeClient(){
            public void onProgressChanged(WebView view,int progress){//載入進度改變而觸發
                 if(progress==100){
                    mHandler.sendEmptyMessage(1);//如果全部載入,隱藏進度對話方塊
                }  
                super.onProgressChanged(view, progress);  
            }  
        });
        pd=new ProgressDialog(thisActivity);
        pd.setProgressStyle(ProgressDialog.STYLE_SPINNER);
        pd.setMessage("資料載入中，請稍候！");
       
    }

    public boolean onKeyDown(int keyCode, KeyEvent event) {//捕捉返回鍵
        if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {  
            webView.goBack();  
            return true;  
        }else if(keyCode == KeyEvent.KEYCODE_BACK){
            ConfirmExit();//按了返回鍵，但已經不能返回，則執行退出確認
            return true;
        }  
        return super.onKeyDown(keyCode, event);  
    }
    private void ConfirmExit(){//退出確認
        if(!isRoot){
            thisActivity.finish();//關閉activity
        }else{
            AlertDialog.Builder ad=new AlertDialog.Builder(thisActivity);
            ad.setTitle("退出");
            ad.setMessage("是否退出軟體?");
            ad.setPositiveButton("是", new DialogInterface.OnClickListener() {//退出按鈕
                public void onClick(DialogInterface dialog, int i) {
                    thisActivity.finish();//關閉activity
                }
            });
            ad.setNegativeButton("否",new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int i) {
                    //不退出不用執行任何操作
                }
            });
            ad.show();//顯示對話方塊
        }
    }
    protected void loadurl(final WebView view,final String url){
        new Thread(){
            public void run(){
                mHandler.sendEmptyMessage(0);
                view.loadUrl(url);//載入網頁
            }
        }.start();
    }
}

javaScript互動代碼：

// JavaScript Document
$(function(){
    $("#btnReturnLogin").bind("click",function(){
        if($.os.android){
            window.caller.returnlast();
        //}else if($.os.ios){
        }else{
            window.open("login.html","_self");
        }
    });
    $("#btnRegist").bind("click",function(){
        if($.os.android){
            window.caller.regist();
        //}else if($.os.ios){
        }else{
            window.open("regist.html","_self");
        }
    });
    $("#btnForget").bind("click",function(){
        if($.os.android){
            window.caller.forgetPassword();
        //}else if($.os.ios){
        }else{
            window.open("forgetpassword.html","_self");
        }
    });
    $("#btnLogin").bind("click",function(){
        if($.os.android){
            window.caller.login();
        //}else if($.os.ios){
        }else{
            window.open("../user/payout.html","_self");
        }
    });
});