这东西跟auto.js虽然是差不多的东西,比较之下,有小许优点,
但是auto.js明显成员较多,功能优秀,稳定性较好。
easyclick的官方文档有点凌乱,说的也不是很清楚,可能作者比较忙吧。
使用有一阵子时间了,现在讲一些基础问题,后面章节陆续讲一些,做些笔记
我会好好的带你们入坑的,讲的好不好,你且听,我且说,反正免费的。
什么是脚手架呢?基础搭建的架子嘛,就好比你房子的骨架。
开发工具:IntelliJ IDEA Community Edition 2021.1.2 x64
有30天试用期,自行找个解除30天的插件凑和着用行了,名字ideaunlimited30days
easyclick的plugin插件
https://ieasyclick.com/docs/#/zh-cn/funcs/devtools/dev-tools-install
支持原生UI,但不是所有控件,且不支持id,只支持tag
界面的处理你最好全部放在ui.js中处理,脚本的逻辑写在main.js。
ui.js和main.js之间不互通的,无法互相调用你的自定义函数。
但是main.js和ui.js都可以控制UI里面的元素。
如果是不用xml原生ui,而是用H5你可以在main.js调用网页中的自定义函数。
反之不行,相反的,网页中的js只能调用ui.js声明的函数或者EC自带的。
如果ui.js和main.js要传递参数,建议使用网页中的中转调用。或者用java代码弄个websocket Server来本地互相通迅(这个后面章节会具体解析)。
假设你的ui.js中调用的xml中的webview
ui.registeH5Function("getOSVersion",function(data){
//返回给网页的数据
return device.getOSVersion();
});
ui.layout("游戏", "startMain.xml");
startMain.xml文件代码:
<?xml version="1.0" encoding="UTF-8" ?>
<LinearLayout
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:android="http://schemas.android.com/apk/res/android"
xsi:noNamespaceSchemaLocation="layout.xsd"
android:layout_height="match_parent"
android:layout_width="match_parent">
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical" >
<WebView android:layout_width="match_parent"
android:layout_height="match_parent"
android:tag="mainWebview"
android:url="main.html"/>
</LinearLayout>
</LinearLayout>
你的网页内容main.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- head 中 -->
<link rel="stylesheet" href="css/materialize.min.css">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>H5 网页示例</title>
<style>
html {
line-height: 1.2;
font-size: 11px;
}
body{
background-color: #ffffff;
}
/*when hover*/
.tabs .tab a:hover{
background-color:/* put some background color*/;
color:/* put some font color*/;
}
/*when active*/
.tabs .tab a.active{
background-color:/* put some background color*/;
color:/* put some font color*/;
}
</style>
<script src="htmljs/jquery.min.js"></script>
<script src="htmljs/materialize.min.js"></script>
</head>
<body style="container">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a class="active" href="#tpl1-content">栏目1</a></li>
<li class="tab col s3"><a href="#tpl2-content">栏目2</a></li>
<li class="tab col s3"><a href="#tpl3-content">栏目3</a></li>
</ul>
</div>
<div id="tpl1-content" class="col s12">test1</div>
<div id="tpl2-content" class="col s12">test2</div>
<div id="tpl3-content" class="col s12">test3</div>
</div>
</body>
<script>
$(function () {
$('.tabs').tabs();
if(window.ec){
//网页端启动你的main.js
window.ec.start();
//去掉右下角圆型悬浮启动按钮
window.ec.hideStartBtn();
//去掉控制按钮
window.ec.closeCtrlWindow();
}
var osVer=window.ec.call("getOSVersion","");
window.ec.toast('你的手机版本android'+osVer);
});
function myalert(){
window.ec.toast("我怎么了");
}
</script>
</html>
一些解释:
情况一,ui.js声明的call在网页中调用,比如:
ui.registeH5Function("getOSVersion",function(data){
//返回给网页的数据
return device.getOSVersion();
});
在网页中这样调用。
var osVer=window.ec.call("getOSVersion","");
情况二,main.js或ui.js执行网页中的脚本,比如:
<script>
function myalert(){
window.ec.toast("怎么了");
}
</script>
调用方法为:
if(ui.mainWebview){
ui.mainWebview.quickCallJs("myalert();");
}
一些基础:
启动脚本,
在网页中window.ec.start();
在ui.js中ui.start();
停止脚本,
exit();
终止一切线程
thread.stopAll();
本节介绍结束。