一处疑难杂症的术后总结：WebView和JavaScript之间的交互

Posted 2020-09-12

近期在公司里參与了M3项目的开发，这个项目是使用html5开发的前端页面，在开发完成后，把项目地址写入android、ios的壳源代码里面，这样当应用被打开时候自己主动加载项目首页的URL。这样的做法对于用户来说，能够不用更新client，对于开发者来说，发现问题能够及时修复并更新，当然这也是B/S软件的长处。

在这个APP里面是有个拨号功能的，即点击界面上的电话小图标。能够直接通过手机拨出号码。

昨天同事丁丁告知我们这个APP有个BUG：在iOS里面拨号是没有问题的，可是在Android里面拨号时。会跳转到一个报错页面，类似于我们常见的404页面。无法实现拨号操作。我们的代码写的就是常见的tel:[phone]这样的。

我先讲一下我们的处理过程。

话说知之为知之。不知百度知。

所以在接到问题反馈后，我和同事明明先到百度上面搜索了一下，得到下面的结果：

在开源中国社区里面，有人建议在tel:后面加上双斜杠，类似tel://19212345678。我看到后立刻试了一下。不行。

在还有一个站点里面，有人建议在号码背后加上微信的官网地址。

类似tel:[phone]#weixin.qq.com。

我试了一下。还是老样子。

同事们聚在一起看了下，这段拨号的代码，在iOS上面是没有不论什么问题的，在微信的自带的浏览器里面是没有不论什么问题的。在Android手机自带的浏览器里面也是没有不论什么问题的。只有在打包成APP后訪问时出了问题！

后来同事华华给我发来一段代码。这个是在设置属性的时候重写shouldOverrideUrlLoading(WebView view, String url)这种方法。代码大意是，先推断传入的URL是不是以“tel:”开头的，假设是的，那就运行拨号操作；假设不是的。那就运行载入URL的操作。

我加进去试了一下，这下能够拨号了，可是不能高兴得太早。

还发现有个小问题，在拨号界面弹出的同一时候。那个类似404的错误界面还是会弹出来的，仅仅只是是被拨号的界面给遮挡住了。在通话完成挂机之后，那个错误界面又会出来。

今天丁丁又在催问这个拨号的问题了，我说我仅仅完毕了50%。还有个小问题还没解决。我还不惬意。

丁丁狡猾地说道：假设你今天不能解决，我也不惬意。

下午我把手头上的任务完毕了之后，就又開始研究这个奇葩的问题了。同事涛涛和华华也过来协助把脉。

同事涛涛在QQ上给我发的几个网址。我都点开一一试了下。

第一个是重写shouldOverrideUrlLoading(WebView view, String url)这种方法的。我回复说昨天已经试过了，能生效可是错误的界面还是会跟着弹出，体验不是非常好；

第二个是使用wati协议拨打电话。类似<a href="wtai://wp//mc;10086">拨打10086 </a>  。我回复说这个也试了，也是不起作用。

在同事华华的建议下，我把模拟器打开了，研究了下载整个拨号操作中的过程，花费了一些时间。

除了证明shouldOverrideUrlLoading这段代码的推断是对的。并没有什么其它的收获。

正当一筹莫展的时候，华华忽然想起了一年前和还有一位同事做的户型图展示功能。当时也是因为技术的局限性不得不使用js调用了Android的浏览器API，想看看能不能仿照那个问题的解决思路来解决这个拨号的问题。

这个WebView与js的交互是在jsp页面上定义个函数。

在Android壳源代码里面通过addjavascriptInterface(new JavascriptInterface(this),"jsInterface")来加入定义在jsp页面上定义的js接口。当然前提是要在壳源代码里面加入javascript交互支持。这个我已经加了。

在jsp里面，原来的<a href=”tel:XXX”>已经被改造成了个点击事件，详细的运行内容写在了js函数里面，从而避免了会被识别为个超链接而跳到一个404页面。

假设你觉得在这里就成功了，那也太easy了。

试了一下，点击图片后页面是一明一暗地闪烁，并没有运行拨号操作。

在Logcat看到，它事实上是没取到值的。是在取值的时候的时候出了问题？我把取值的${clientInfoVO.clientMobile}换成了<s:property value=‘clientMobile‘ />。居然就取到值了！

剩下的就是针对Android和iOS两种操作系统进行推断了。

感谢你有足够的耐心看完了上面这长长的流水账，假设你也遇到了和我类似的问题，那么你是幸运的。

以下我总结下WebView与js交互这类的问题的解决的方法：

1、在Android壳源代码里面加入权限声明：

<uses-permission android:name="android.permission.CALL_PHONE" />

须要声明打电话的权限并获取用户授权，不然不能通过Android壳去运行拨号操作。

假设你要是要发短信，那就是短信相关的权限啦，灵活处理；

2、在Android壳源代码里面启用JavaScript支持：

contentWebView.getSettings().setJavaScriptEnabled(true);

这样才干在壳源代码里面调用web页面的js函数

3、重写shouldOverrideUrlLoading(WebView view, String url)方法。对符合和不符合的两种URL进行推断，并运行不同的操作。演示样例代码例如以下：

public boolean shouldOverrideUrlLoading(WebView view, String url) {
		        if (url.startsWith("tel:")) { 
		                Intent intent = new Intent(Intent.ACTION_VIEW,
		                        Uri.parse(url)); 
		                startActivity(intent);             
		                return false;
		        } else {
		        	view.loadUrl(url);
			        return true;
				}
		    }		

4、在web页面的链接改造成调用js函数，在函数里面运行类似window.js交互接口名.js函数名()。

演示样例代码例如以下：

function exitSys(tel){
		window.jsInterface.exitSys(tel);
	}

5、在Android壳源代码里面相应加上js接口声明，比方我的名称是jsInterface，就是在第四步里面写的js交互接口名：

contentWebView.addJavascriptInterface(new JavascriptInterface(this),
				"jsInterface");

6、在JavascriptInterface类里面声明与js相应的方法。这里我就写在Android里面运行拨打电话的代码。

比如：

public void exitSys(String number) {
			   Intent intent = new Intent(Intent.ACTION_CALL,Uri.parse("tel:"+number));  
               startActivity(intent);  	
		}

7、须要被调用的这个js里面假设须要动态传參，给这个js函数相关的參数值赋值最好用<s:property >。而不要用${}。

否则可能会莫名其妙地取不到值（假设你在模拟器上測试，出现invalid MMI code的时候。也能够说明成功了。

由于模拟器是没有与通信运营商联通的，所以会报这个小错误，这时候建议你能够换用真机去測试）；

8、在web页面加上浏览器推断：默认运行tel:，假设是iOS浏览器。就继续沿用之前万能的<a href=”tel:XXX”>，假设是Android浏览器，就运行自己定义的这个js函数，改变点击操作调用的URL。

<a href="tel:<s:property value=‘clientMobile‘ />" ><img src="<%=basePath %>crm/html5_new/myCustomer/images/phone.png"></a>

		$(document).ready(function(){
			$("a").each(function(){
				var u = navigator.userAgent;
				if(u.indexOf(‘iPhone‘) > -1){
					
				}
				else {
					if($(this).attr("href").length>4&&$(this).attr("href").indexOf("tel:")==0){
						$(this).attr("href","javascript:exitSys(‘"+$(this).attr("href").replace("tel:","")+"‘)");
					}
				}
			});
		});