Android与Vue的交互的方法示例

做过 Android 混合开发的，应该都知道 Android 中 Java 代码和 Javascript 代码之间的交互怎么做。

首先回顾一下 Java 和 Javascript 之间的交互。

JavaScript 调用 Java

Android 中 WebView 添加供 Html 页面调用的 Java 方法：

mWebView.addJavascriptInterface(new DirectToJS(), "AndroidObj");

class DirectToJS{
  @JavascriptInterface
  public void showToast(){
    Toast.makeText(this, "Android Toast",Toast.LENGTH_SHORT).show();
  }
}

Html 页面中 JavaScript 调用 Java 方法的方式如下：

window.AndroidObj.showToast();

JavaScript 代码中: window 是网页的 Window 实体，这个做前端开发的人都非常熟悉； AndroidObj 是 Android 端给 WebView 提供的一个实体，Android 会将这个实体赋给 WebView 的 window； showToast() 就是 Java 提供给 Html 的方法。

Java 调用 JavaScript

首先 Html 上写个普通的 JavaScript 方法：

function showAlert(){
  alert("Html Alert");
}

Android 中只要执行以下代码即可：

mWebView.loadUrl("javascript:showAlert()");

Vue 框架上的坑

如果前端用的是 Vue 框架，那么如果你在 js 脚本上直接写一个方法，Android 是调用不到的，无论是写在那个位置。

这是因为 Vue 框架中，脚本上的方法不是属于 window 的方法，你应该将要提供给 Android 调用的方法赋给 window，这样，Android 中才能调得到：

window['showAlert'] = {
  alert("Html Alert");
}

总得来说，对于普通的网页，写在 js 脚本上的方法，默认都是属于 window 实体的；而 Vue 框架中，由于框架内部的实现机制比较特殊，你写在 js 脚本上的方法，不是真正页面上的方法，所以在 Android 中是调用不到的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue中android4.4不兼容问题的解决方法

    1.npm安装 npm install babel-polyfill npm install es6-promise package.json中会出现 "babel-polyfill": "^6.26.0", "es6-promise": "^4.1.1", 2.main.js引入 import 'babel-polyfill' import Vue from 'vue' import Es6Promise from 'es6

  • Android与Vue的交互的方法示例

    做过 Android 混合开发的,应该都知道 Android 中 Java 代码和 Javascript 代码之间的交互怎么做. 首先回顾一下 Java 和 Javascript 之间的交互. JavaScript 调用 Java Android 中 WebView 添加供 Html 页面调用的 Java 方法: mWebView.addJavascriptInterface(new DirectToJS(), "AndroidObj"); class DirectToJS{ @Jav

  • Android轻松实现多语言的方法示例

    Android轻松实现多语言的方法示例

    本文介绍了Android轻松实现多语言的方法示例,分享给大家,具体如下: 1.创建多语言包 2.首先在onCreate方法中调用此方法查看上一次保存的是什么语言 public void setLanguage() { //根据读取到存放在sp里面的数据 进行设置 Configuration configuration = getResources().getConfiguration(); SharedPreferences sharedPreferences = getSharedPrefer

  • Android P实现静默安装的方法示例(官方Demo)

    Android9.0无法通过以下两种方式实现静默安装: 1.runtime执行shell cmd 2.PackageInstall 反射机制 但是Google已经给我们推荐了相关的APIDemos,所以建议大家多看看源码~ 在frameworks/base/core/java/android/content/pm/PackageInstaller.java有段关于该类的介绍: The ApiDemos project contains examples of using this API: <c

  • Android使用ViewStub实现布局优化方法示例

    目录 实践过程 实现方式 知识点 实践过程 Hello,大家好啊,我是小空,今天带大家了解下动态加载控件ViewStub. 在平时开发中经常会遇到复杂布局,而每一个view都是会占据内存和消耗cpu的(即使再小,累计成多,一般嵌套7级以上就有明显的卡顿了),布局优化就是我们常做的任务之一,甚至是一块心病.所以我们工作中就要留意布局优化的手段,ViewStub就是其中之一. 大家应该听过merge标签,将某个布局文件的根布局写成merge的,然后对应的布局include引用,会默认不会引入merg

  • 原生JS实现Ajax通过POST方式与PHP进行交互的方法示例

    原生JS实现Ajax通过POST方式与PHP进行交互的方法示例

    本文实例讲述了原生JS实现Ajax通过POST方式与PHP进行交互的方法.分享给大家供大家参考,具体如下: 一.代码 conn.php <?php $conn=mysql_connect("localhost","root","root") or die("数据库连接失败".mysql_error()); mysql_select_db("db_database27",$conn) or die(&q

  • AngularJS实现自定义指令与控制器数据交互的方法示例

    本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3

  • Android编程实现播放音频的方法示例

    Android编程实现播放音频的方法示例

    本文实例讲述了Android编程实现播放音频的方法.分享给大家供大家参考,具体如下: 在 Android 中播放音频文件一般都是使用 MediaPlayer 类来实现的,它对多种格式的音 频文件提供了非常全面的控制方法,从而使得播放音乐的工作变得十分简单.下表列出了 MediaPlayer 类中一些较为常用的控制方法. 方法名 功能描述 setDataSource() 设置要播放的音频文件的位置. prepare() 在开始播放之前调用这个方法完成准备工作. start() 开始或继续播放音频.

  • Android编程实现抽屉效果的方法示例

    Android编程实现抽屉效果的方法示例

    本文实例讲述了Android编程实现抽屉效果的方法.分享给大家供大家参考,具体如下: 今天在手机上实现了抽屉效果,其实很简单,但是效果却很酷. 首先在layout 下设置xml布局文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:l

  • Android编程操作手机通讯录的方法示例

    本文实例讲述了Android编程操作手机通讯录的方法.分享给大家供大家参考,具体如下: 手机通讯录的操作是经常被用到的,例如添加联系人,删除联系人或者取得联系人信息.类似的操作还有收藏夹的操作,下面就针对通讯录的操作来做个小例子.同样的这次也会使用到内容提供者的知识. 1. 要操作通信录就要得到授权,也就是读或者写通讯录的权力.这里也需要使用Junit <?xml version="1.0" encoding="utf-8"?> <manifest

  • Android编程实现播放视频的方法示例

    Android编程实现播放视频的方法示例

    本文实例讲述了Android编程实现播放视频的方法.分享给大家供大家参考,具体如下: 播放视频文件其实并不比播放音频文件复杂,主要是使用 VideoView 类来实现的.这个 类将视频的显示和控制集于一身,使得我们仅仅借助它就可以完成一个简易的视频播放器. VideoView 的用法和 MediaPlayer 也比较类似,主要有以下常用方法: 方法名 功能描述 setVideoPath() 设置要播放的视频文件的位置. start() 开始或继续播放视频. pause() 暂停播放视频. res

随机推荐