混合开发：Android和H5（JS）交互 |
您所在的位置：网站首页 › 原生html开发 › 混合开发：Android和H5（JS）交互 |
混合开发：Android和H5（JS）交互
|
前言
混合开发，不仅仅显示一个WebView,有时还需要本地Java代码与HTML中的JavaScript进行交互，Android也对交互进行了很好的封装。例如：点击网页中的按钮，调用Android中的原生对话框；点击网页中的电话号码，调用Android中的拨号APP。 为什么要学习与H5互调Hybrid混合开发（原生/H5）Hybrid混合开发应用场景WebView如何加载H5页面Android如何调用H5中的方法H5如何调用Android中的方法 为什么要学习与H5（JS）互调目前，微信、QQ空间等大量软件都内嵌了H5。Android与H5（JS）互调可以让我们实现混合开发。混合开发就是在一个APP中内嵌一个轻量级的浏览器，一部分原生的功能改为Html5来开发。 原理：就是Java代码和JavaScript之间的调用。 Hybrid混合开发（原生/H5）在项目中，从需求来说，大部分页面用H5实现，可以减少很多工作量。但因为不可控因素太高，而时间又短，风险太大。而我们对原生比较熟，开发效率比较高，很多东西控制得了，风险相对较低。并且主推产品是App，微信属于辅助性产品。所以以原生为主，H5为辅，App大部分页面用原生完成，小部分用WebView加载H5。 如果人员和时间资源充足的话，我会以H5为主，微信和App都有的页面，统一用H5。App专有的部分，比如导航栏、标题栏、登录等，用原生实现。另外，WebView里的H5有点击事件时，也许是URL链接，也许是调用JS的，都不会让它直接在该WebView里做跳转，需要拦截下来做原生处理，然后再跳转到一个新的原生界面，原生页面可以嵌入另一个WebView,用来展示新的H5页面。 下面谈下混合开发具体的应用场景： Hybrid混合开发应用场景一些基础的功能，比如调用手机的摄像头，获取地理位置，登录注册功能等等，做成Native的功能，让Html5来调用。 如果把一个登录和注册功能也做成Html5,在弱网络环境下，可能会等半天还没加载出页面。所以使用Native开发会快一些。 那么什么情况适合使用Html5来开发呢？像一些活动页面，比如秒杀、团购等适合做Html5,因为这些页面可能设计的非常炫而且复杂，Html5开发会简单点。并且这些页面时效性短，更新更快，因为一个活动说不定就一周时间，下周换活动，如果这样的话，做成Native是肯定不行的。 WebView如何加载H5页面Android是通过WebView来加载Html页面的，WebView加载H5有两种模式，一种是加载服务器的H5页面，一种是加载本地的H5页面。加载服务器的H5页面比较简单，只要load一下URL就可以了。加载本地的H5页面，需要将H5页面存放在本地，包括关联的CSS和JS文件，这种方式相对比较复杂，但是加载速度会比第一种快很多。 根据Html文件所在的位置不同，写法也不同：
image.png //方式一：加载assets文件夹下的js_java_interaction.html页面 webView.loadUrl("file:///android_asset/js_java_interaction.html"); //方式二：加载网页 //webView.loadUrl("http://www.baidu.com");实现java和js互相调用的步骤： WebView开启JavaScript脚本执行 WebView设置提供JavaScript调用的交互接口 客户端和网页端编写调用对方的代码 具体如下 Android如何调用H5（JS）中的方法想要调用JS方法，那么必须让webView支持 WebSettings webSettings=mWebView.getSettings(); //设置为可调用js方法 webSettings.setJavaScriptEnable(true); webView.setWebViewClient(new WebViewClient()); webView.setWebChromeClient(new WebChromeClient());如何调用？ Android调用H5中的方法，直接调用即可，不需要额外的操作。 调用H5中有参数有返回值的方法调用H5中有参数无返回值的方法调用H5中无参数无返回值的方法调用H5中有参数有返回值的方法 H5（JS）代码： //有参有返回值的方法 function sum(a,b) { return a + b; }Android代码： int num = 1; int num2 = 2; //android调用js，有参数有返回值 webView.evaluateJavascript("sum(" + num + "," + num2 + ")", new ValueCallback() { @Override public void onReceiveValue(String value) { LogManager.i(TAG, "js返回的结果是=" + value); showToast("js返回的结果是=" + value, true); } });调用H5中有参数无返回值的方法 H5（JS）代码： //有参无返回值的方法 function alertMessage(message) { alert(message); }Android代码： //当出入变量名时，需要用转义符隔开 String content = "9880"; //android调用js，有参数无返回值 webView.loadUrl("javascript:alertMessage(" + content + ")");调用H5中无参数无返回值的方法 H5（JS）代码： //无参无返回值的方法 function show(){ //显示Android to js hello world document.getElementById("p").innerHTML="Android to js hello world"; }Android代码： //android调用js，无参数无返回值 webView.loadUrl("javascript:show()"); H5如何调用Android中的方法H5（JS）代码： function s(){ //调用原生的方法，android是约定的别名，back()是原生的方法 var result =window.android.back(); //将返回结果显示在id为p的控件上 document.getElementById("p").innerHTML=result; }Android代码： public static class JsInteration { @JavascriptInterface public String back() { return "Js to android hello world"; } } //js调用android webView.addJavascriptInterface(new JsInteration(), "android");注意事项： 1、当自己写html文件时，可能会出现显示乱码，我们需要指定格式： 项目代码为utf-8编码。 如对此有疑问，请联系qq1164688204。 推荐Android开源项目 项目功能介绍：RxJava2 和Retrofit2 项目，使用Kotlin+RxJava2+Retrofit2+MVP架构+组件化/Kotlin+Retrofit2+协程+MVVM架构+组件化，添加自动管理token 功能，添加RxJava2 生命周期管理，集成极光推送、阿里云Oss对象存储和高德地图定位功能。 项目地址：https://gitee.com/urasaki/RxJava2AndRetrofit2
|
【本文地址】
今日新闻 |
推荐新闻 |