android混合开发,webview的java与js互操作

android原生应用,用webview加载应用中的网页,并且java代码与js代码可以互相操作。

这是混合开发的基石,最基本也最重要的东西,实验代码在这里

概括说说——

java调js:调用webView.load("javascript:someFunction()");

这样可以调用webView里页面上的全局方法。这不是什么新鲜东西,你在网页中也可以这么做,试试在浏览器地址栏输入javascript:alert("427studio");也可以在浏览器地址栏里调用全局方法。

js调java:调用webView.addJavascriptInterface(somePOJO, "varName");

让一个java对象成为webview里面网页的window对象的varName属性,就好像执行了window.varName = somePOJO一样,因为window是全局上下文,js即可以用访问全局变量的方式访问这个java对象了,然后调用这个对象的函数即可,如果somePOJO这个对象有个public void doIt()方法,则可以这样调用它:someButton.onclick=function(){varName.doIt();}

具体的代码:这里这里,都非常基本,简要列出如下:

1.activity,调js方法那里手痒痒抽了个方法,图简单直接拼"javascript:jsDoIt(‘" + xx + "‘);"也没啥。

对了,loadUrl时,加载安卓程序assets包里的资源,以file:///android_asset/开头,如file:///android_asset/index.html表示要加载assets包里的index.html文件。

package com.example.testhybrid;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.Fragment;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;

public class MainActivity extends Activity {

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

if (savedInstanceState == null) {
            getFragmentManager().beginTransaction()
                    .add(R.id.container, new PlaceholderFragment())
                    .commit();
        }
    }
}

class PlaceholderFragment extends Fragment {

WebView webView;
    
    public PlaceholderFragment() {
    }

@SuppressLint("SetJavaScriptEnabled") @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_main, container, false);
        
        webView = (WebView)rootView.findViewById(R.id.webView1);

webView.getSettings().setJavaScriptEnabled(true);
        
        Handler handler = new Handler(){
            @Override
            public void handleMessage(Message msg) {
                String str = msg.getData().getString("str");
                doJs("jsDoIt", str.replaceAll("\\d", ""));
            }
        };
        webView.addJavascriptInterface(new MyJavascriptInterface(webView, handler), "javaObject");
        
        webView.loadUrl("file:///android_asset/webviews/index.html");
        
        return rootView;
    }
    
    //调用js方法,第一个参数是js方法名,后面的参数是js方法的参数列表
    void doJs(String function, Object... params){
        StringBuilder result = new StringBuilder();
        result.append("javascript:").append(function).append("(");
        for(int i = 0; i < params.length; i++){
            result.append("‘").append(params[i].toString()).append("‘");
            if(i < params.length - 1){
                result.append(",");
            }
        }
        result.append(")");
        String jsStr = result.toString();
        webView.loadUrl(jsStr);
    }
}

//要用来被js调用的java对象
class MyJavascriptInterface{
    
    MyJavascriptInterface(WebView wv, Handler h){
        this.theWebView = wv;
        this.handler = h;
    }
    
    WebView theWebView;
    Handler handler;
    
    //要用来被js调用的java方法
    @JavascriptInterface
    public void javaDoIt(final String str){
        Message msg = new Message();
        Bundle bundle = new Bundle();
        bundle.putString("str", str);
        msg.setData(bundle);
        handler.sendMessage(msg);
    }

}

网页结构不赘,javascript代码:

//html按钮点击触发
function theBtnOnClicked(){
    //调用java方法
    javaObject.javaDoIt("427studio");
}

//要用来被java程序调用的js方法
function jsDoIt(str){
    document.getElementById(‘theBtn‘).innerText += str;
}

长期欢迎项目合作机会介绍,项目收入10%用于酬谢介绍人。新浪微博:@冷镜,QQ:908789432。

时间: 2024-10-11 08:51:08

android混合开发,webview的java与js互操作的相关文章

Android应用开发-------------WebView(一)之WebView与服务器端的Js交互

最近公司再添加功能的时候,有一部分功能是用的html,在一个浏览器或webview中展示出html即可.当然在这里我们当然用webview控件喽 WebApp的好处: 在应用里嵌套web的好处有这么几点,1,跨平台,不仅可以在Android上运行,也可以在ios上运行,而且样式什么的绝对统一,因为都是加载的html,用的都是同一套html 2,修改灵活,容易更新版本.例如大家常看到的app里面的广告页,大多是嵌套的html,这样只要后台替换一下页面的内容,手机端就会改变展现内容,跟新版本也是如此

Android 混合开发 的一些心得。

其实所谓这个混合开发,也就是hybird,就是一些简单的,html5和native 代码之间的交互.很多电商之类的app里面都有类似的功能, 这种东西其实还是蛮重要的,主要就是你有什么功能都可以进行热部署,不需要再重新发版本.下面就简单介绍一下这种技术. 我们首先看下面一个场景,我们打开网易云音乐的app 里面的积分商城,(此时实际上是一个webview去加载了一个html界面.) 然后在显示出来的界面里面点击一下我的订单,因为我们没有登录过,所以此时自动给我弹出了native的登录界面.你看这

Android混合开发,html5自己主动更新爬过的坑

如今使用混合开发的公司越来越多,尽管出现了一些新技术,比方Facebook的react native.阿里的weex,但依旧阻挡不了一些公司採用h5的决心.当然,这也是从多方面考虑的选择. 在三年前就使用过html5混合开发,当时做的是一款贵金属软件,涨跌五线谱.乾坤交易,还有各个股市的信息,那时候还是上波牛市爆发的前夕,哎... 近期公司让用h5混合开发.一些页面和功能有h5分担,最初时候放在本地assets目录下,后来因为前端同事频繁改动和更新.再加上数据安全方面考虑,决定把包放在serve

Android 混合开发,html5 自动更新爬过的坑

现在使用混合开发的公司越来越多,虽然出现了一些新技术,比如Facebook的react native.阿里的weex,但依然阻挡不了一些公司采用h5的决心,当然,这也是从多方面考虑的选择. 在三年前就使用过html5混合开发,当时做的是一款贵金属软件,涨跌五线谱.乾坤交易,还有各个股市的信息,那时候还是上波牛市爆发的前夕,哎... 最近公司让用h5混合开发,一些页面和功能有h5分担,最初时候放在本地assets文件夹下,后来由于前端同事频繁修改和更新,再加上数据安全方面考虑,决定把包放在服务器,

Android与H5交互(java与js的交互)

1.Android  java代码 //java代码 package com.wytiger.jsdemo; import android.app.Activity;import android.os.Bundle;import android.content.Context;import android.graphics.Color;import android.view.View;import android.webkit.JavascriptInterface;import android

不得不看的Flutter与Android混合开发

记得在flutter刚出来时,笔者就开始学习flutter.但由于当时嫌弃flutter复杂的层级组合且未推出稳定版,所以当时就放弃了深入学习,现如今随着flutter的蓬勃发展及大佬们的力推,就又入坑flutter.虽说flutter能够跨平台,但由于现在几乎都是现成的项目,所以不可能用flutter来重头开发,所以目前几乎都是采用native+flutter的混合开发方案.那么该方案该如何实现尼?1.flutter模块的导入首先,切换到native项目的根目录的上一级目录.以笔者项目为例,路

android 在开发WebView时,去掉网页的标题并设置成自定义的标题

IOS中关于去掉标题只需类似下面的两行代码 [js appendString:@"var title = document.getElementsByClassName('navbar-top')[0];"]; [js appendString:@"title.parentNode.removeChild(title);"]; 而android上面拿掉网页的标题还真是难事,自己花了好几天的时间终于大功告成,现目前这绝对是拿掉标题换成自定义的标题的第一人.网上的都是更

webview中java与js交互

WebView提供了在Android应用中展示网页的强大功能.也是目前Hybird app的大力发展的基础.作为Android系统的一个非常重要的组件,它提供两方面的强大的能力:对HTML的解析,布局和绘制:对JavaScript的解释和执行.Hybird App的组成是Native+H5,Native部分是java语言实现:而JavaScript是H5中必不可少的部分.因此就会遇到Java与JavaScript互相调用的情况!这里记录了一个最基本的互相调用的例了! 1.Native布局中添加W

混合开发 webview 中file 控件 点击后无反应解决方法

最近在做个项目 ,需要 使用 file 控件上传 图片到服务器 ,在手机浏览器中 可以正常选择照片,但是放到 android 应用中的webview中,file 控件点击后就没有反应. 百度了一番后,找到以下解决方案 开头定义 private ValueCallback<Uri> mUploadMessage; final static int FILE_SELECTED = 4; 然后设置 mWebView.setWebChromeClient(new WebChromeClient() {