HTML/JS 呼叫android方法，開發 Android。
阿新 • • 發佈：2019-02-15
由於業務需求和大趨勢導致，目前縱觀很多APP。很多都是用H5+native的方式去開發。關於wepApp和nativeApp它們之前的是是非非就不說了。
下面是利用H5應該是JS去呼叫本地Android的程式碼。
不是什麼特別高深的東西。
第一佈局：
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" 3 android:layout_height="match_parent" tools:context=".MainActivity"> 4 5 <WebView 6 android:id="@+id/wv_web" 7 android:layout_width="match_parent" 8 android:layout_height="match_parent"></WebView> 9 10 </RelativeLayout>
第二native程式碼。
setContentView(R.layout.activity_main); webView= (WebView) findViewById(R.id.wv_web); webView.loadUrl("file:///android_res/raw/test.html"); webView.setVerticalScrollBarEnabled(false); webView.setHorizontalScrollBarEnabled(false); webView.getSettings().setJavaScriptEnabled(true); //加上這句話才能使用javascript方法; webView.addJavascriptInterface(newPayJavaScriptInterface(), "demo");
1 final class PayJavaScriptInterface { 2 PayJavaScriptInterface() { 3 } 4 @JavascriptInterface 5 public String getUserinfo() { 6 return "getUserinfo"; 7 } 8 9 10 @JavascriptInterface 11 public boolean needLogin() { 12 return true; 13 } 14 @JavascriptInterface 15 public void haha() { 16 Toast.makeText(MainActivity.this,"hahaa",Toast.LENGTH_SHORT).show(); 17 Log.e("sssssssssssssssssssssss","sdfddddddddd"); 18 } 19 }
第三HTML裡面的程式碼：
test.html
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>互動Demo</title> <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"> </head> <body> getUserinfo: <div id="userinfo"></div> <input value="立即報名" type="button" onClick="baoming();" /><br> <script> /*var rs=window.om.getUserinfo(); document.getElementById('userinfo').innerHTML=rs;*/ var rs=window.demo.getUserinfo(); var obj = eval ("(" + rs + ")"); if(obj.status){ document.getElementById('userinfo').innerHTML=obj.data.nickname; } function baoming(){ if(window.demo.needLogin()){ location.href='test1.html'; } } </script> </body> </html>
test1.html程式碼：
1 <!DOCTYPE HTML> 2 <html> 3 <body> 4 <input value="立即報名" type="button" onClick="haha();"/> 5 6 </body> 7 8 <script> 9 10 function haha(){ 11 12 window.demo.haha(); 13 14 } 15 16 </script> 17 18 </html>
這樣就可以實現了。
需要注意的點：
1.這裡我載入的是本地app裡面的html，所以使用的方式是
webView.loadUrl("file:///android_res/raw/test.html");
關於載入網頁的可以直接，寫上url，而我的html是的放在raw目錄裡面。使用的AndroidStudio。
2.設定了下webView的相關配置資訊。具體程式碼有備註，或者可以查閱其他相關資料。
3.在本地寫：
webView.addJavascriptInterface(new PayJavaScriptInterface(), "demo");
其中第一個引數就是我下面寫的一個類，第二個引數是在HTML裡面的JS需要使用的。注意，在HTML裡面我window後面跟的demo和這裡是一樣的，也必須保持一致才能成功呼叫。
然後就是你在JS裡面呼叫了。這樣應該就ok了。今天還繼續研究下這玩意。
突然感覺不是特別清晰，這樣說吧，這個demo這個就程式碼我們第一個引數new出的物件，然後我們在JS裡面寫window.demo，代表我PayJavaScriptInterface這個物件的例項，也就是我在第一個引數這邊new出來的。然後再window.demo.haha();其實就是呼叫了PayJavaScriptInterface裡面的haha的方法。然後就執行haha裡面的程式碼。
這樣表達應該還算清晰！