H5 Web網頁通過JS（JavaScript）指令碼呼叫Android本地原生方法函式
阿新 • • 發佈：2019-01-10
H5 Web網頁通過JS（JavaScript）指令碼呼叫Android本地原生方法函式
假設現在Android原生程式碼中有一個本地函式：androidNativeSayHello()，打算提供給外部H5頁面使用。
第一步，在Android原生程式碼中準備好提供給H5網頁呼叫的本地原生函式：
import android.content.Context; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.webkit.JavascriptInterface; import android.webkit.WebSettings; import android.webkit.WebView; public class MainActivity extends AppCompatActivity { private WebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView = findViewById(R.id.webview); mWebView.loadUrl("file:///android_asset/web.html"); WebSettings mWebSettings = mWebView.getSettings(); //啟用JavaScript。 mWebSettings.setJavaScriptEnabled(true); mWebSettings.setUseWideViewPort(true); mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true); mWebView.addJavascriptInterface(new MyJavaScriptInterface(this), "MyJSInterface"); } private class MyJavaScriptInterface { private Context mContext; public MyJavaScriptInterface(Context context) { mContext = context; } //新增JS註解@JavascriptInterface。該Android原生的本地方法，供H5 Web網頁呼叫。 //該函式的訪問屬性必須是public。 @JavascriptInterface public void androidNativeSayHello() { System.out.println("android native say 'hello , world !'"); } } }
注意此時在給WebView增加JS介面時候（addJavascriptInterface），定義的名字‘MyJSInterface’，該名字‘MyJSInterface’是H5 Web網頁中的JS程式碼呼叫的‘控制代碼’。
第二步，直接在H5的JS中呼叫。
根據在Android原生程式碼中定義的控制代碼‘MyJSInterface’’直接呼叫Android原生的本地函式：
<html> <body> <script> function showMsg() { MyJSInterface.androidNativeSayHello(); } </script> <form> <input type="button" value="H5 Web網頁呼叫Android原生本地方法" onclick="showMsg()"/> </form> </body> </html>