AndroidAndroid与js交互

Android与JavaScript交互

2017-09-09  本文已影响94人  Chenyangqi

介绍

最近在项目中需要展示后台发送过来的新闻公告页面,后台返回数据的形式竟然是html标签,我勒个去,写接口的都是爷。直接用TextView解析html标签实在是忒丑,那就用内置html自己写css样式展示吧
确定思路后需要解决几个问题:

  • Android传递数据到JavaScript,使用JavaScript添加到html节点
  • JavaScript返回数据给原生Android

原本的思路是使用Cordova或者React Native,但是本项目只需要展示页面,不需要调用Android系统的硬件,所示直接嵌入html+css+javasript就足够,其实大部分应用也是这样,展示页面使用h5,其他使用原生

效果如下:(标题就是android传递到js的,配合css效果比textview显示html标签好太多)

image.png

步骤


1:创建assets

切换到项目project目录下,在projectName/app/src/main/目录下新建文件夹assets,并在assets下放置你的html+css+js

73M18F5EU$ESR1P}CNM{B9N.png

2:创建JavaScriptSupport.class

  • JavaScriptSupport中被js调用的方法必须用public修饰
  • 且必须实现 @JavascriptInterface接口(告诉js这个方法是能够被js调用的)
import android.util.Log;
import android.webkit.JavascriptInterface;
/**
 * android原生与JavaScript交互工具类
 * Created by CYQ on 2017/9/9.
 */
public class JavascriptSupport {

    /**
     * 给js发送一个字符串
     * @return
     */
    @JavascriptInterface
    public String setParameter() {
        String newsTitle = "Android与JavaScript交互";
        return newsTitle;
    }

    /**
     * 获取js返回的数据
     * @param result
     */
    @JavascriptInterface
    public void getJSReBack(String result) {
        Log.e("js", "js返回的数据:" + result);
    }
}

3:WebView初始化

主要是mWebView.addJavascriptInterface(javascriptSupport, "newsinfo");
javascriptSupport是我们JavaScriptSupport的实例化对象
newsinfo是我们在js中通过window.newsinfo.setParameter()调用工具类的标志(命名随意)

public class WebViewInfomationActivity extends SwipeBackActivity {
    @BindView(R.id.webview_test)
    WebView mWebView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view_infomation);
        mWebView.setWebViewClient(new WebViewClient());
        WebSettings settings = mWebView.getSettings();
        settings.setJavaScriptEnabled(true);
        //允许访问assets目录
        settings.setAllowFileAccess(true);
        //设置WebView排版算法, 实现单列显示, 不允许横向移动
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        //assets下要显示的html文件路径
        String path = "file:///android_asset/information_news.html";
        JavascriptSupport javascriptSupport = new JavascriptSupport();
        mWebView.addJavascriptInterface(javascriptSupport, "newsinfo");
        mWebView.loadUrl(path);
    }
}

4:JavaScript通过工具类与获取android端数据并返回数据

在JavaScript中调用工具类中的实现了@JavascriptInterface接口的方法获取数据和返回数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width; initial-scale=1">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        
        //调用javascripteSupport中setParameter获取android数据,并显示在html中
        var android_data=window.newsinfo.setParameter();
        $('#title').text(android_data);
        
        //调用javascripteSupport中setParameter返回js端的数据
        window.newsinfo.getJSReBack("hello android, I am js reback data");
    });
    </script>
</head>
<body>
<div class="contioner">
    <section class="information">
        <h1 id="title"></h1>

html页面显示android发送到js端的字符串,并设置为标题,效果如下

image.png

android端接收接js返回的数据,并使用Log打印


image.png

总结:

至此就完成了android与JavaScript中数据的相互的调用,并且内置html的效果也非常不错,凤凰新闻客户端等app就大量使用了原生与html混合开发展示新闻详情页面

  • 若有有不足之处,请留言指正,共同学习
上一篇 下一篇

猜你喜欢

热点阅读