Android通过webview与H5交互（互调）

偏执的太偏执、 2021-11-17 08:56 708阅读 0赞

## 前话 ##

笔者是写H5小页面的，所以这篇文章主要是针对前端与安卓交互时遇到的一些问题做简单总结和合理猜测，针对安卓的话，有一个图是总结所有交互的方式的，可以看一下，当个参考，当时总结的时候是参考一篇写得比较详细的文章做得，但是现在找不到了，如果作者看到可以与我联系，我定更改附上链接，谢谢。

## 安卓通过webview与JS进行交互 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70]

## 安卓调用JS注意点 ##

##### ● 提供给安卓使用的js方法，需要提高到window对象中 #####

使用vue框架的小伙伴可能会注意到自己写的方法，在安卓中运行时，会报错：找不到该方法。简单地解释可以说是因为Vue是一个大的对象，所以你写的方法的this指向不是window对象，这种时候想办法把方法提到window对象中就可以了

/* common/app.js */
    	var hybrid = {}
    	window.Hybrid = hybrid
    	if (window.Vue) {  // 自动绑定
    	  window.Vue.use(hybrid)
    	}
    	export { hybrid }

import {hybrid} from '../common/app.js'
    
    	mounted(){
    		hybrid.set = this.set
    	}

***因为上面前端都把方法封装在变量window.Hybrid中，所以安卓调用JS方法时方法名要加一个window.Hybrid前缀***

##### ● 安卓调用JS过程中传参时，注意是传字符串 #####

如果有需要传递json格式的情况的话，先转成json字符串格式，H5获取之后再转成json格式。

传递多个参数时要确保接受参数和传递参数的个数的一致性，不然会报错，或者直接不报错，但是参数拿不到的情况。

##### ● 待H5页面加载结束，再调用JS方法 #####

有些需求是页面一旦渲染完成，安卓就要调用页面的JS方法，如果出现有时候能调到有时候不能调到，安卓就要检查是否是在页面加载之后再去获取方法执行

## JS调用安卓注意点 ##

##### ● 关键字不要出错 #####

js和安卓统一一个关键字，js调用安卓方法的时候就是通过关键字调用的

H5.loadReady() //H5就是关键字

## 交互失败可能原因 ##

##### ● 安卓需要开相应的webview权限给前端，比如localstorage的运用、H5自发的网络请求等 #####

##### ● 利用chrome浏览器调试（地址 - - chrome://inspect/\#devices）能看到大多数问题，不过缺点就是要翻墙 #####

##### ● 安卓传参数给前端失败时要检查下传参格式，字符串传参要如下： #####

mWebviewPk.loadUrl("javascript:window.Hybrid.【方法名】(" + "\'" + 【json字符串参数】 + "\')");

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FudG9pbmV0dGVfWGlhbw_size_16_color_FFFFFF_t_70]: /images/20211116/975e3298914642bb95f28f00fd1ec860.png