Android原生和H5交互;Android和H5混合开发;WebView点击H5界面跳转到Android原生界面。

Stella981 等级 124 0 0
标签:

当时业务的需求是这样的,H5有一个活动商品列表的界面,IOS和Android共用这一个界面,点击商品可以跳转到Android原生的商品详情界面并传递商品ID;  大概就是点击H5界面跳转到Android原生界面

好了,需求已经分析完毕了,Android只需要获取H5的点击事件和传递的参数;

来,上代码:

/启用支持javascript
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);

Android4.2以上需要@JavascriptInterface注解,其目的是为了安全;

public class JavaScriptObject{
    public JavaScriptObject(Activity activity) {

    }
    @JavascriptInterface
    public void setToken(String token){
        //token就是商品的ID,这里拿到商品的ID后直接跳转到商品详情页,并把id传递过去
    }
    @JavascriptInterface
    public void definedShare(String ShareJson){
    }
}



/*
*添加js接口,参数1是本地类名,参数2是标记;H5调用需要 "window.标记.类名中的方法名" 才能调用
*/
webView.addJavascriptInterface(new JavaScriptObject(this), "android");

到这里Android端需要写的就完成了;

这个是我截的图,可以看一下:

Android原生和H5交互;Android和H5混合开发;WebView点击H5界面跳转到Android原生界面。

这里是H5需要写的代码:

<script type="text/javascript">
        function s(){
        //调用Android的setToken()方法
        var result =window.android.setToken(goodsId);
        document.getElementById("p").innerHTML=result;
        }
</script>

----------------------------------------------------------------------------------------------------------------------------------

附:如果在Android端调用H5中的方法:

 /*
  * Android调用H5中的方法 
 */
//传固定字符串可以直接用单引号括起来
 mWebView.loadUrl("javascript:alertMessage('哈哈')");//访问H5里带参数的方法,alertMessage(message)为H5里的方法

 //当出入变量名时,需要用转义符隔开
 String content="1016";
 mWebView.loadUrl("javascript:alertMessage(\""   +content+   "\")"   );
 
 //Android调用有返回值js方法,安卓4.4以上才能用这个方法
 mWebView.evaluateJavascript("11", new ValueCallback<String>() {
     @Override
     public void onReceiveValue(String value) {
         Log.i(TAG, "js返回的结果为=" + value);
     }
 });

抽成方法:

 private void callJS(String callback, String status) {
        if (TextUtils.isEmpty(status)) {
            if (AndroidUtils.isKitkat()) {
                mWebView.evaluateJavascript("javascript:" + callback + "()", null);
            } else {
                mWebView.loadUrl("javascript:" + callback + "()");
            }
        } else {
            if (AndroidUtils.isKitkat()) {
                mWebView.evaluateJavascript("javascript:" + callback + "('" + status + "')", null);
            } else {
                mWebView.loadUrl("javascript:" + callback + "('" + status + "')");
            }
        }
    }
收藏
评论区

相关推荐

Android WebView加载优化
1.前言 最近几年关于原生WebView与H5混合开发的项目越来越多,这种开发带来了很多便利,但也会有一些缺点,比如说通过WebView加载H5会有一定的卡顿现象,会影响用户体验。下面本文就此问题一一展开讨论。 2. 场景 根据日常需求一般是通过webView.loadUrl()方法加载指定的网页,其大概流程如下: (https://i
APP 开发技术该如何选型 ?
目前 按照 APP 开发分类,分为以下三大类 原生 APP  \[ Android Swift  \] WEB APP Hybrid App \[混合 APP  \] 在找工作的当中,很多岗位 要求 会开发 H5 App ,那到底什么是H5 APP 呢?一开始我也有点疑惑,没接触这块,按自己理解 就是 采用 HTML5 技术
APP-H5- 小程序区别 (转载)
APP、H5 、小程序区别 ============= ●运行环境 原生App直接运行在操作系统的单独进行中(安卓中可以开启多进程),而小程序运行环境是微信开发团队基于浏览器内核完全重构的一个内置解析器,针对性做了优化,配合自已定义的开发语言标准,提升了小程序的性能 。是一种应用,并非完整的浏览器,只用到一部分H5技术,无法调用window对象和docu
java版本springcloud+springboot+mybatis 分布式 微服务 多租户 电子商务 直播带货 短视频带货 社交电商平台
涉及平台:平台管理(包含自营店面)、商家端(PC端、手机端)、买家平台(PC端、H5/公众号、小程序、APP端(IOS/Android)、微服务平台(业务服务) 核心架构:Spring Cloud、Spring Boot、Mybatis、Redis、SFTP 前端框架:VUE、Uniapp、Bootstrap/H5/CSS3、IOS、Android、小程
HTML5游戏开发凭什么这么火?看了你就知道了...
很多人都会问[H5游戏](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fedu.51cto.com%2Fcourse%2Fcourse_id-1307.html)有前途吗?其实我个人是比较看好H5的前景,尤其是在这个移动互联网的时代,Web技术的触角必然会深入到各个领域. 当然H5目前仍然
QQ浏览器赵俊:解读腾讯扶持HTM5游戏政策
手机QQ浏览器高级产品经理赵俊作为平台渠道方的代表,受邀出席了“TFC&LAYABOX大型HTML5金秋新品发布会”,并在发布会上分享了腾讯QQ浏览器对于H5游戏的扶持政策以及如何助力H5游戏。 **QQ浏览器在H5产业生态中的定位** 目前手机QQ浏览器是市场占有率和活跃度最高的浏览器,月活跃度2.5亿,腾讯将会逐步开放QQ浏览器的
Android WebView 的三种使用方式
关于原生开发好,还是混合模式开发好,还是 套壳的方式好,在这里不是重点,没有最好的,只有相对适合的。 重点是 那种方式 以最低的资源代价 适合你的业务场景,适合你的团队,根据实际情况来做技术选型。 1,使用h5替代android的view xml 前端将写好的h5 页面放在android 工程的asset目录, 打包的时候会将h5页面一起打在apk里面,
Android 原生webview传递header前端H5如何接收
**_开发背景_** 跟其他公司合作的一个项目,传递参数的方式为原生通过自定义header头参数,由前端来接收。 **_踩坑_** **1 原生传参** 安卓原生传参的方式很简单,通过webview.loadUrl这个方法,如下: Map<String, String> map = new HashMap
Android与H5交互 原理与对比
[原文:  https://www.jianshu.com/p/345f4d8a5cfa](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.jianshu.com%2Fp%2F345f4d8a5cfa) 1.Android调用JS的方法有2种:  -----------------
Android与H5混合开发
        Android 和 H5 在移动开发应用中非常广泛。市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的。而H5在制作炫酷动画网页方面比较给力,且具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以App和H5页面相结合就显得尤为重要。而android
Android使用WebView加载H5页面播放视频音频,退出后还在播放问题解决
Android中经常会使用到WebView来加载H5的页面,如果H5页面中有音频或者视频的播放时,还没播放完就退出界面,这个时候会发现音频或者视频还在后台播放,这就有点一脸懵逼了,下面是解决方案: 方案一: 在webview所在的activity中的onPause()和onResume()方法中写上两句话。 public void on
Android原生和H5交互;Android和H5混合开发;WebView点击H5界面跳转到Android原生界面。
当时业务的需求是这样的,H5有一个活动商品列表的界面,IOS和Android共用这一个界面,点击商品可以跳转到Android原生的商品详情界面并传递商品ID;  大概就是**点击H5界面跳转到Android原生界面**; 好了,需求已经分析完毕了,Android只需要获取H5的点击事件和传递的参数; 来,上代码: /启用支持javascript
EasyPlayer.js H5播放器帮助我这种不会前端的普通用户也能轻松实现直播接入
说到EasyPlayer.js,先得说一下EasyPlayer到底是啥, > An elegant, simple, fast android RTSP/RTMP/HLS/HTTP Player.EasyPlayer support RTSP(RTP over TCP/UDP)version & RTMP(FLV)version & Pro version
ExMobi+Agile Lite开发内置浏览器APP
微信对内置浏览器的定制封装,使得H5的流量入口再次重新被定义。在原生程序中使用H5也成为非常必要的一种搭配。这也得益于H5对于简单的浏览性质的内容可以很好的进行展现和传播。 由于在实际项目中有需要在移动端使用到H5,而大部分H5页面都是来源于网络的,所以这里尝试使用[ExMobi](https://www.oschina.net/action/GoToLi
H5 移动端调试全攻略
![](https://oscimg.oschina.net/oscnet/dbf32d73-0458-48a1-a7d4-8488d831a84f.jpg) 文章来源:http://jartto.wang/2018/11/01/mobile-debug/ 随着移动设备的高速发展,H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调