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

Stella981
• 阅读 689

当时业务的需求是这样的,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 + "')");
            }
        }
    }
点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
java版本springcloud+springboot+mybatis 分布式 微服务 多租户 电子商务 直播带货 短视频带货 社交电商平台
涉及平台:平台管理(包含自营店面)、商家端(PC端、手机端)、买家平台(PC端、H5/公众号、小程序、APP端(IOS/Android)、微服务平台(业务服务)核心架构:SpringCloud、SpringBoot、Mybatis、Redis、SFTP前端框架:VUE、Uniapp、Bootstrap/H5/CSS3、IOS、Android、小程
Stella981 Stella981
3年前
Android与H5混合开发
    Android和H5在移动开发应用中非常广泛。市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的。而H5在制作炫酷动画网页方面比较给力,且具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以App和H5页面相结合就显得尤为重要。而android
Stella981 Stella981
3年前
Android WebView 的三种使用方式
关于原生开发好,还是混合模式开发好,还是套壳的方式好,在这里不是重点,没有最好的,只有相对适合的。重点是那种方式以最低的资源代价适合你的业务场景,适合你的团队,根据实际情况来做技术选型。1,使用h5替代android的viewxml前端将写好的h5页面放在android工程的asset目录,打包的时候会将h5页面一起打在apk里面,
Stella981 Stella981
3年前
Flutter不完全安裝指南(AndroidStudio集成)
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。真心無力吐槽這些所谓的中文站以及社区的文档,整理一下安装流程吧。本人是android开发,基于此基础上(androidstudio3.3SDK为28)1.首先下载flutterSdk(https://www.oschina.net/action/G
Stella981 Stella981
3年前
Android使用WebView加载H5页面播放视频音频,退出后还在播放问题解决
Android中经常会使用到WebView来加载H5的页面,如果H5页面中有音频或者视频的播放时,还没播放完就退出界面,这个时候会发现音频或者视频还在后台播放,这就有点一脸懵逼了,下面是解决方案:方案一:在webview所在的activity中的onPause()和onResume()方法中写上两句话。publicvoidon
Wesley13 Wesley13
3年前
Android上webview界面切换动画效果
使用Android(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.linuxidc.com%2Ftopicnews.aspx%3Ftid%3D11)上的webview控件时需要跳转到下一个html时,要求当前界面缓缓的向左移动,下一个html界面缓缓的从右边出现。这与常规动画不同
Stella981 Stella981
3年前
Android学习笔记(二) 布局方式的介绍
Android应用的开发的一项内容就是用户界面开发了。Android提供了大量功能丰富的UI组件。Android的界面是由布局和组件协同完成的。!(http://static.oschina.net/uploads/space/2014/0304/213204_usD8_865771.gif) Android所有UI组件都继承了View
Stella981 Stella981
3年前
Android 100多个Styles快速开发布局XML,一行搞定View属性,一键统一配置UI..
Android开发中大量使用XML代码作为界面的布局,使用styles能大幅精简XML代码。比如下面这个界面从AlertDialog至PlacePickerWindow有19个样式相同的跳转Item,点击后颜色加深并跳转界面。!(http://static.oschina.net/uploads/img/201607/24121521_yu7M.
Stella981 Stella981
3年前
IOS和android交互
第一次做和原生app的混合开发,其中有一些活动页面需要我这边用h5来做。那么必定涉及一个问题。就是和原生app做交互。分为ios和android。方法不同,逻辑思路都差不多。大体思路就是我和app端约定一个方法,类似于?接头暗号?比如说我们约定了一个方法:’蓝天白云‘,那么当我js调用这个方法的时候,app端通过'蓝天白云',认出了我,并作出
Stella981 Stella981
3年前
Android 原生webview传递header前端H5如何接收
_开发背景_跟其他公司合作的一个项目,传递参数的方式为原生通过自定义header头参数,由前端来接收。_踩坑_1原生传参安卓原生传参的方式很简单,通过webview.loadUrl这个方法,如下:Map<String,StringmapnewHashMap