java后台程序员转android 之《三A》 webview 实现混合开发 示例java 和 js的交互 及采坑记录

java后台程序员转android 之《三A》 webview 实现混合开发 示例java 和 js的交互 及采坑记录

目录

​​前言：​​

​​介绍：​​

​​demo:​​

​​1.创建一个项目​​

​​2.编写一个js的接口​​

​​3.一个类实现js 接口 ​​

​​4.主执行类中调用 注解写的还挺详细​​

​​5.activity_main.xml 中加入webview​​

​​6. 编写html 代码​​

​​7.图片预览看效果​​

​​8.总结​​

前言：

最近公司打算做先关android 方面的技术，然后招andirod 还挺贵，老板打算让我来搞搞，那就搞一搞，顺便做些总结，从java后台转型快速入手 android 的小策略。

andoird 官网地址 ​​混合开发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

6. 编写html 代码

7.图片预览看效果

8.总结

第一步创建一个项目写一个js用来调用的接口写一个实现调用类这个类中的方法需要加上注解

webView01.addJavascriptInterface(new WebJsbridge(this),"webJsbridge");

js 调用java 方法的时候webJsbridge就是这个对象，然后找这个对象下的方法java 调用js 也是同理 只要在第一层document 中的对象就是可以直接用window点出来ok

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。