Web App設計- Web 和Android的互動技巧

上圖是Android官方網站介紹如何在手機上利用HTML, CSS等網頁技術來設計Web APPs，最簡單的方法和傳統的PC瀏覽網頁一樣，使用一般的網頁設計，把網頁放在伺服器上，然後利用瀏覽器來閱讀，如上圖左邊方式。今天我們要來討論的是如何整合網頁及Android APP，如上圖右邊的方式，這種方式有一種讓人期待和創新的設計。

1. 先建立一個專案

2. 刪除TextView，新增WebView

3. 修改程式

package com.example.webtest;

import android.os.Bundle;

import android.app.Activity;

import android.webkit.WebSettings;

import android.webkit.WebView;

public class MainActivity extends Activity {

    WebView web;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        web = (WebView) findViewById(R.id.webView1);

        WebSettings webSettings = web.getSettings();

        webSettings.setJavaScriptEnabled(true);

        web.loadUrl("file:///mnt/sdcard/test.html");

        web.addJavascriptInterface(new JavaScriptInterface(this), "Android");

       

    }

 

}

4. 新增JavaScriptInterface.java，並加入下列程式。

package com.example.webtest;

import android.content.Context;

import android.widget.Toast;

public class JavaScriptInterface {

    Context mContext;

    /** Instantiate the interface and set the context */

    JavaScriptInterface(Context c) {

        mContext = c;

    }

    /** Show a toast from the web page */

    public void showToast(String toast) {

        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();

    }

}

5. 在AndroidManifest.xml檔中加入Internet使用權限。

6.用記事本編輯，並儲存為test.html