Willy's Fish教學筆記』

今天要來講的主題是 Web 與 Android 的溝通
Android 可以與 JavaScript 互相溝通
調用彼此的 function 來做一些 native 的事情
比如說跳 Toast 訊息、傳推播…等。

而 WebSorage 則是 HTML5 後來支援的技術
可以把資料存在本地端，大小的限制因瀏覽器的不同而有區別
但基本上不會少於 5MB，是一個滿方便的功能。

第一步，我們要先幫 WebView 做些設定
code 如下：

WebView mWebView = (WebView) findViewById(R.id.mWebView);
mWebView.loadUrl("file:///android_asset/mWeb.html");

mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.addJavascriptInterface(
         new InSQLite(this),"AppInSQLite");

這是我要讓 Javascript 可以把資料存進 SQLite 所做的範例
記得要把 Javascript & WebStorage 的設定打開
不然我們的 WebView 會跑到一半就停了, 而且不會提示原因的唷
最後一行的第一個參數是給 Javascript 溝通的 Interface
第二個參數則是在 Javascript 中使用時所用的名字
我的 Interface 類如下：

class InSQLite implements JavascriptInterface{

    Context context;

    public InSQLite(Context context) {
        this.context = context;
    }

    @Override
    public Class<? extends Annotation> annotationType() {
        return null;
    }

    @JavascriptInterface
    public void add (String name,String email) {
        //將 name 與 email 存入 db
    }

    @JavascriptInterface
    public String searchName (String searchName){
        //在 SQLite 搜尋 name，回傳 email String
    }

    @JavascriptInterface
    public void showToast(String message){
        Toast.makeText(
        context,message,Toast.LENGTH_SHORT).show();
    }
}

上面省略了 SQLite 的 code
主要就是介紹如何從 Javascript call function 並傳遞參數
可以來拿溝通的 function 上面都有 @JavascriptInterface 的字樣
那代表 Javascript 可以使用這個 function
我們可以依自己需求去定義合適的 function
那麼就來看看 Javascript 中要如何使用吧

<script>
function mySearchNameFun(){
   var returnName = AppInSQLite.searchName(
       document.getElementById("searchNameStr").value);
   AppInSQLite.showToast(returnName);
}
</script>

這裡列出了一小段 code
動作是我先搜尋之後
用 Toast 來看結果

可以看到上面有我們剛剛定義的 "AppInSQLite"
並用上了 searchName & showToast 的方法
使用上很簡單、很直覺
那麼就讓我們趕快試試看吧!

參考資料：
https://stackoverflow.com/questions/5899087/android-webview-localstorage