Android日常開發(fā)中，常常會遇到加載H5頁面的情況，于是少不了與H5頁面的交互問題。具體表現在Android調用H5代碼及H5中調用Android代碼兩種情況。

測試頁面

test.png

這里我們首先編寫上圖所示的測試頁面，在MainActivity中初始化各組件

private void initView() {

mLoginLayout = findViewById(R.id.login_layout);

mUserName = findViewById(R.id.edit_user_name);

mPassword = findViewById(R.id.edit_password);

mWebView = findViewById(R.id.web_view);

}

Android調用H5

要點：

WebView.loadUrl("javascript:method(" + "'" + param+ "'" + ")");

Android調用H5時，首先創(chuàng)建WebView頁面，初始化完成后，調用loadUrl方法，其參數有固定格式，以“javascript：”開頭，表示調用javasript代碼，后面接在H5中自己定義的method方法，如有參數須像上面那樣前后再用單引號括起來。

初始化WebView

private void initWebView() {

WebSettings settings = mWebView.getSettings();

// 設置啟用JavaScript功能

settings.setJavaScriptEnabled(true);

mWebView.setWebViewClient(new WebViewClient());

mWebView.loadUrl("file:///android_asset/index.html");

}

將已經寫好的index.html文件放在assets目錄下，通過loadUrl方法加載進來。

點擊登錄跳轉到H5頁面，并在H5頁面中顯示輸入的用戶名。

public void login(View view) {

String userName = mUserName.getText().toString().trim();

String password = mPassword.getText().toString().trim();

login(userName, password);

}

private void login(String userName, String password) {

if(!TextUtils.isEmpty(password) && TextUtils.equals("123456", password)) {

mWebView.loadUrl("javascript:login(" + "'" + userName + "'" + ")");

mWebView.setVisibility(View.VISIBLE);

mLoginLayout.setVisibility(View.GONE);

} else {

Toast.makeText(this, "密碼輸出錯誤", Toast.LENGTH_SHORT).show();

}

}

效果如下：

H5.png

H5調用Android

要點：

Android中：WebView調用addaddJavascriptInterface方法，JsInterface為H5回調類，自定義名稱，tag與H5中js代碼window后的tag名稱一致即可。JsInterface中回到方法method()記得添加@JavascriptInterface標記。

WebView.addJavascriptInterface(new JsInterface(), tag);

private class JsInterface {

@JavascriptInterface

public void method() {

}

}

H5中：onclick()方法中使用window開頭，表示調用Android方法，tag與前面保持一致，method為Android中的回調方法，可傳參。

退出登錄

完整代碼

MainActivity：

public class MainActivity extends AppCompatActivity {

private View mLoginLayout;

private TextView mUserName;

private TextView mPassword;

private WebView mWebView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initView();

initWebView();

}

private void initView() {

mLoginLayout = findViewById(R.id.login_layout);

mUserName = findViewById(R.id.edit_user_name);

mPassword = findViewById(R.id.edit_password);

mWebView = findViewById(R.id.web_view);

}

private void initWebView() {

WebSettings settings = mWebView.getSettings();

// 設置啟用JavaScript功能

settings.setJavaScriptEnabled(true);

mWebView.setWebViewClient(new WebViewClient());

mWebView.addJavascriptInterface(new JsLogoutInterface(), "android");

mWebView.loadUrl("file:///android_asset/index.html");

}

public void login(View view) {

String userName = mUserName.getText().toString().trim();

String password = mPassword.getText().toString().trim();

login(userName, password);

}

private void login(String userName, String password) {

if(!TextUtils.isEmpty(password) && TextUtils.equals("123456", password)) {

mWebView.loadUrl("javascript:login(" + "'" + userName + "'" + ")");

mWebView.setVisibility(View.VISIBLE);

mLoginLayout.setVisibility(View.GONE);

} else {

Toast.makeText(this, "密碼輸出錯誤", Toast.LENGTH_SHORT).show();

}

}

private class JsLogoutInterface {

@JavascriptInterface

public void logout() {

Toast.makeText(MainActivity.this, "退出成功", Toast.LENGTH_SHORT).show();

runOnUiThread(new Runnable() {

@Override

public void run() {

mWebView.setVisibility(View.GONE);

mLoginLayout.setVisibility(View.VISIBLE);

}

});

}

}

}

布局文件activity_main.xml：

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

tools:context=".MainActivity">

android:id="@+id/login_layout"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

android:id="@+id/user_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="15dp"

android:text="用戶名："

android:textSize="16sp"

android:textColor="@android:color/black"

/>

android:id="@+id/edit_user_name"

android:layout_width="80dp"

android:layout_height="wrap_content"

android:layout_alignBottom="@+id/user_name"

android:layout_toRightOf="@+id/user_name"

android:layout_marginBottom="-8dp"

/>

android:id="@+id/password"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignRight="@+id/user_name"

android:layout_below="@+id/user_name"

android:layout_marginTop="15dp"

android:text="密碼："

android:textSize="16sp"

android:textColor="@android:color/black"

/>

android:id="@+id/edit_password"

android:layout_width="80dp"

android:layout_height="wrap_content"

android:layout_alignBottom="@+id/password"

android:layout_toRightOf="@+id/password"

android:layout_marginBottom="-8dp"

/>

android:id="@+id/login_button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/password"

android:layout_marginTop="20dp"

android:layout_marginLeft="30dp"

android:text="登錄"

android:onClick="login"

/>

android:id="@+id/web_view"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:visibility="gone"

/>

index.html:

Home

#user {

font-size: 20px;

color: red

}

function login(userName) {

document.getElementById("user").innerHTML = userName;

}

當前用戶為：

退出登錄

總結

以上是生活随笔為你收集整理的android 和h5交互,Android中与H5的交互的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。