Android-----webview 與 js(Vue) 互動
阿新 • • 發佈：2020-07-28
js 與Android互動分為兩種情況：js 呼叫Android原生方法，Android原生呼叫 js 方法。
本文將對這兩種情況分別講解，H5 端用vue實現。
寫個Android例子：
Android佈局檔案程式碼：
<?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" tools:context="com.org.youtu.HtmlActivity"> <Button android:id="@+id/btn_load" android:layout_width="80dp" android:layout_height="wrap_content" android:background="@color/colorPrimaryLight" android:textColor="@color/white_overlay" android:onClick="doClick" android:text="給HTML頁面傳遞資料"/> <WebView android:id="@+id/html_webView" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> </LinearLayout>
HTML頁面程式碼：
注意：window.callJsFunction = this.callJsFunction要給原生呼叫的方法掛載到 window 上面，不然方法無法呼叫成功，後面不能加括號()，會直接呼叫此方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首頁</title> <!-- 引入元件庫 vue.min.js 要在 index.js 之前引入--> <script src="js/vue.min.js"></script> <script src="js/axios.min.js"></script> <!-- 引入樣式 --> <link rel="stylesheet" type="text/css" href="css/index.css"> <!-- 引入元件庫 --> <script src="js/index.js"></script> </head> <body> <div id="appLogin" class="wrap" style="text-align: center;"> <el-button type="success" @click="onSubmit">傳資料到Android後臺</el-button> </div> <script type="text/javascript"> var vues = new Vue({ el: '#appLogin', /**-----【資料初始化】-----**/ data() { return { }; }, /**-----【方法啟動執行】-----**/ mounted() { //將要給原生呼叫的方法掛載到 window 上面 window.callJsFunction = this.callJsFunction }, /**-----【方法列表】-----**/ methods: { onSubmit(){ /**-----【HTML呼叫Android後臺方法】-----**/ window.login.SendDataFromHtml("我是從HTML中傳過來的資料！"); }, callJsFunction(arg) { this.$message.success(arg); }, } }) </script> </body> </html>
邏輯處理Java程式碼：
public class HtmlActivity extends AppCompatActivity { private WebView html_webView; @SuppressWarnings("unchecked") @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //窗口布局到手機最上方 this.requestWindowFeature(Window.FEATURE_NO_TITLE); this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.activity_html); html_webView = this.findViewById(R.id.html_webView); html_webView.getSettings().setJavaScriptEnabled(true); //啟用javascript支援 用於訪問頁面中的javascript html_webView.getSettings().setAllowFileAccess(true); //設定在WebView內部是否允許訪問檔案 html_webView.loadUrl("file:///android_asset/login.html"); html_webView.addJavascriptInterface(HtmlActivity.this,"login"); } /**【點選事件】**/ public void doClick(View view){ switch (view.getId()){ case R.id.btn_load: String arg = "我是Android中定義的欄位資料！"; //html_webView.loadUrl("javascript:callJsFunction('我是Android中定義的欄位資料！')");//呼叫HTML中的方法，傳送資料到前端 html_webView.loadUrl("javascript:callJsFunction('" + arg + "')");//呼叫HTML中的方法，傳送資料到前端 break; } } @android.webkit.JavascriptInterface public void SendDataFromHtml(String data){ Log.e("HTML中傳過來的資料：" , data); Toast.makeText(HtmlActivity.this,data,Toast.LENGTH_LONG).show(); } }
注意事項：html_webView.loadUrl("javascript:callJsFunction('" + arg + "')"); //Android呼叫HTML中的方法，傳送資料到前端
傳遞的引數 arg ，我在執行試發現一個問題："( ' " + arg + " ' )"，如果在 arg 的兩邊不加 ' 號會報錯：Uncaught SyntaxError: missing
在網上找了一下答案說：js方法傳遞引數時，如果引數是string型別，需要在引數前後加 " "
執行結果：