標籤：瀏覽器 lan down XML oct body eval 重要 save
Android 和 H5 在移動開發應用中非常廣泛。市面上很多App都是使用Android開發的，但使用Android來開發一些比較複雜附屬類，提示性的頁面是得不償失的。而H5在製作炫酷動畫網頁方面比較給力，且具有開發速度快，更新不用依賴於App的更新，只需要服務端更新相應的頁面即可，所以App和H5頁面相結合就顯得尤為重要。而android和H5都不可能獨立存在，而是相互影響的。例如，H5頁面要擷取App中的使用者的基本資料，App端要操作H5頁面等。
本文主要功能要點
1.webView如何載入H5頁面
2.Android如何調用H5中的方法
3.H5如何調用Android中的方法
一、webView如何載入H5頁面
1.載入遠程頁面
（1）在AndroidManifest.xml檔案中添加許可權
<uses-permission android:name="android.permission.INTERNET"/>
（2）布局檔案webview.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <WebView android:id="@+id/wv_webview" android:layout_width="fill_parent" android:layout_height="fill_parent" /></LinearLayout>
（3）MainActivity.java
public class MainActivity extends AppCompatActivity { WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.webview); webView = (WebView)findViewById(R.id.wv_webview); loadWeb(); } public void loadWeb(){ //String url = "https://www.baidu.com/"; String url = "file:///android_asset/index.html"; //此方法可以在webview中開啟連結而不會跳轉到外部瀏覽器 webView.setWebViewClient(new WebViewClient()); webView.loadUrl(url); } //重載onKeyDown的函數，使其在頁面內回退,而不是直接退出程式 public boolean onKeyDown(int keyCode, KeyEvent event) { if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){ webView.goBack(); return true; } return super.onKeyDown(keyCode, event); } }
2.載入本地頁面
（1）建立assets目錄用來存放html頁面
右鍵app->new->folder->assetsfolder
（2）html頁面放入assets目錄
（3）修改url
webview.loadUrl(file:///android_asset/index.html);
二、Android如何調用H5中的方法
（1）添加webview對調用js方法的支援
//支援html中javascript解析，不管是不是js和android互動，只要網頁中含有js都要
webView.getSettings().setJavaScriptEnabled(true);
//支援彈窗，也就是支援html網頁彈框
webView.setWebChromeClient(new WebChromeClient(){
public boolean onJsAlert(WebView view,String url,String message,JsResult result ){
return super.onJsAlert(view,url,message,result);
}
});
（2）調用h5無參無傳回值的方法（直接調用）
h5方法：
function show(){
document.getElementById("temp").innerHTML = "Hello world";
}
調用：
webView.loadUrl("javascript:show()");
（3）調用h5有參無傳回值的方法
當調用H5帶參數的方法時，勢必要傳入一個字串，當傳入固定字串時，用單引號括起來即可；當傳入變數名時，需要用轉義符。
h5方法：
function alertMsg(message){
alert(message);
}
調用：
webView.loadUrl("javascript:alertMsg(‘哈哈‘)");
String content = "9880";
webView.loadUrl("javascript:alertMsg(\""+content+"\")");
（4）調用h5有傳回值方法
function sum(i,j){
return i+j;
}
調用：
webView.evaluateJavascript("sum(1,2)",new ValueCallback() {
@Override
public void onReceiveValue(Object value) {
Toast.makeText(MainActivity.this,"js返回結果為="+value,Toast.LENGTH_LONG).show();
}
});
完整代碼：
index.html
<!DOCTYPE html><html><head><title>測試</title></head><body onLoad="init();"> <div id="temp">h5頁面</div></body><script type="text/javascript"> //無參無傳回值的方法 function show(){ document.getElementById("temp").innerHTML = "Hello world"; } //有傳回值的方法 function sum(i,j){ return i+j; } //有參無傳回值的方法 function alertMsg(message){ alert(message); }</script></html>
webview.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"> <Button android:id="@+id/btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" android:layout_marginBottom="12dp" android:layout_marginTop="8dp"/> <WebView android:id="@+id/wv_webview" android:layout_width="fill_parent" android:layout_height="fill_parent" > </WebView></LinearLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity { WebView webView; Button btn; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.webview); btn = (Button)findViewById(R.id.btn); btn.setOnClickListener(new View.OnClickListener(){ public void onClick(View v){ //調用H5無參無傳回值方法 webView.loadUrl("javascript:show()"); //調用H5有參方法 webView.loadUrl("javascript:alertMsg(‘哈哈‘)"); String content = "9880"; webView.loadUrl("javascript:alertMsg(\""+content+"\")"); //調用H5有傳回值方法 webView.evaluateJavascript("sum(1,2)",new ValueCallback() { @Override public void onReceiveValue(Object value) { Toast.makeText(MainActivity.this,"js返回結果為="+value,Toast.LENGTH_LONG).show(); } }); } }); webView = (WebView)findViewById(R.id.wv_webview); loadWeb(); } @SuppressLint("JavascriptInterface") public void loadWeb(){ String url = "file:///android_asset/index.html"; //此方法可以在webview中開啟連結而不會跳轉到外部瀏覽器 webView.setWebViewClient(new WebViewClient()); webView.loadUrl(url); //支援彈窗，也就是支援html網頁彈框 webView.setWebChromeClient(new WebChromeClient(){ public boolean onJsAlert(WebView view,String url,String message,JsResult result ){ return super.onJsAlert(view,url,message,result); } }); //支援html中javascript解析，不管是不是js和android互動，只要網頁中含有js都要 webView.getSettings().setJavaScriptEnabled(true); } public boolean onKeyDown(int keyCode, KeyEvent event) { //重寫onKeyDown，當瀏覽網頁，WebView可以後退時執行後退操作。 if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){ webView.goBack(); return true; } return super.onKeyDown(keyCode,event); }}
三、H5如何調用Android中的方法
Android需要建立一個類，裡邊提供給H5操作的方法，並規定別名。
（1）建立一個類
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
（2）webView添加js介面，並起別名
webView.addJavascriptInterface(new JsInteration(),"android");
（3）H5調用
window.android.back();
完整代碼：
index.html
<!DOCTYPE html><html><head><title>測試</title></head><body onLoad="init();"> <div id="temp">h5頁面</div> <button id="btn" onclick="getMsg()">按鈕</button></body><script type="text/javascript"> function getMsg(){ var result=window.android.back(); document.getElementById("temp").innerHTML=result; }</script></html>
MainActivity.java
public class MainActivity extends AppCompatActivity { WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.webview); webView = (WebView)findViewById(R.id.wv_webview); loadWeb(); } @SuppressLint("JavascriptInterface") public void loadWeb(){ String url = "file:///android_asset/dj_index.html"; //此方法可以在webview中開啟連結而不會跳轉到外部瀏覽器 webView.setWebViewClient(new WebViewClient()); webView.loadUrl(url); /* 開啟js介面，參數1為本地類名；參數2為別名 */ webView.addJavascriptInterface(new JsInteration(),"android"); } public class JsInteration { @JavascriptInterface//一定要寫，不然h5調不到這個方法 public String back() { return "hello world"; } } public boolean onKeyDown(int keyCode, KeyEvent event) { //重寫onKeyDown，當瀏覽網頁，WebView可以後退時執行後退操作。 if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){ webView.goBack(); return true; } return super.onKeyDown(keyCode,event); }}
Android與H5混合開發
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
