概述
目前主流应用程序大体分为三类
![]()
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 + "')"); } }
Android与Html5交互
最新推荐文章于 2024-07-08 02:26:33 发布