您的位置：首页 > 移动开发 > Android开发

学习笔记-Android webview和JS交互

2017-09-12 11:25 447 查看

           本文主要介绍一下Android 原生控件webview和JavaScript 的交互方式，原生App 不够灵活，而通过webview 载入js 这种混合式开发可以弥补 原生app 不够灵活的缺陷；现在采用混合式开发的app也越来越多，因此掌握这项技术能为你个人技术加分不少。这里我会通过 Android 调用JS代码和 JS代码调用Android代码来实现 Android 与JS的交互；

一.准备工作

     在main 文件夹下建一个assets 文件夹，里面放 你要加载的html 文件，这里咱们就不联网获取 html 文件啥的了，直接在本地放html 文件；

temp.html
<script type="text/javascript">
var result = JavaScriptInterface.jsontohtml();
var obj = eval("("+result+")");//解析json字符串
function showAndroidToast(toast)
{
JavaScriptInterface.showToast(toast);
}

function call() {
obj.showToast("我来自js");//对象名 为 obj
}

function getsum(){//Android调用js代码
return("here is the data i send to you");
}

function getjsonData(){
var result = JavaScriptInterface.jsontohtml();
var obj = eval("("+result+")");//解析json字符串
for(i=0;i<obj.length;i++){
var user=obj[i];
document.write("<p>姓名:"+user.name+"</p>");
document.write("<p>年龄:"+user.age+"</p>");
document.write("<p>地址:"+user.address+"</p>");
if(user.phone!=null){
document.write("<p>手机号码:"+user.address+"</p>");
}
}
}
function list(){
document.write("<div data-role='header'><p>another</p></div>");
}
</script>
</head>
<body>

<button type="button" onclick="call()" id=button1 >message</button>

<div data-role="page" >
<div data-role="header" data-theme="c">
<h1>Android via Interface</h1>
</div><!-- /header -->
<div data-role="content">
<button value="say hello" onclick="showAndroidToast('Hello,Android!')" data-theme="e"></button>
<button value="get json data" onclick="getjsonData()" data-theme="e"></button>
</div><!-- /content -->
<div data-role="collapsible" data-theme="c" data-content-theme="f">
<h3>I'm <script>document.write(obj[0].name);</script>,click to see my info</h3>
<p><script>document.write("<p>姓名："+obj[0].name+"</p>");</script></p>
<p><script>document.write("<p>年龄："+obj[0].age+"</p>");</script></p>
<p><script>document.write("<p>地址："+obj[0].address+"</p>");</script></p>
</div>
<div data-role="footer" data-theme="c">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>

二.JS调用Android代码

     先初始化webview
private void init() {
webview = (WebView) findViewById(R.id.wv);
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true);
settings.setDefaultTextEncodingName("UTF-8");
}先加载 html 文件，然后通过addJavascriptInterface       
方法传递一个当前对象（可以调用这个方法的对象）和 一个“昵称”，该“昵称”对应 js 方法里面的对象名，上面js里面对象名是obj,所以，这里需要穿“obj”;
webview.loadUrl("file:///android_asset/temp.html");
webview.addJavascriptInterface(this,"obj");
JS里面，咱们写了一个按钮，点击这个按钮，会调用Android里面这句代码；

@JavascriptInterface
public void showToast(String s) {
Toast.makeText(this, s, Toast.LENGTH_SHORT).show();
}这里需要注意一点就是 在Android 4.4以后，需要加上@JavascriptInterface注解

三.Android调用JS代码

Android调用JS代码有两种方式，一种是loadUrl();

webview.loadUrl("javascript:getsum()");这种方法直接调用JS的方法，但是没办法获取返回值，而且会刷新页面所以我推荐使用第二种方法
@TargetApi(Build.VERSION_CODES.KITKAT)
public void atj(View view) {
webview.evaluateJavascript("javascript:getsum()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.d(TAG, "onReceiveValue= "+value);
}
});
}这种方法不会刷新页面，效率会更高，可以通过回调获取到js给我们的返回值，也是在Android4.4以后支持

四.获取JS代码返回值给Android的其他几种方式

主要是通过js页面弹窗来传递数据，通过
setWebViewClient 方法，里面回调 onJsAlert(),onJSconfirm();onJSprompt();对应JS 的 alert(); confirm(); promrt();方法，通过这几个方法传值；具体大家可以参考这篇文章：


http://blog.csdn.net/carson_ho/article/details/64904691

      感谢博主！好了，就分享到这里。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                JS
                                                webview
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航