android盒子JavaScript,Android与JavaScript交互

介绍

最近在项目中需要展示后台发送过来的新闻公告页面，后台返回数据的形式竟然是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放置html+css+js

2 创建一个与JavaScript交互的工具类JavaScriptSupport(命名随意)

3 布局中使用WebView，在activity或fragment初始化

4 JavaScript中调用JavaScriptSupport中方法实现与原生交互

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接口的方法获取数据和返回数据

$(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");

});

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

image.png

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

image.png

总结：

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

若有有不足之处，请留言指正，共同学习