android与H5混合开发
最近在左一个Android原生的H5混合开发的APP,之前还没有好好的总结一下Android原生 和 H5 之间交互的方法,这里来总结一下:
1、hybrid通信,主要就是前端的js和我们Android端的通信 这是最基本JS和Java 的通信方式:
这里我们分四块来讲:
(1)、js调用android原生的代码(不传递参数)
(2)、js调用android原生的代码(传递参数)
(3)、android原生调用JS的代码(不传递参数)
(4)、android原生调用JS的代码(传递参数)
好的我们这里先来创建一个工程:
在工程的main文件夹下创建一个文件夹assets ,然后把写好的H5页面放入该文件夹中,H5页面代码如下:
这里是一个H5页面 点击按键0 执行android中的 public void click0(){} 方法
点击按键1 执行android中的 public void click0(String data1,String data2){}方法
上边是一个简单的H5页面,其中包含连个按钮,点击按钮触发android 原生的方法;里边还有两个JS 方法,其中包括两个,主要用于给android原生去调用。
回到 activity_main.xml中,布局如下:
<?xml version="1.0" encoding="utf-8"?>
主要包含一个WebView控件和两个按钮,点击按钮可以触发上边H5页面中的JS方法
最后看一下MainActivity的代码:
public class MainActivity extends AppCompatActivity implements View.OnClickListener{ private WebView webView; private Button redButton,colorButton; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = (WebView)findViewById(R.id.webview); redButton = (Button)findViewById(R.id.red); colorButton = (Button)findViewById(R.id.color); redButton.setOnClickListener(this); colorButton.setOnClickListener(this); initWebView(); webView.loadUrl("file:///android_asset/android&h5Text0.html"); //加载assets文件中的H5页面 } /** *初始化WebView */ @SuppressLint("JavascriptInterface") //添加该字段 private void initWebView(){ WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true); //设置运行使用JS ButtonClick click = new ButtonClick(); //这里添加JS的交互事件,这样H5就可以调用原生的代码 webView.addJavascriptInterface(click,click.toString()); } @Override public void onClick(View v) { switch (v.getId()){ case R.id.red: //调用JS中的无参数方法 webView.loadUrl("javascript:setRed()"); break; case R.id.color://调用JS中的有参数方法 webView.loadUrl("javascript:setColor('#00f','这是android 原生调用JS代码的触发事件')"); break; } } /** * H5页面按钮点击触发事件 */ class ButtonClick{ //这是 button.click0() 的触发事件 //H5调用方法:javascript:button.click0() @JavascriptInterface public void click0(){ show("title",""); } //这是 button.click0() 的触发事件,可以传递待参数 //H5调用方法:javascript:button.click0('参数1','参数2') @JavascriptInterface public void click0(String data1,String data2){ show(data1,data2); } @JavascriptInterface //必须添加,这样才可以标志这个类的名称是 button public String toString(){ return "button"; } private void show(String title,String data){ new AlertDialog.Builder(getWindow().getContext()) .setTitle(title) .setMessage(data) .setPositiveButton("确定",null) .create().show(); } } }
好了上边的代码就是这样,接下来我们来详细解释一下:
首先我们拿到了一个WebView,初始化webView,在webView中想要运行JS脚本,必须要设置:
WebSettings settings = webView.getSettings();settings.setJavaScriptEnabled(true); //设置运行使
加载 assets中的H5页面:
webView.loadUrl("file:///android_asset/android&h5Text0.html"); //加载assets文件中的H5页面
接下来写一个类,专门用于JS调用;
记得必须写 写toString() 方法,放回来的结果和 JS中调用的方法的类名一致:
比如:在这个例子中JS调用原生是使用 JavaScript:button.click0(); 注意一下,这个的 button 和Java中响应的类的toSring() 方法的返回值是一样的。
@JavascriptInterface public String toString(){ return "button"; }
JavaScript:button.click0(); 其中的 click0 和java响应类的触发方法的方法名是一致的。方法的权限都是 public 。
** * H5页面按钮点击触发事件 */ class ButtonClick{ //这是 button.click0() 的触发事件 //H5调用方法:javascript:button.click0() @JavascriptInterface public void click0(){ show("title",""); } //这是 button.click0() 的触发事件,可以传递待参数 //H5调用方法:javascript:button.click0('参数1','参数2') @JavascriptInterface public void click0(String data1,String data2){ show(data1,data2); } @JavascriptInterface //必须添加,这样才可以标志这个类的名称是 button //在android 4.2之前不需要添加,在4.2之后需要添加 public String toString(){ return "button"; } private void show(String title,String data){ new AlertDialog.Builder(getWindow().getContext()) .setTitle(title) .setMessage(data) .setPositiveButton("确定",null) .create().show(); } }
好了,准备得差不多了
(1)、js调用android原生的代码(不传递参数)/ (2)、js调用android原生的代码(传递参数)
然后通过WebView的addJavascriptInterface方法去注入一个我们自己写的interface。
ButtonClick click = new ButtonClick(); //这里添加JS的交互事件,这样H5就可以调用原生的代码 webView.addJavascriptInterface(click,click.toString());
这里来说明一下 addJavascriptInterface 这个方法,前一个参数是触发的对象,后一个参数是这对象的标志,需要在这个类的内部添加下面的代码,这样JS才可以识别这个类的内部方法:
@JavascriptInterface //@JavascriptInterface必须添加,这样才可以标志这个类的名称是 button //在android 4.2之前不需要添加,在4.2之后需要添加 public String toString(){ return "button"; }
现在点击H5页面中的 按键0 就可以触发事件 ButtonClick 类中的 click0() 方法了,点击 按键1 就可以触发事 ButtonClick 类中的 click0(String data1,String data2) 方法了
(3)、android原生调用JS的代码(不传递参数)
在加载 H5页面结束后,调用 webView.loadUrl("javascript:setRed()"); 那么就可以调用 该页面中的 setRed() 这个JS方法了
(4)、android原生调用JS的代码(传递参数)
在加载 H5页面结束后,调用 webView.loadUrl("javascript:setColor('#00f','这是android 原生调用JS代码的触发事件')");
那么就可以调用 该页面中的 setColor(color,text) 这个JS方法了
更多相关文章
- Android 图片加载Bit地图 OOM异常解决方法
- android Setting中隐藏项实现原理与代码
- Android实现全屏显示的方法 固定横屏或者竖屏的方法
- Android Studio 单刷《第一行代码》系列 07 —— Broadcast 广播
- Android Studio 单刷《第一行代码》系列 06 —— Fragment 生命
- Android Studio 单刷《第一行代码》系列 01 —— 第一战 HelloWo
- Android Studio 单刷《第一行代码》系列 05 —— Fragment 基础
- Android 系统概要 ——《第一行代码 Android》