android native+h5——混合开发初步，通过js交互数据

最新推荐文章于 2024-08-03 21:41:21 发布

夜辉疾风

最新推荐文章于 2024-08-03 21:41:21 发布

阅读量7.5k

点赞数 1

分类专栏： Android-应用技术文章标签： android webview javascript

本文链接：https://blog.csdn.net/yehui928186846/article/details/53381366

版权

本文介绍了Android native+H5混合开发的基本步骤，包括在Android应用中加载HTML，实现Android与JavaScript的双向调用。通过协商定义的方法名和参数，实现了在HTML中调用Android功能并获取反馈。内容涵盖了index.html、index.js和MainActivity.java的代码示例，以及混合开发所需的前端知识。

摘要由CSDN通过智能技术生成

想要编写native+h5混合的app，首先你必须要知道一些js/html/css的东西，特别是js。

我有一两年没有碰前段的东西了，也忘记的差不多了，不过混合开发的初步还是没问题的。

接下来就来说说native+h5 混合开发的第一步，伟大航海路线的第一步，弄一条船。

先来说说大概：
native app中布局很简单，就一个webview，这里就不贴出来了。

前端包含一个index.html 和一个index.js；里面是测试数据

先来说说实现哪些功能：
1，native app显示html
2，模拟服务器端的html和js
3，通过协商的方法完成 native app调用前段js中的数据
4，通过协商的方法完成native app 回馈给js信息（也就是app和前端 js的双向调用）

先看看成功调用js后的效果图：
这里写图片描述

1，index.html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Hello Native+H5!</title>
    <script type="text/javascript" charset="UTF-8" src="../js/index.js"></script>
    <script type="text/javascript" charset="UTF-8">

            function showMessage() {
    
                javascript:control.showToast("欢迎使用native+h5");
            }
        </script>
</head>
<body>
    <input type="button" value="欢迎1" onclick="showToast('Hell_Native+H5')" />
    <input type="button" value="欢迎2" onclick="showMessage()" />
    <input type="button" value="警告" onclick="onAlert()" />