使用JS前端体系实现安卓脚本应用（三）引入webview
2019-05-28 本文已影响0人
魔力sama
AJ本身提供了UI来实现界面，不过我们既然要使用JS强大的前端体系，自然不会使用AJ的UI，通过webview引入html即可。
经过反馈和测试，发现有些AJ版本不能正常跑webview，目前auto.pro可以正常跑的最新版本是7.0.4-0，且在低版本安卓下无法运行（经过排查，基本可以得出是auto未进行安卓API判断所导致，不过我也咩有解决办法）
auto.js未做测试，也不是很建议使用（各种bug比较多）。
先贴代码后解释。
- 我们在项目根目录下创建一个index.html，内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 id="btn">hello, world</h1>
</body>
<script>
document.getElementById('btn').onclick = function() {
prompt('message', 'hello')
}
</script>
</html>
- 将main.js修改成如下代码:
"ui";
importClass(android.webkit.WebView)
importClass(android.webkit.WebChromeClient)
importClass(android.webkit.WebResourceResponse)
importClass(android.webkit.WebViewClient)
ui.layout(
<linear w="*" h="*">
<webview id="webview" h="*" w="*" />
</linear>
)
let webview = ui.webview
let set = webview.getSettings()
set.setAllowFileAccessFromFileURLs(false)
set.setAllowUniversalAccessFromFileURLs(false)
set.setSupportZoom(false)
set.setJavaScriptEnabled(true)
// 这里的lesson是开始时创建的文件夹名，请根据自己的情况修改
webview.loadUrl('file:///storage/emulated/0/脚本/lesson/index.html')
var webcc = new JavaAdapter(WebChromeClient, {
onJsPrompt: function (webView, url, fnName, defaultValue, jsPromptResult) {
toast(fnName + ' ' + defaultValue)
// 这段代码是必要的，否则会弹出prompt，阻塞界面。
jsPromptResult.confirm()
return true
}
})
webview.setWebChromeClient(webcc)
- 执行AJ命令，选择【保存项目到设备】，因为此例子中通过file协议来加载html，因此需要将项目先保存到模拟器设备中，否则会找不到该文件。
- 在模拟器的AJ里下拉刷新，运行项目后可以看到html页面，点击
hello,world文字，可以看到弹出message hello的气泡信息。html与我们的安卓设备交互成功！
原理
webview可以监听到html中的一些事件，其中prompt是最适合传递数据的，因此这里选用它。这里重写了webview对prompt的响应，将其改为我们的自定义操作，以此来调用AJ的toast函数。
html的成功引入，代表我们可以使用整套的前端体系，比如各种华丽的页面和特效库，比如react、vue、angular等前端框架，复杂的应用有了实现的可能。
