Android 與 H5 之間的互調

阿新 • • 發佈：2019-01-13

1.前言

在APP的開發中嵌入了H5頁面，這樣就可以在Android和iOS系統上跑，大大節約了成本。因此作為移動端開發者，一定要學會使用手機系統與H5頁面的互調，下面介紹一下Android與H5的互調，關於其具體使用會在程式碼中說明。

2.簡介

安卓與H5的互調是在 WebView 上實現的，首先簡單介紹一下WebView，它是一個基於webkit引擎，用於載入web頁面的控制元件，在4.4後被替換成基於Chromium實現。有以下特點：
1. 能夠載入網路頁面和本地頁面
2. 可以使 JAVA 和 JavaScript 相互操作
3. 可以自定義該控制元件

3.效果

輸入賬號密碼，將使用者名稱作為引數傳遞到網頁中（java調js）
點選網頁中的按鈕，彈出提示（js調java）

這裡寫圖片描述

4.程式碼

//H5程式碼如下
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script type="text/javascript">

    function javaCallJs(arg){
         document.getElementById("content" 
).innerHTML =
             ("username："+arg );
    }

    </script>
</head>

<body>

<p align="center">這是一個網頁</p>
<div id="content">content</div><br/>
<img  width="200" height="100" align="center" src="http://img4.imgtn.bdimg.com/it/u=2557743232,2622704824&fm=27&gp=0.jpg" 
><br/><br/>
<input  type="button" value="按鈕" onclick="window.Android.showToast()"/>

</body>
</html>

Java調Js

// 登陸介面的java程式碼如下
public class LoginActivity extends AppCompatActivity implements OnClickListener {

    private AutoCompleteTextView etusername;   //賬號編輯框
    private EditText etpassword;               //密碼編輯框
    private Button btnLogin;                   //按鈕
    private WebView webView;                   //Web檢視

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        findViews();            //初始化控制元件
        initWebView();          //初始化webView
    }

    /**
     * 初始化控制元件
     */
    private void findViews() {
        etusername = (AutoCompleteTextView) findViewById(R.id.email);
        etpassword = (EditText) findViewById(R.id.password);
        btnLogin = (Button) findViewById(R.id.email_sign_in_button);
        btnLogin.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if (v == btnLogin) {
            checkAccount();   //判斷使用者
        }
    }

    /**
     * 判斷使用者
     */
    private void checkAccount() {
        String username = etusername.getText().toString().trim();
        String psw = etpassword.getText().toString().trim();
        //判斷非空
        if (TextUtils.isEmpty(username) || TextUtils.isEmpty(psw)) {
            Toast.makeText(this, "賬號密碼不能為空", Toast.LENGTH_SHORT).show();
        } else {
            login(username);  // 登陸，傳入使用者名稱
        }
    }

    /**
     * 登陸
     *
     * @param username
     */
    private void login(String username) {
        //將引數傳到H5頁面，注意括號中的書寫格式
        webView.loadUrl("javascript:javaCallJs(" + "'" + username + "'" + ")");
        setContentView(webView);  //使webView顯示頁面
    }

    /**
     * 初始化WebView
     */
    public void initWebView() {
        webView = new WebView(this);

        WebSettings webSettings = webView.getSettings();

        //設定支援javaScript
        webSettings.setJavaScriptEnabled(true);

        //設定不呼叫系統自帶的瀏覽器
        webView.setWebViewClient(new WebViewClient());

        //載入網路頁面或者本地頁面
        //webView.loadUrl("http://www.baidu.com");

        //載入本地圖片，在專案的路徑app/main中建立資料夾 assets
        //注意！！這裡的 android-asset 中， asset 不能寫成 assets ;
        webView.loadUrl("file:///android_asset/JavaAndJavaScript.html");
    }
}

Js調Java

步驟
1. 配置JavaScript介面
2. 實現javaScript介面

注意：當出現如下圖問題的時候，有兩種解決addJavascriptInterface無效的辦法：

這裡寫圖片描述

因為在API17的時候WebView進行了改版，因此知支援17以下的版本（不包括17）

//在build.gradle(APP)中，將targetSdkVersion改成16，如下：
   defaultConfig {
        applicationId "com.jwllls.androidh5demo"
        minSdkVersion 19
        targetSdkVersion 16
        versionCode 1
        versionName "1.0"
    }

在介面方法中添加註解，如下：

   // 該類的方法提供給JS呼叫
    class JsCallJavaInterface {
        @JavascriptInterface                         //添加註解
        public void showToast(Context context) {
            Toast.makeText(context, "js調Java", Toast.LENGTH_SHORT).show();
        }
    }

程式碼

//設定支援js呼叫java，js能夠通過Android欄位來呼叫AndroidAndJSInterface中的方法
webView.addJavascriptInterface(new AndroidAndJSInterface(),"Android");

// h5程式碼
<input type="button" value="按鈕" onclick="window.Android.showToast()" />

5.總結

完成以上步驟就實現了 Android 與 H5 的基本互調，
要注意的是：

將引數傳到H5頁面，注意括號中的書寫格式，如下：

 webView.loadUrl("javascript:javaCallJs(" + "'" + username + "'" + ")");

建立資料夾的時候要命名為 ==assets==, 而在程式碼中要寫成 ==asset==
addJavascriptInterface 方法裡面的欄位 Android 一定要與 window.Android.showToast 中的 Android 一致。

Android 與 H5 之間的互調

目錄

1.前言

2.簡介

3.效果

4.程式碼

Java調Js

Js調Java

5.總結

android與h5之間的互調

Android 與 H5 之間的互調

Android與H5互調（通過實例來了解Hybrid App）

android與h5互調

WebView詳解與簡單Android與H5互調

WebView詳解與簡單實現Android與H5互調

【轉】Android與H5互調

Android與H5介面的互動(引數互傳)以及遇到的一些問題

分布式系統的那些事兒（三） - 系統與系統之間的調用

android與js交互

dynamic-load-apk 插件與宿主方法互調

C與C++之間相互調用

Android高手進階教程(二十)之---Android與JavaScript方法相互調用！

window 與CentOS之間互傳文件操作步驟

小程式與 App 與 H5 之間的區別

iOS原生介面與RN介面互調及傳值

golang go語言與C語言互調，通過cgo

Android與H5相機、相簿筆記

AppInterface，一套Android與H5的混合開發框架

Android 與 h5 js互動問題，初步瞭解。

Android 與 H5 之間的互調

目錄

1.前言

2.簡介

3.效果

4.程式碼

Java調Js

Js調Java

5.總結

相關推薦