关于android和vue.js交互

这篇具有很好参考价值的文章主要介绍了关于android和vue.js交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文使用webview框架AgentWeb
使用的Vue版本为vue3
使用的android sdk版本为33
从android 11 开始想要访问sd卡下的数据需要权限

android.permission.MANAGE_EXTERNAL_STORAGE

权限请求方法为

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R && !Environment.isExternalStorageManager()) {
      val requestPermission = Intent()
      requestPermission.action = Settings.ACTION_MANAGE_ALL_FILES_ACCESS_PERMISSION
      startActivity(requestPermission)
 } else {
      //todo 已有权限,正常操作
}

Vue调用Android

使用以下方法注册接口

//vue调用android方法使用window.关键字.方法名(参数)
//注册方法中,第一个参数为关键字,后一个参数为接口类实现,接口类时间见下方
agentWeb.jsInterfaceHolder.addJavaObject("关键字", AndroidJSInterface(agentWeb))
/**
*	接口类实现必须加 @JavascriptInterface 注解否则无法生效
* 	如果vue调用android方法有回调目前测得返回String可以正常接收,返回实体会出现undefined情况
* 	vue中直接使用 let 返回值 = window.关键字.方法名(参数)接收返回值
*/
@JavascriptInterface
public String toast(String msg) {
	//todo 需要的操作
    return "";
}

Android调用Vue

根据Android与Vue的交互的方法示例这篇文章最后中提到的互调的坑中得知因为Vue的问题Android调用Vue方法需要在window中暴露方法名,所以我这边的设置如下:

/**
* 在mounted中暴露出需要被调用的方法名
*/
mounted(){
   window['需要被Android调用的方法名'] = (方法参数)=>{
      如果不需要返回则这边直接调用vue中自己的方法
      如果存在返回值则在这边直接return 返回值,目前来看返回值类型使用String比较稳妥
   }
},

android这边调用方式如下:

agentWeb.getJsAccessEntrace().callJs("javascript:方法名(参数)", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String s) {
                //vue执行方法之后的返回值
                //如果没有则可以不实现
            }
        });

以上就是目前能正常使用的Android与Vue的交互方式,Vue和Android WebView的版本变化可能导致本文方式无效。文章来源地址https://www.toymoban.com/news/detail-513388.html

到了这里,关于关于android和vue.js交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android与H5交互 -- 点击H5跳转到 Android原生 页面 ,webview与h5(js)交互

    Android与H5交互 app开发过程中,利用原生+h5模式来开发是比较常见的 下面案例演示的是:原生调起一个H5页面,然后H5点击跳转到原生 WebViewActivity页面 调用H5 ,点击H5链接 跳转到原生MainActivity页面 注意 别忘了 !-- 添加网络权限 -- 一、清单文件,增加的配置 data的数据就是H5

    2023年04月14日
    浏览(65)
  • 使用JSBridge框架来实现Android与H5(JS)交互

    1.首先我们来了解一下什么是JSBridge? 在开发中,为了追求开发的效率以及移植的便利性,一些展示性强的页面我们会偏向于使用h5来完成,功能性强的页面我们会偏向于使用native来完成,而一旦使用了h5,为了在h5中尽可能的得到native的体验,我们native层需要暴露一些方法给

    2024年02月08日
    浏览(42)
  • Vue.js uni-app 混合模式原生App webview与H5的交互

    在现代移动应用开发中,原生App与H5页面之间的交互已经成为一个常见的需求。本文将介绍如何在Vue.js框架中实现原生App与H5页面之间的数据传递和方法调用。我们将通过一个简单的示例来展示如何实现这一功能。 效果图如下: 首先,我们需要在Vue.js项目中引入原生App与H5页面

    2024年02月16日
    浏览(69)
  • 在 Flutter 中使用 webview_flutter 4.0 | js 交互

    大家好,我是 17。 已经有很多关于 Flutter WebView 的文章了,为什么还要写一篇。两个原因: Flutter WebView 是 Flutter 开发的必备技能 现有的文章都是关于老版本的,新版本 4.x 有了重要变化,基于 3.x 的代码很多要重写。 WebView 的文章分两篇 在 Flutter 中使用 webview_flutter 4.0 | js

    2024年01月18日
    浏览(38)
  • Android使用WebView与Native交互的三种方式 ( 附源码 )

    javascript.html: jsToAndroid.html jsToAndroid2.html 1.JS与Native的交互 一.Android调用JS的方法 目前学习了俩种方法:1. 调用webview的loadUrl 2.调用webview的evaluateJavascript 方法说明: 1. webView.loadUrl(“javascript:callJS()”); 参数是一个字符串,说明调用了javascript中的 callJS方法 webview.evaluateJavascript(

    2024年02月11日
    浏览(58)
  • WebView交互架构项目实战(四):WebView与Native的通信框架手写实践

    其中wholeJS就是JS文件转化而来的字符串,然后调用 webView.loadUrl(\\\"javascript: \\\" + wholeJS); 1 就可以看到和之前一样的效果。 方式2: 通过evaluateJavascript方法 相较于loadUrl,evaluateJavascript的优势在于异步加载,还可以将执行JS代码的结果带回来,我们以下面一个小例子来说明。 我们在

    2024年04月29日
    浏览(40)
  • 深度学习js与安卓的交互以及WebView的那些坑

    } @Override public void onReceivedTitle(WebView view, String title) { titleview.setText(title); } }); 一个demo示范一下以上几个类的用法: activity_main.xml如下: ?xml version=\\\"1.0\\\" encoding=\\\"utf-8\\\"? RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android” xmlns:tools=“http://schemas.android.com/tools” android:layout_

    2024年04月13日
    浏览(33)
  • 【JoAPP】Android WebView与H5交互实现(JAVA+KOTLIN)

           最近一个应急平台的项目移动端开发,原计划用UNI-APP实现,客户想着要集成语音、视频通话功能,基于经验判断需要买一套IM原生移动端框架去结合H5整合比较合适,没想到最后客户不想采购,而且语音视频通话功能也迟迟未能完全确认,H5部分所开发的业务功能已经

    2024年02月03日
    浏览(43)
  • js封装SDK 在VUE、小程序、公众号直接调用js调用后端接口(本文以vue项目为例)

    1.封装一个js文件 msgSdk.js 注意:需要修改这个请求地址  apiServiceAddress 2.在index.html中引入 msgSdk.js文件 和 jquery文件 3.在页面中调用

    2024年04月27日
    浏览(38)
  • WebView交互架构项目实战(三):多进程WebView使用实践

    更新原理: 1、当浏览器首次请求资源的时候,服务器会返回200的状态码(ok),内容为请求的资源,同时response header会有一个ETag标记,该标记是服务器端根据容器(IIS或者Apache等等)中配置的ETag生成策略生成的一串唯一标识资源的字符串,ETag格式为 ETag:“856247206” 2、当浏览

    2024年04月15日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包