混合APP開發的套路(四):在html頁面中開啟專案中的Activity

前面我們學習了android和 網頁(javascript)的互動，互相呼叫函式。
今天我們要來學習，如何在html頁面中開啟安卓專案中的Activity。

1、準備
做一個登入介面。
新建佈局檔案login.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="使用者名稱："
       />
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="請輸入使用者名稱"
        android:id="@+id/login_username"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="密碼："
        />
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:text="請輸入密碼"
        android:ems="10"
        android:id="@+id/login_pwd"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登入"
        android:id="@+id/login_btn"
        android:layout_gravity="center_horizontal"/>
</LinearLayout>

新建登入介面的Activity檔案LoginActivity.java：

package com.example.dev.firtapp;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;

public class LoginActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // 設定佈局
        this.setContentView(R.layout.login);
    }
}

2、需要註冊，在全域性配置檔案裡
AndroidManifest.xml
加入下面內容：

<activity android:name=".LoginActivity">
     <intent-filter>
          <action android:name="android.intent.action.VIEW" />
          <category android:name="android.intent.category.DEFAULT" />
    </intent-filter>
</activity>

3、來到webView的Activity，處理網頁介面邏輯。
WebViewActivity.java：

public class WebViewActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.webview); // 設定layout

        // 建立一個webView元件
        final WebView webView = new WebView(this);
        setContentView(webView);

        // 給webView新增一個js介面
        webView.addJavascriptInterface(this,"www"); // "www"名字可隨意

        // webView相關設定
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        // 載入本地html
        AssetManager assetManager = this.getAssets();
        try {
            InputStream inputStream = assetManager.open("index.html");
            byte[] buffer = new byte[inputStream.available()];
            inputStream.read(buffer);
            // 讀取html內容
            String htmlContent = new String(buffer,"utf-8");
            inputStream.close();

            // 載入到webView中
            webView.loadData(htmlContent,"text/html","utf-8");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }


    @JavascriptInterface
    public void openLogin(){ // 開啟登入框
        this.runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Intent intent = new Intent();
                // 當前是WebViewActivity類，需要開啟的是LoginActivity類
                intent.setClass(WebViewActivity.this, LoginActivity.class);
                startActivity(intent);
            }
        });
    }
}

可以看出：我們載入了index.html這個網頁，並且寫了一個javascript的介面方法openLogin()，該方法裡實現了開啟LoginActivity的業務。

4、在index.html裡

<script>
   function login(){
       // window.www.openLogin();
        www.openLogin();
   }
</script>

 <button onclick="login()"> login</button>