Title不重要
  • 初衷
  • 教程
    • Aria2教程
    • Mac重装教程
    • Hexo教程
    • v2ray教程
    • 翻墙教程
    • Flutter教程
    • Cocoapods教程
  • 混合框架
    • 方案一:原生+H5
      • a、Cordova
      • b、Ionic
      • c、微信小程序
    • 方案二:原生+JavaScript
      • a、React Native
      • b、Weex
      • c、快应用
    • 方案三:原生+自绘
      • a、QT for mobile
      • b、Flutter
  • 开发语言
    • Flutter
      • Dart
    • iOS
      • 1、Swift
      • 2、Objective-C
    • Android
      • Java
    • 2、Python
    • 3、JavaScript
    • 4、PHP
    • 5、Go
  • 开发者
    • 开发者个人
      • iOS
    • 开发者团队
      • 滴滴出行团队
      • 携程团队
      • Yelp团队
      • 大众点评-美团点评团队
  • 工具
    • Mac
      • 重装Mac
    • Windows
  • 干货
    • iOS干货
      • 音视频
      • 动画
      • 直播
      • Xcode
      • iOS 网站论坛
      • iOS 开源项目
        • Swift
      • iOS 视图控件
    • 书籍
      • 教育类
    • 其他干货
      • 设计干货
      • 电影网站
      • Telegram资源
    • Java干货
    • Android干货
      • Android 开源项目
  • 集成平台
    • 第三方支付
      • 微信支付
    • 高德地图
      • AMapSearch库
  • SDKS
    • iOS
      • Foundation
        • NSURLSession
  • 互联网概念
    • 后端
      • 黑石物理服务器
      • Redis
      • 360 Pika项目
      • MapReduce
      • Apache Kylin
      • Gears
      • 集群框架Spark
      • ACM国际大学生程序设计竞赛
      • Presto
      • Apache Storm
      • Apache Flink
      • Apache HBase
      • Apache Mesos
      • Apache Hadoop
      • Apache Hive
      • Apache Cassandra
      • LAMP
      • MySQL
      • 概念:微服务
    • 前端
      • iOS
        • 怎么知道一个NSObject对象占用多少内存?
        • Token过期的处理方案
        • 无侵入埋点
        • 电量优化
        • 介绍多线程
        • 介绍消息传递和转发
        • 介绍Runloop
        • 介绍Runtime
        • 介绍深拷贝和浅拷贝
        • 介绍KVO和KVC
        • 自定义的类,如何实现copy
        • 介绍Autorelease对象什么时候释放?
        • 介绍App卡顿
        • 介绍NSCoding协议和NSCopying协议
        • 介绍内存泄漏和内存溢出
        • 介绍Weak和Assign的区别
        • 介绍Delegate为什么用Weak
      • Android
        • Android中startService和bindService的区别
        • Android与vue js互相调用
      • 原理:直播流程
  • 互联网大会
    • QCon全球软件开发大会
    • AICon全球人工智能与机器学习大会
    • ArchSummit全球架构师峰会
    • GMTC全球大前端技术大会
      • 2019 GMTC
    • WWDC全球苹果开发者大会
      • WWDC2019
        • SwiftUI
      • WWDC2017
        • Universal Links
      • WWDC2018
      • WWDC资源
    • 谷歌I/O大会
  • 生活的智慧
    • 权谋学
Powered by GitBook
On this page
  • 第一部分:js调用android
  • 第二部分:android调用js
  • android调用vue js

Was this helpful?

  1. 互联网概念
  2. 前端
  3. Android

Android与vue js互相调用

第一部分:js调用android

1.这种情况,就是点击了web页面的控件,让android原生做出反应,如跳转或者处理方法

2.android代码要做的就是在写web页面的代码内部监听js点击的方法

3.这里监听的时候部分普通js和vue js 4.不管你用的什么web第三方控件都要实现下面的方法

// setJavaScriptEnabled这句代码在用TBS腾讯浏览服务的jar包时,显示过期,但是还是有效
webview.getSettings().setJavaScriptEnabled(true);
// 这里的this,一般是指加载web页面的context,name指的是js页面调用方法前的一个对象,具体看js代码
webview.addJavascriptInterface(this,"name");
  • 来一段没有注释的代码块

WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
webview.loadUrl("file:///android_asset/html.html");
webview.addJavascriptInterface(MainActivity.this,"android");
  • 来一段js代码

1.里面的test.hello("xxx"),应该可以写成window.test.hello("xxxx")

2.所以以hello命名的方法要写在android代码中,那之前在android代码中的那个name就是test

3.所以写成webview.addJavascriptInterface(this,"test");

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Carson</title>  
      <script>
         function callAndroid()
         {
        	// 由于对象映射,所以调用test对象等于调用Android映射的对象
            test.hello("js调用了android中的hello方法");
         }
      </script>
   </head>
   <body>
      //点击按钮则调用callAndroid函数
      <button type="button" id="button1" onclick="callAndroid()"></button>
   </body>
</html>
  • js代码示例

<script>
    
    window.onload = function () {
        
        let temp =  document.getElementById("test02");
        temp.onclick = function (e) {
            if(window.js_obj){
                window.js_obj.testJS();

            }
        }
        document.getElementById("test03").onclick = function(){
            if(window.js_obj){
                window.js_obj.shareTitleDesc("111","222");
            }
        };
        
        
    }

</script>
  • 在来段js代码加深印象

1.下面应该写成webview.addJavascriptInterface(this,"android")

2.this是上下文,根据具体情况定

<html>
    <head>
        <meta http-equiv="Content-Type" charset="GB2312"/>

        <script type="text/javascript">
        
        	// 这个方法是js调用java的方法名,也就是说这个方法名要在java中实现
            function javacalljs()
            {
                 document.getElementById("showmsg").innerHTML = "JAVA调用了JS的无参函数";
            }

			// java调用js,我们这说的就是android调用js,因为android用的java语法
            function javacalljswith(arg){
                 document.getElementById("showmsg").innerHTML = (arg);
            }

        </script>

    </head>

    <body>
        <h3>Web模块</h3>

        <h3 id="showmsg">调用js显示结果</h3>

		// 注意看,你可以知道addJavascriptInterface后面的name是哪个吗?没错就是android
        <input type="button" value="Js调用Java代码" onclick="window.android.jsCallAndroid()"/>

        <input type="button" value="Js调用Java代码并传参数" onclick="window.android.jsCallAndroidArgs('Js传过来的参数')"/>
    </body>
</html>
  • 上面的代码在java中监听的写法是

1.在Android4.4以上并且必须加入@JavascriptInterface才有响应。

2.第一个方法不带参数,第二方法带参数

@JavascriptInterface
public void jsCallAndroid(){
    
}

@JavascriptInterface
public void jsCallAndroidArgs(String args){
    
}

第二部分:android调用js

1.那android怎么调用js中的方法呢

2.我分为两种,一个是调用普通的js代码,一个是调用vue js的代码

  • 看在js中定义的一个方法给android调用

function callFromJava(str){
    console.log(str);
}
  • 接着在java中调用

1.javascript这个是固定写法

2.callFromJava("xxxx")才是真正要调用的方法

public void  javaCallJS(){
    webView.loadUrl("javascript:callFromJava('call from java')");
}

android调用vue js

  • vue js 中的写法

1.里面一定要把给java调用的方法挂在到window上,就是mounted()中写的

mounted() {
    //将要给原生调用的方法挂载到 window 上面
    window.callJsFunction = this.callJsFunction
},
data() {
    return {
    	msg: "哈哈"
	}
},
methods: {
    callJsFunction(str) {
        this.msg = "我通过原生方法改变了文字" + str
        return "js调用成功"
	}
}
  • java中调用代码

1.网上找了一种这个写法的,给参考下

2.我自己写的方法直接点,这里还传了一个参数

@Override
public void callVueJS() {
    tbsWebView.post(new Runnable() {
        @Override
        public void run() {
            webView.loadUrl("javascript:callJsFunction('soloname')");
        }
    });
}
  • 自己写的是

webView.loadUrl("javascript:callJsFunction('soloname')");

PreviousAndroid中startService和bindService的区别Next原理:直播流程

Last updated 5 years ago

Was this helpful?