Android h5 交互

最新推荐文章于 2024-04-22 19:19:14 发布

menglong0329

最新推荐文章于 2024-04-22 19:19:14 发布

阅读量255

点赞数

分类专栏： Android 日常开发笔记

本文链接：https://blog.csdn.net/menglong0329/article/details/72661787

版权

Android 日常开发笔记专栏收录该内容

43 篇文章 0 订阅

订阅专栏

Android h5 交互实现

现在越来越多的公司在开发App时，选择了原生与h5的混合开发，那么h5开发的好处是什么呢？

h5开发的好处：

一、实时更新升级：人们的需求在不断的发生着变化，APP应用为了跟上社会发展的步伐，不被用户所淘汰，因此会进行功能、版本上的更新，而这些都是应用直接在后台操作，并且把最新的版本推送到用户的面前，让用户直接获取最新的体验。

二、兼容性比较强：手机APP制作一般分为iOS和Android两个版本，这也就是说其考虑的问题更多。但是加入H5开发行业后，APP应用可以在任何的操作系统上去运行，不会再受任何个体的控制，也因此让手机APP未来的路走德更长更远。

具体实现：（Android Studio开发）

1.在main文件夹下创建assets文件夹，用于放置html文件

在assets文件夹下创建web.html文件其代码：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
    <script type="text/javascript">

function javacalljs(){
     document.getElementById("content").innerHTML =
         "<br\>JAVA调用了JS的无参函数";
}

function javacalljswith(arg){
     document.getElementById("content").innerHTML =
         ("<br\>"+arg);
}
</script>
</head>
<body>
HTML 内容显示 <br/>
<h1><div id="content">内容显示</div></h1>
<br/>
<input type="button" value="点击调用java代码" οnclick="window.android.startFunction()"/>
<br/>
<br/>
<br/>
<input type="button" value="点击调用java代码并传递参数" οnclick="window.android.startFunction('http://blog.csdn.net/Leejizhou')" />
</body>
</html>

2.xml布局文件

<?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=".MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android"
        />
    <Button
        android:id="@+id/button"
        android:layout_margin="8dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="调用JS"
        android:background="@color/colorAccent"
        android:textColor="#ffffff"
        />
    <Button
        android:id="@+id/button2"
        android:layout_margin="8dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="调用有参JS"
        android:background="@color/colorAccent"
        android:textColor="#ffffff"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="WebView"
        android:layout_marginTop="8dp"
        />
    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
</LinearLayout>

3.代码

public class MainActivity extends AppCompatActivity {
    private WebView contentWebView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        contentWebView = (WebView) findViewById(R.id.webview);
        // 启用javascript
        contentWebView.getSettings().setJavaScriptEnabled(true);
        // 从assets目录下面的加载html
        contentWebView.loadUrl("file:///android_asset/web.html");
        contentWebView.addJavascriptInterface(MainActivity.this,"android");
        //Button按钮无参调用HTML js方法
        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 无参数调用 JS的方法
                contentWebView.loadUrl("javascript:javacalljs()");
            }
        });
        //Button按钮有参调用HTML js方法
        findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 传递参数调用JS的方法
                contentWebView.loadUrl("javascript:javacalljswith(" + "'http://blog.csdn.net/Leejizhou'" + ")");
            }
        });
    }
    //由于安全原因 targetSdkVersion>=17需要加 @JavascriptInterface
    //JS调用Android JAVA方法名和HTML中的按钮 onclick后的别名后面的名字对应
    @JavascriptInterface
    public void startFunction(){
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this,"show",Toast.LENGTH_SHORT).show();
            }
        });
    }
    @JavascriptInterface
    public void startFunction(final String text){
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                new AlertDialog.Builder(MainActivity.this).setMessage(text).show();
            }
        });
    }
}

好了，这就是简单的实现了

1.Android调用 js 带参函数/不带参函数

2.h5 调用了 Android 带参函数/不带参函数

menglong0329

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android h5 交互

Android h5 交互实现现在越来越多的公司在开发App时，选择了原生与h5的混合开发，那么h5开发的好处是什么呢？h5开发的好处：一、实时更新升级：人们的需求在不断的发生着变化，APP应用为了跟上社会发展的步伐，不被用户所淘汰，因此会进行功能、版本上的更新，而这些都是应用直接在后台操作，并且把最新的版本推送到用户的面前，让用户直接获取最新的体验。二、兼容性比较强：...
复制链接

扫一扫