目录
前言：
介绍：
demo:
1.创建一个项目
2.编写一个js的接口
3.一个类实现js 接口
4.主执行类中调用 注解写的还挺详细
5.activity_main.xml 中加入webview
6. 编写html 代码
7.图片预览看效果
8.总结
前言：
最近公司打算做先关android 方面的技术，然后招andirod 还挺贵，老板打算让我来搞搞，那就搞一搞，顺便做些总结，从java后台转型快速入手 android 的小策略。
andoird 官网地址 https://developer.android.google.cn/
介绍：
- android 混合开发
- android java 和 html 结合使用
- java 通过webview 和 html 进行关联 互相调用方法
- 下面将详细介绍一下 webview 和 html 中js 调用过程
- 和关联的重要地方
demo:
1.创建一个项目
2.编写一个js的接口
package com.example.app0001;
/**
* 定义一个js java 的桥梁接口
*/
public interface JsBridge {
void jsExecutejAVAfun(String str);
}
3.一个类实现js 接口
package com.example.app0001;
import android.webkit.JavascriptInterface;
public class WebJsbridge {
//定义一个js桥梁接口之后使用
private JsBridge ijsBridge;
//一个构造方法
public WebJsbridge(JsBridge jsi){
this.ijsBridge = jsi;
}
//js方法要加上注解
@JavascriptInterface
public void jsExecutejAVAfun(String value){
ijsBridge.jsExecutejAVAfun(value);
}
}
4.主执行类中调用 注解写的还挺详细
package com.example.app0001;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebView;
/**
* 项目入口
*
*/
public class app0001 extends AppCompatActivity implements JsBridge{
private WebView webView01;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_app0001);
initContext(savedInstanceState);
}
/**
* 初始化上下文
*
* @param savedInstanceState
*/
public void initContext(Bundle savedInstanceState){
webView01 = findViewById(R.id.web001);
webView01.getSettings().setJavaScriptEnabled(true); //允许webview加载js
//给WebView添加js接口 java中new WebJsbridge()对象等于js中 webJsbridge this 是 JsBridge接口的实体类
webView01.addJavascriptInterface(new WebJsbridge(this),"webJsbridge");
//将html注入到webview 中
webView01.loadUrl("file:///android_asset/index.html");
}
/**
* java调用js方法 把这个当作控制层通过传递的参数进行调用不同的方法来实现
*
* @param value 传递的是一个map的数据也可以传递别的类型
*/
public void javaExecuteJs(final String value){
// 通过Handler发送消息//通过mHandler.post(方法操作mwebView并且调用js方法
webView01.post(new Runnable() {
@Override
public void run() {// 调用javascript的xxo()方法// 注意调用的JS方法名要对应上
webView01.loadUrl("javascript:if(window.javaExeJsFun){window.javaExeJsFun('"+value+"');}");
}
});
}
/**
* js 调用java 代码 方法 想写的更好看点可以把这个当作控制层使用 在方法内部调用其他的方法
*
* @param str
*/
@Override
public void jsExecutejAVAfun(String str) {
Log.d("app0001","js调用的代码方法来了！");
javaExecuteJs("java 传去向js的宝物！");//在这里再反响调用js方法 让页面给点反应
}
}
5.activity_main.xml 中加入webview
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF6A32"
tools:context=".app0001">
<WebView
android:id="@+id/web001"
android:layout_width="395dp"
android:layout_height="715dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp" />
</android.support.constraint.ConstraintLayout>
6. 编写html 代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webview</title>
</head>
<body style="background-color:red; color:#fff;text-algin:center;">
<div id="onlyId"> Hello Word ! </div><br>
我是这个程序的第一个显示出来的宝物!
<input type="button" value="调用以下java 代码" onclick="jsExecuteJavaFun()">
</body>
<script>
function jsExecuteJavaFun(){
if(window.webJsbridge){
webJsbridge.jsExecutejAVAfun("js to java data");
}
}
function javaExeJsFun(str){
document.getElementById("onlyId").innerHTML=str;
}
</script>
</html>
7.图片预览看效果
8.总结
- 第一步创建一个项目
- 写一个js用来调用的接口
- 写一个实现调用类这个类中的方法需要加上注解
webView01.addJavascriptInterface(new WebJsbridge(this),"webJsbridge");
- js 调用java 方法的时候webJsbridge就是这个对象，然后找这个对象下的方法
- java 调用js 也是同理 只要在第一层document 中的对象就是可以直接用window点出来
- ok
文章持续更新转载注明出处方便更新 ！
