easyclick 边学边做入门基础脚手架

这东西跟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();

本节介绍结束。

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注