关于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的版本变化可能导致本文方式无效。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇