Android与Html5交互

简介: Android与Html5交互

概述

目前主流应用程序大体分为三类

Web App

Web App是指采用Html5语言写出的App,不需要下载安装,类似于现在所说的轻应用,存在于浏览器中的应用,基本上可以说是触屏版的网页应用。

优点

  • 开发成本低
  • 更新快
  • 更新无需通知用户,不需要手动升级
  • 能够跨多个平台和终端

缺点

  • 临时性的入口
  • 无法获取系统级别的通知,提醒,动效等
  • 用户留存率低
  • 设计受限制诸多
  • 体验较差
Hybrid App

Hybrid App是半原生,半Web的混合类App。 需要下载安装,看上去类似NativeApp,但是只有很少的UI,大多用WebView,访问的内容是Web。

Native App

Native APP指的是原生程序,一般依托于操作系统,有很强的交互,是一个完整的App,可拓展性强。需要用户下载安装使用。

优点

  • 打造完美的用户体验
  • 性能稳定
  • 操作速度快,上手流畅
  • 访问本地资源(通讯录,相册)
  • 设计出色的动效,转场,
  • 拥有系统级别的贴心通知或提醒
  • 用户留存率高

缺点

  • 分发成本高(不同平台有不同的开发语言和界面适配)
  • 维护成本高(例如一款App已更新至V5版本,但仍有用户在使用V2, V3, V4版本,需要更多的开发人员维护之前的版本,不然旧版本出问题了,用户可能就不用了)
  • 更新缓慢,根据不同平台,提交–审核–上线 等等不同的流程,需要经过的流程较复杂
三者对比


Hybrid App开发中Android与H5(JS)交互
准备工作
  • 打开assets中的Html。
mWebView = (WebView) findViewById(R.id.webview_test);
mWebView.loadUrl("file:///android_asset/index.html");
  • 打开SD卡中的Html
mWebView = (WebView) findViewById(R.id.webview_test);
mWebView.loadUrl(“content://com.android.htmlfileprovider/sdcard/index.html”);
  • 打开服务端指定Url的Html。
mWebView = (WebView) findViewById(R.id.webview_test);
mWebView.loadUrl(“http://www.baidu.com”);
Android与Html的交互,实际就是与Js的交互。

分两种情况,原生调用Js,Js调用原生。

配置
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试网站</title>
 
    <script type="text/javascript">
        function test(){
            var name = document.getElementById("textName").value
            app.sayHello(name) <!--Js调用原生-->
        }
 
        <!--原生调用Js-->
        function showName(name){
            document.getElementById("textName").value = name;
        }
    </script>
</head>
 
<body>
<input id="textName">
<br/>
<hr>
 
<button onclick="test()">测试</button>
</body>
 
</html>
mWebView.loadUrl("file:///android_asset/index.html");
mWebView.getSettings().setJavaScriptEnabled(true); //开启支持JavaScript
 
mWebAppInterface = new WebAppInterface();
//设置和原生和Js交互的接口
//参数:接口类,Js调用原生时需要的引用名(自定义命名)
mWebView.addJavascriptInterface(mWebAppInterface, "app");
交互接口
class WebAppInterface {
        /**
         * Js 调用原生
         */
        @JavascriptInterface //一定加注解否则可能会报错
        public void sayHello(String name) {
            if (!TextUtils.isEmpty(name)) {
                Toast.makeText(MainActivity.this, name, Toast.LENGTH_SHORT).show();
            }
        }
 
        /**
         * 原生调用Js
         */
        public void showName(String name) {
            mWebView.loadUrl("javascript:showName('" + name + "')");
        }
    }

完整交互代码

 private void initView() {
        mWebView = (WebView) findViewById(R.id.webview_test);
        btn_test = (Button) findViewById(R.id.btn_test);
 
 
        mWebView.loadUrl("file:///android_asset/index.html");
        mWebView.getSettings().setJavaScriptEnabled(true); //开启支持JavaScript
 
        mWebAppInterface = new WebAppInterface();
        //设置和原生和Js交互的接口
        //参数:接口类,Js调用原生时需要的引用名(自定义命名)
        mWebView.addJavascriptInterface(mWebAppInterface, "app");
 
        btn_test.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mWebAppInterface.showName("测试");
            }
        });
    }
 
    class WebAppInterface {
        /**
         * Js 调用原生
         */
        @JavascriptInterface //一定加注解否则可能会报错
        public void sayHello(String name) {
            if (!TextUtils.isEmpty(name)) {
                Toast.makeText(MainActivity.this, name, Toast.LENGTH_SHORT).show();
            }
        }
 
        /**
         * 原生调用Js
         */
        public void showName(String name) {
            mWebView.loadUrl("javascript:showName('" + name + "')");
        }
    }


相关文章
|
14天前
|
Android开发
android TextView HTML 的效果
android TextView HTML 的效果
15 2
|
14天前
|
XML JSON API
转Android上基于JSON的数据交互应用
转Android上基于JSON的数据交互应用
14 1
|
14天前
|
JSON Android开发 数据格式
android与Web服务器交互时的cookie使用-兼谈大众点评数据获得(原创)
android与Web服务器交互时的cookie使用-兼谈大众点评数据获得(原创)
25 2
|
14天前
|
Java Android开发
Android桌面快捷方式图标生成与删除 使用Intent与launcher交互
Android桌面快捷方式图标生成与删除 使用Intent与launcher交互
22 1
|
14天前
|
XML 前端开发 安全
【专栏:HTML 进阶篇】HTML 表单验证与 AJAX 交互
【4月更文挑战第30天】本文探讨了HTML表单验证和AJAX在现代网页开发中的重要性。HTML表单验证通过必填、数据格式和范围验证确保用户输入的准确性,而AJAX则实现异步通信,提供动态数据加载、局部更新和实时交互。两者的结合优化了表单处理,提高用户体验并减少服务器负担。实际应用包括在线注册、购物车系统和表单反馈。然而,开发者需注意浏览器兼容性、错误处理和安全性问题。掌握这些技术,能打造更智能、高效的网页应用,为用户提供更好的体验。在数字化时代,HTML表单验证和AJAX是网页创新与进步的关键。
|
14天前
|
Android开发 开发者
Android网络和数据交互: 请解释Android中的AsyncTask的作用。
Android&#39;s AsyncTask simplifies asynchronous tasks for brief background work, bridging UI and worker threads. It involves execute() for starting tasks, doInBackground() for background execution, publishProgress() for progress updates, and onPostExecute() for returning results to the main thread.
13 0
|
14天前
|
网络协议 安全 API
Android网络和数据交互: 什么是HTTP和HTTPS?在Android中如何进行网络请求?
HTTP和HTTPS是网络数据传输协议,HTTP基于TCP/IP,简单快速,HTTPS则是加密的HTTP,确保数据安全。在Android中,过去常用HttpURLConnection和HttpClient,但HttpClient自Android 6.0起被移除。现在推荐使用支持TLS、流式上传下载、超时配置等特性的HttpsURLConnection进行网络请求。
16 0
|
14天前
|
JavaScript C#
C#winForm程序与html JS交互调用
C#winForm程序与html JS交互调用
|
14天前
|
UED
12.使用HTML制作交互图片
12.使用HTML制作交互图片
51 0
|
1天前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。

热门文章

最新文章