三步搞定:Vue.js调用Android原生操作

2024-02-16 12:28:00

第一步： Android对Js的接口，新建AndroidInterfaceForJs.js

import android.content.Context;
import android.os.Build;
import android.os.Handler;
import android.os.Looper;
import android.support.annotation.RequiresApi;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.ValueCallback;
import android.widget.Toast;
import com.just.agentweb.AgentWeb;
import com.yidumedical.ui.activity.PAWebActivity;

/**
 * Created by shiby on 2018/1/24.
 */

public class AndroidInterfaceForJS {

 private Handler deliver = new Handler(Looper.getMainLooper());
 private AgentWeb agent;
 private Context context;

 public AndroidInterfaceForJS(AgentWeb agent, Context context) {
  this.agent = agent;
  this.context = context;
 }

 @JavascriptInterface
 public void callAndroid(final String msg) {
  deliver.post(new Runnable() {
   @Override
   public void run() {
    Log.i("Info", "main Thread:" + Thread.currentThread());
    Toast.makeText(context.getApplicationContext(), "" + msg, Toast.LENGTH_LONG).show();
   }
  });
  Log.i("Info", "Thread:" + Thread.currentThread());

 }

}

第二步： 给WebView中的window注入对象（例子使用的是AgentWeb）

private void init(){
 mAgentWeb = AgentWeb
   .with(this)//传入Activity or Fragment
   .setAgentWebParent(mLinearLayout, new LinearLayout.LayoutParams(-1, -1))//传入AgentWeb 的父控件 ，如果父控件为 RelativeLayout ， 那么第二参数需要传入 RelativeLayout.LayoutParams ,第一个参数和第二个参数应该对应。
   .useDefaultIndicator()// 使用默认进度条
   .defaultProgressBarColor() // 使用默认进度条颜色
   .createAgentWeb()//
   .ready()
   .go(baseURL);
 //注入对象
 mAgentWeb.getJsInterfaceHolder().addJavaObject("android",new AndroidInterfaceForJS(mAgentWeb,this.getApplicationContext()));
 AgentWebSettings agentWebSettings = mAgentWeb.getAgentWebSettings();
 agentWebSettings.getWebSettings().setDomStorageEnabled(true);
}
注入对象：
 //注入对象
 mAgentWeb.getJsInterfaceHolder().addJavaObject("android",new AndroidInterfaceForJS(mAgentWeb,this.getApplicationContext()));

第三步：在Vue里面直接调用方法（简单粗暴法）：

window.android.callAndroid('调用成功，耶！！！')

考虑到项目的可维护性，一般不这样写。

优雅法：

新建app.js

const android = window.android

export { android }

将 window.android存在该模块，方便更改

然后在需要的.js或者.vue文件中，导入app模块，然后使用

import {android} from '../app'
try {
android.callAndroid('调用成功，耶！！！')
} catch (e) {
console.log('出现错误, 如果在非android环境下访问, 出现该警告是正常的.')
}

补充知识：vue与原生安卓相互调用

最近公司有做直播类的项目，由于直播框架限制，限制所用的技术是vue搭建的H5页面嵌入到原生安卓中。由于之前没有过类似的混合开发经验，所以今天写篇博客加深下印象。

vue.js调用安卓方法

先将vue项目放到一个内网地址或者外网地址中，然后安卓端通过“webView.loadUrl()”将vue项目引入。安卓端将要调用的方法名暴露在window对象中，由vue直接在methods中调用并携带参数。

 methods:{
  goPublish(){
   //将vue项目引入至安卓代码中，安卓方法暴露在window中，vue中可以直接用window去调取方法。
   window.android.callAndroidMethod('1','2')
  }
 }

安卓调用vue.js中的方法

同样的vue也需要把方法添加到window中去，再由安卓端去调取方法。

 created(){
 //需要在created钩子中将方法添加到window对象中
  window.setFun = this.setFun;
 },
 methods:{
  setFun(arg) {
   //arg: 原生调用Vue时传值（arg）给Vue
   console.log("获取到android的传参:" + arg);
  },
 }

以上就是vue与安卓端项目调用的大致方法，有用词不当的地方望海涵且不吝指正。希望能给大家一个参考，也希望大家多多支持我们。

对vue里函数的调用顺序介绍

method用来定义方法的,比如你@click="test",methods就定义test这个方法 created和ready都是 vue 组件的生命周期 created 类型: Function 详细: 在实例创建之后同步调用.此时实例已经结束解析选项,这意味着已建立:数据绑定,计算属性,方法,watcher/事件回调.但是还没有开始 DOM 编译,$el 还不存在. ready 类型: Function 详细: 在编译结束和 el第一次插入文档之后调用,如在第一次attached钩
vue 实现一个简单的全局调用弹窗案例

1.实现效果图 2.第一步,新建一个.vue文件定义一个弹框的基本模板 style样式放在了文章的最底部,如果需要看效果,需要将样式放入这个vue文件里,样式是用less写的,需要你的项目引入less 注意:我这里的组件右上角关闭是一张图片需要换成你自己本地的路径 <template> <div id="tip_alertModal"> <div class="t-alert-mask"></div> <di
vue 父组件中调用子组件函数的方法

在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数.eg: useInPar:function (str) {console.log(str)} 2. 在父组件的中声明一个函数,并通过this.$refs.childItem.userInPar来使用子组件中声明的函数. 父组件: <template> <child-item ref='child' /> <butt
在vue中使用回调函数,this调用无效的解决

let self = this //使用新变量替换this,以免this无效 //updateStudentInfoToServer是一个将本身部分数据异步上传的接口,接收三个参数,其中第一个是数据,第二.三个是函数,第二.三个函数使用function(){}形式书写 updateStudentInfoToServer:function(data, networkOk, networkError){ let postData = this.$qs.stringify({ data:data })
vue调用本地摄像头实现拍照功能

前言: vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用.实现效果: 1.摄像头效果: 2.拍照效果: 实现代码: <template> <div class="camera_outer"> <video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay
vue 调用 RESTful风格接口操作

首先是简单的java接口代码写了四个让前端请求的接口,以下为代码 @GetMapping("/v1/user/{username}/{password}") public Result login2(@PathVariable("username") String username, @PathVariable("password") String password){ return Result.succResult(200,username
解决vue项目中页面调用数据在数据加载完毕之前出现undefined问题

在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报undefined. 例如:一进入页面直接回显数据. 我在created里面请求接口进行赋值 this.matterAll=[]; 会报accessItemName为undefined: 原因以及解决办法: 在上面data()中,我定义了matterAll:[],也就是空的数组, template中,我又直接用了this.matterAll[0],这个时候this.matterAll[0]=undefined,所以t
vue 函数调用加括号与不加括号的区别

写在前面:最近做的一个项目用是很久之前的,在维护项目中就无法使用vue等技术来操作,所以一些方法用的是原生来写的,在绑定点击方法时,方法名没加括号,就没生效,加了括号就生效了,当时有疑惑的点是在之前做vue的项目中,我记得不加括号也是完全可以的,于是就详细的查了一下. 原生方法调用函数在script里写方法,不加括号的话就相当于得到的是这个函数体,是这个函数本身,并不会执行函数 <body> <div>函数调用是否要加括号</div> <button>点击
三步搞定:Vue.js调用Android原生操作

第一步: Android对Js的接口,新建AndroidInterfaceForJs.js import android.content.Context; import android.os.Build; import android.os.Handler; import android.os.Looper; import android.support.annotation.RequiresApi; import android.util.Log; import android.webkit.
在python中利用pycharm自定义代码块教程(三步搞定)

当我们在使用pycharm时,输入特殊的关键字会有提示,然后按enter就可以自动补全,如果我们经常需要输出重复的代码时,能否也利用这种方法来自动补全呢? 下面我们就来利用pycharm自定义代码块: 1.打开pycharm中file下的setting,找到Editor下面的Live Templates ,右侧就会出现各种语言的代码块,我们选择Python,点击右侧的"+",选择Live Template 2.Abbreviation就是你自定义代码块的名字,Description是描
使用ehcache三步搞定springboot缓存的方法示例

本次内容主要介绍基于Ehcache 3.0来快速实现Spring Boot应用程序的数据缓存功能.在Spring Boot应用程序中,我们可以通过Spring Caching来快速搞定数据缓存.接下来我们将介绍如何在三步之内搞定Spring Boot缓存. 1. 创建一个Spring Boot工程并添加Maven依赖你所创建的Spring Boot应用程序的maven依赖文件至少应该是下面的样子: <?xml version="1.0" encoding="UTF-8
GridView的CheckBox列选择及多参数传递三步搞定

1.GridView的列设置复制代码代码如下: <asp:TemplateField HeaderStyle-CssClass="check" ItemStyle-CssClass="check"> <HeaderTemplate> <input type="checkbox" onclick="selectAll(this)" /> 全选 </HeaderTemplate>
十步搞定uni-app使用字体图标的方法

uni-app简介 uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. uni-app框架由Dcloud即数字天堂(北京)网络技术有限公司推出,该公司主要产品有Web开发IDE Hbuiler.HbuilderX,前端框架mui.uni-app,增强版的手机浏览器引擎H5plus等. uni-app中使用字体图标图标的下载首先去阿里图标库选择要用的图标,并且打包下载下来,步骤如下 1. 2. 3. 4.
JS调用Android、Ios原生控件

在上一篇博客(详解JS与APP原生控件交互)中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时,提高代码质量,实现两者在网页端代码的统一. 首先我们先看一下Ios调用JS的方法实现: //无参调用 function SwiftCallJs1(){} //有参调用 function SwiftCallJs2(name, message){} 紧接着我们看一下And
一文教你搞定Java Optional类判空操作

目录概述创建Optional实例获取Optional中的值判断Optional是否为空 Optional中的过滤.转换方法概述最近项目组内做code review,充斥着大量的.原始的.丑陋的判空语句,大致类似下面的代码: if (user != null) { Address address = user.getAddress(); if (address != null) { Country country = address.getCountry(); if (country
仅5步搞定Android开发环境部署 Android开发环境搭建教程

在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友们,为了确保大家能顺利完成开发环境的搭建,文章写的尽量详细,希望对准备进入Android开发的朋友有帮助. 本教程将分为五个步骤来完成Android开发环境的部署. 第一步:安装JDK. 第二步:配置Windows上JDK的变量环境 . 第三步: 下载安装Eclipse . 第四步:下载安装Android SDK . 第五步:为Eclips
vue.js项目使用原生js实现移动端的轮播图

目录前言一.了解原生js移动端的事件二.轮播图实战第一部分:template模板第一部分解读: 第二部分:script标签内代码第二部分解读: 第三部分:css样式部分三.效果图结束语前言今天我在vue.js项目实战开发过程中遇到了实现轮播图效果的问题,因为不想因为一个轮播图而引用整个jquery,而且我还发现自己根本就不清楚移动端的一些事件,所以我就进行了一些资料查找,并最终解决了这个问题,接下来跟大家分享一下我的解决问题的过程. 一.了解原生js移动端的事件原生js移动
一行命令搞定node.js 版本升级

node有一个模块叫n(这名字可够短的...),是专门用来管理node.js的版本的. 首先安装n模块: npm install -g n 第二步: 升级node.js到最新稳定版 n stable 是不是很简单?! n后面也可以跟随版本号比如: n v0.10.26 或 n 0.10.26 就这么简单,这可怎么办??!! 另外分享几个npm的常用命令 npm -v #显示版本,检查npm 是否正确安装. npm install express #安装express模块 npm install

三步搞定:Vue.js调用Android原生操作

相关推荐

随机推荐