Android原生与H5混合开发小例子

最新推荐文章于 2024-05-10 08:00:00 发布

宇宙三级工程师

最新推荐文章于 2024-05-10 08:00:00 发布

阅读量1.7k

点赞数 1

本文链接：https://blog.csdn.net/qq_31278925/article/details/124291514

版权

Android原生与H5交互：

1、首先需要准备一个H5文件JsTest.html：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <script type="text/javascript">
        function showToast(toast) {
            javascript:jsTest.showToast(toast);
        }
        function toActivity() {
            javascript:jsTest.toActivity();
        }
        function showDialog(msg1,msg2) {
            javascript:jsTest.showDialog(msg1,msg2);
        }
        function sum(a,b){
            return a+b;
        }
        function setColor(){
            var a = document.getElementById('text3');
            a.style.backgroundColor="#00FF00";
        }
        function setColorAndText(color,text){
            var a = document.getElementById('text3');
            a.style.backgroundColor=color;
            a.innerHTML = text;
        }
    </script>

</head>

<body>
<p id="text1">text1:点击按键0 显示Toast信息</p>
<input type="button" value="按键0" onClick="showToast('Js调用Android方法显示Toast成功！')"/>
<p id="text2">text2:点击按键1 执行Activity跳转</p>
<input type="button" value="按键1" onClick="toActivity()"/>
<p>text2:点击按键2 显示弹框</p>
<input type="button" value="按键2" onClick="showDialog('测试弹窗','测试成功')"/>
<p id="text3">text3:点击底部按钮，修改当前文字或文字背景颜色</p>
</body>
</html>

此文件需要放在Android assets文件夹里

2、准备好H5后，在Android端封装一个JsInterface类用于提供给JS调用的方法。

package com.example.jstest;

import android.app.AlertDialog;
import android.content.Context;
import android.content.Intent;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;

public class JsInterface {
    private Context mContext;

    public JsInterface(Context context) {
        this.mContext = context;
    }

    @JavascriptInterface
    public void showToast(String toast){
        Toast.makeText(mContext,toast,Toast.LENGTH_SHORT).show();
    }

    @JavascriptInterface
    public void toActivity(){
        Intent intent = new Intent(mContext,TestActivity.class);
        mContext.startActivity(intent);
    }

    @JavascriptInterface
    public void showDialog(String data1,String data2){
        show(data1,data2);
    }

    private void show(String title,String data) {
        new AlertDialog.Builder(mContext)
                .setTitle(title)
                .setMessage(data)
                .setPositiveButton("确定", null)
                .create().show();
    }

    public String toString() {
        return "jsTest";
    }
}

这里需要注意的是，showToast（String toast）、toActivity（）、showDialog（String data1,String data2）等方法必须为public方法与H5里的方法名称一致，方法前还需要加上@JavascriptInterface注解。toString()方法返回的固定字符串"jsTest"也与H5上javascript:jsTest.showToast(toast)的一致。

3、写一个简单的MainActivity

package com.example.jstest;

import android.os.Bundle;
import android.view.View;
import android.webkit.ValueCallback;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import java.io.BufferedReader;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private WebView wvTest;
    private Button btGreen;
    private Button btColor;
    private Button btReturn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        wvTest = findViewById(R.id.wvTest);
        btGreen = findViewById(R.id.btGreen);
        btColor = findViewById(R.id.btColor);
        btReturn = findViewById(R.id.btReturn);

        btGreen.setOnClickListener(this);
        btColor.setOnClickListener(this);
        btReturn.setOnClickListener(this);

        WebSettings webSettings = wvTest.getSettings();
        webSettings.setJavaScriptEnabled(true);
        JsInterface jsInterface = new JsInterface(MainActivity.this);
        wvTest.addJavascriptInterface(jsInterface, jsInterface.toString());

        wvTest.loadUrl("file:///android_asset/JsTest.html");
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btGreen:
                wvTest.loadUrl("javascript:setColor()");
                break;
            case R.id.btColor:
                wvTest.loadUrl("javascript:setColorAndText('#FFFFE0','text3:这是修改后的文字！')");
                break;
            case R.id.btReturn:
                wvTest.evaluateJavascript("sum(100,2)", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String s) {
                        Toast.makeText(MainActivity.this, "sum返回的结果为："+s, Toast.LENGTH_SHORT).show();
                    }
                });
                break;
            default:
                break;
        }
    }


}

还有activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/wvTest"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btGreen"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:text="背景变成绿色"
            android:textSize="11sp"/>

        <Button
            android:id="@+id/btColor"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:text="修改颜色和文字"
            android:textSize="11sp"/>

        <Button
            android:id="@+id/btReturn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:text="测试返回值"
            android:textSize="11sp"/>

    </LinearLayout>

</RelativeLayout>

代码通过wvTest.getSettings()获得WebSettings的实例，然后设置webSettings.setJavaScriptEnabled(true)使其支持H5调用。再使用addJavascriptInterface把JsInterface添加进去，最后wvTest.loadUrl("file:///android_asset/JsTest.html")即可完成H5的配置。

4、在模拟器上的效果图