如今React Native都紅火了一年多了南用，現(xiàn)在還整WebView 和 JavaScript這些掏湾？ 哈哈，事情總有個循序漸進(jìn)融击，況且現(xiàn)在這個還是主流處理方案吧，大家還是有必要了解的匣屡，文章很基礎(chǔ)拇涤，高手輕噴。
Demo動圖演示
動圖鎮(zhèn)樓鹅士，演示功能點的順序是：5-1-2-3-4
功能點動圖演示
怎么生成我們需要的 HTML 頁面？
當(dāng)我們get了WebView 和 JavaScript交互的技能時也拜，準(zhǔn)備躍躍欲試的時候趾痘，就會對這個被這個問題搞懵逼了，他娘的我又不是前端岸军，要我立馬寫個自己想要的HTML頁面臣妾真的辦不到啊。
w3school 是什么艰赞？
是什么？你咋不點進(jìn)去看看呢狭魂？
我們需要的 HTML 頁面
按照w3school的簡單教程我們就可以拼湊出我們所需要的頁面了，如下圖党觅。
我們需要的 HTML 頁面
我們要實現(xiàn)的5個功能
- Android Native 端調(diào)用 HTML 中的 javascript 腳本
- Android Native 端調(diào)用 HTML 中的 javascript 腳本并傳遞參數(shù)
- HTML 中的 javascript 腳本調(diào)用 Android Native 端的函數(shù)
- HTML 中的 javascript 腳本調(diào)用Android Native 端的函數(shù)并傳遞參數(shù)
- HTML 中的 javascript 腳本與 Android Native端的 Java 代碼完整交互流程
Android Native 端調(diào)用 HTML 中的 js 腳本
該例子中Android Native 端的 java 代碼會直接調(diào)用 HTML 頁面中的js 腳本杯瞻，實現(xiàn)更改 HTML 頁面 subtitle 的功能。
Android Native 端的代碼為：
mCallJsBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mCallJsWithArgsBtn.setText("Native調(diào)用WebView的有參JS腳本");
mWebView.loadUrl("javascript:changeDemoSubtitle()");
}
});
HTML 對應(yīng)的 js 方法是：
function changeDemoSubtitle(){
document.getElementById("subtitle").innerHTML="我加了點料";
}
Android Native 端調(diào)用 HTML 中的 js 腳本并傳遞參數(shù)
Android Native 端的代碼為：
mCallJsWithArgsBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mCallJsWithArgsBtn.setText("參數(shù)為：" + showDevInfo());
showDevInfoToH5();
}
});
private String showDevInfo() {
return "showDevInfo('手機(jī)型號:" + android.os.Build.MODEL +
",SDK版本:" + android.os.Build.VERSION.SDK +
",系統(tǒng)版本:" + android.os.Build.VERSION.RELEASE + "')";
}
private void showDevInfoToH5() {
mWebView.loadUrl("javascript:" + showDevInfo());
}
HTML 對應(yīng)的 js 方法是：
function showDevInfo(info){
document.getElementById("subtitle").innerHTML=info;
}
HTML 中的 javascript 腳本調(diào)用 Android Native 端的函數(shù)
HTML 對應(yīng)的 js 方法是：
function disp_confirm(){
confirm();
}
Android Native 端的代碼為：
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
Toast.makeText(MainActivity2.this, "Android_Native_Toast!", Toast.LENGTH_SHORT).show();
}
result.confirm();
return true;
}
});
HTML 中的 javascript 腳本調(diào)用Android Native 端的函數(shù)并傳遞參數(shù)
HTML 對應(yīng)的 js 方法是：
function disp_confirm_with_args(message){
confirm(message);
}
Android Native 端的代碼為：
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
Toast.makeText(MainActivity2.this, "Android_Native_Toast!接收到的參數(shù)message：" + message, Toast.LENGTH_SHORT).show();
}
result.confirm();
return true;
}
});
HTML 中的 javascript 腳本與 Android Native端的 Java 代碼完整交互流程
HTML 對應(yīng)的 js 方法是：
function disp_confirm_with_args(message){
confirm(message);
}
<input type="button" onclick="disp_confirm_with_args('getDevInfo')" value="點擊獲取用戶手機(jī)信息"/>
Android Native 端的代碼為：
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
if ("getDevInfo".equals(message)) {
showDevInfoToH5();
}
}
result.confirm();
return true;
}
});
private String showDevInfo() {
return "showDevInfo('手機(jī)型號:" + android.os.Build.MODEL +
",SDK版本:" + android.os.Build.VERSION.SDK +
",系統(tǒng)版本:" + android.os.Build.VERSION.RELEASE + "')";
}
private void showDevInfoToH5() {
mWebView.loadUrl("javascript:" + showDevInfo());
}
Android Native 端代碼完整展示：
Activity 代碼：
package cn.mtalks.jsbridgedemo;
import android.app.Activity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity2 extends Activity {
private WebView mWebView;
private Button mCallJsBtn;
private Button mCallJsWithArgsBtn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_2);
initView();
initWebView();
}
private void initView() {
mWebView = (WebView) findViewById(R.id.webview);
mCallJsBtn = (Button) findViewById(R.id.call_js_without_args_btn);
mCallJsWithArgsBtn = (Button) findViewById(R.id.call_js_with_args_btn);
mCallJsBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mCallJsWithArgsBtn.setText("Native調(diào)用WebView的有參JS腳本");
mWebView.loadUrl("javascript:changeDemoSubtitle()");
}
});
mCallJsWithArgsBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mCallJsWithArgsBtn.setText("參數(shù)為：" + showDevInfo());
showDevInfoToH5();
}
});
}
private void initWebView() {
//開啟JavaScript功能
mWebView.getSettings().setJavaScriptEnabled(true);
//加載本地html
mWebView.loadUrl("file:///android_asset/JsDemo.html");
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
if ("getDevInfo".equals(message)) {
showDevInfoToH5();
} else if (TextUtils.isEmpty(message)) {
Toast.makeText(MainActivity2.this, "Android_Native_Toast!", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(MainActivity2.this, "Android_Native_Toast!接收到的參數(shù)message：" + message, Toast.LENGTH_SHORT).show();
}
//回調(diào)通知H5頁面用戶操作已完成畦浓，可以再次點擊相關(guān)按鈕
result.confirm();
//設(shè)為true检疫，可以消耗掉H5頁面的confirm彈窗。
return true;
}
});
}
private String showDevInfo() {
return "showDevInfo('手機(jī)型號:" + android.os.Build.MODEL +
",SDK版本:" + android.os.Build.VERSION.SDK +
",系統(tǒng)版本:" + android.os.Build.VERSION.RELEASE + "')";
}
private void showDevInfoToH5() {
mWebView.loadUrl("javascript:" + showDevInfo());
}
}
XML 代碼
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:text="Android_Native"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/call_js_without_args_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Native調(diào)用WebView的JS腳本" />
<Button
android:id="@+id/call_js_with_args_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:text="Native調(diào)用WebView的有參JS腳本" />
</LinearLayout>
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
/>
</LinearLayout>
AndroidManifest 文件
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="cn.mtalks.jsbridgedemo">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity2"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
友情提示
其實在JavaScript調(diào)用 Java本地方法，谷歌官方的實現(xiàn)方法應(yīng)該是使用 JavascriptInterface 方式企垦。但是該方式在 Android4.2版本之前存在安全漏洞晒来，感興趣的看這里郑现。在Android4.2版本之后加入了@JavascriptInterface注解才得以解決，考慮到目前 Android 版本碎片化太嚴(yán)重接箫，使用JavascriptInterface并不適合，這也是上篇文章沒把它放入效率對比的原因薄扁。
以上就是一個完整的 WebView 與 JavaScript 的交互例子。大家可以自己動手試試上篇文章介紹的ShouldInterceptRequest方式來實現(xiàn)這個例子邓梅。
下篇預(yù)告
Webview 頁面展示優(yōu)化。除了 HTML 頁面自己的優(yōu)化钱反，在 Android Native 端能為加載速度做些什么優(yōu)化么匣距？下篇文章會給你答案，比如公共 Js 方法提取放入本地毅待，JS,CSS,圖片資源預(yù)加載等等。
