Skip to main content

原生UI定制

说明​

  • EasyClick 使用WebView支撑HTML的UI方式，并且扩展了JS方法，用于控制EC程序。
  • 新建工程时候可以对应的模板，推荐使用Materialize模板，文档网址 http://www.materializecss.cn
  • 也可以自己编写精美的HTML页面，更多JS方法的使用请参考模板中的用法

多tab标签支持​

只要在工程的layout工程下新建一个ui.js文件即可 内容是

function main() {
    ui.layout("参数配置", "main.html");
    ui.layout("注册使用", "reg.html");
    ui.layout("使用说明", "intr.html");
}

main();

脚本如何与JS交互​

编写xml视图​

  • 使用webview加载本地的main.html，tag=web
  • 注意:需要layout.attr.xsd和layout.xsd两个文件,创建原生ui项目的layout文件下手动复制到当前项目的layout下
<?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">
    <WebView android:layout_width="wrap_content"
              android:tag="web"
              android:layout_height="wrap_content"
              android:url="main.html"/>

</LinearLayout>

加载 xml​

  • 在ui.js中加载xml视图
function main() {
    ui.layout("参数配置", "main.xml");
}

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>
<body style="margin-left: 10px;margin-right: 10px">
我是测试网页
</body>
<script>
    //暴露给webview调用
    function myalert() {
        alert("fdsafsad");
        //存储数据到内存中，给脚本读取
        window.ec.putShareData("mymsg", "我是网页的临时数据");
    }

    //暴露给webview调用 带参数
    function myalert(msg) {
        alert("我是msg " + msg);
    }
</script>
</html>

脚本中调用​

  • 在js/main.js脚本中调用视图
function main() {
    //重置变量
    ui.resetUIVar();
    //读取UI存储到内存中的数据
    logd(ui.getShareData("mymsg"))
    logd(ui.web)
    //使用ui中 tag= web的视图
    if (ui.web) {
        //myalert 是HTML中暴露的方法
        //执行网页中的js方法
        ui.web.quickCallJs("myalert();");
        ui.web.quickCallJs("myalert('bbbbb');");
    }
}

main();

浏览器扩展方法​

  • 浏览器扩展的方法，主要用于网页和EC程序进行交互，并且这些方法只能在网页中调用才行

调用自定义扩展​

call 调用扩展函数​

  • 调用脚本或者ui.js注入进来的扩展函数
  • @param funcName 注入的函数名称
  • @param data 可以是普通的字符串，也可以是JSON的字符串
  • @return {string} 调用的扩展函数返回的数据
// ui.js中的注入
function main() {
    //UI中进行注入新的扩展
    ui.registeH5Function("customFunction", function (data) {
        logd("h5 call-" + data);
        //返回给网页的数据
        return new Date().toString()
    })
    ui.layout("main", "main.html");
}

main();

网页中的调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="test()">测试扩展函数</button>
<script>
    function test() {
        //调用ui.js注入进来的扩展
        let d = window.ec.call('customFunction', JSON.stringify({'action': 'android.settings.SETTINGS'}));
        console.log("ddd  " + d)
    }
</script>
</body>
</html>

启动脚本​

window.ec.start()

停止脚本​

window.ec.stopTask()

脚本是否正在运行​

window.ec.isScriptRunning()

隐藏开始按钮​

window.ec.hideStartBtn()

显示开始按钮​

window.ec.displayStartBtn()

获取所有配置的JSON字符串​

var s = window.ec.getConfigJSON();
alert(s);

从配置文件获取单个配置的字符串​

var s = window.ec.getConfig("name");
alert(s);

保存单个配置到配置文件​

var s = window.ec.saveConfig("name", "123");
alert(s);

移出所有UI配置​

var s = window.ec.removeAllUIConfig();
alert(s);

保存数据到存储区​

  • 这个数据是保存在内存中的
window.ec.putShareData("name", "123");

从存储区读取数据​

  • 这个数据是在内存中的
var d = window.ec.getShareData("name");
alert(d);

清空存储区数据​

  • 这个数据是在内存中的
var d = window.ec.clearAllShareData();
alert(d);

打开EC的系统设置​

window.ec.openECSystemSetting()

保存EC的系统参数​

  • 设置EC的系统参数
  • @param params map形式例如 {"running_mode":"无障碍"},
  • "running_mode":"无障碍",
  • "auto_start_service":"是",
  • "log_float_window":"否",
  • "ctrl_float_window":"否"
  • "service_start_run_script":"否"
  • 参数解释有：
  • running_mode : 无障碍，代理两种
  • auto_start_service : 开机启动服务 值有 是，否 两种
  • log_float_window : 日志悬浮窗展示 值有 是，否 两种
  • ctrl_float_window : 启停控制悬浮窗展示 值有 是，否 两种
  • service_start_run_script : 服务被重启后自动重新运行 值有 是，否 两种
  • home_key_start_stop : 三击HOME启停脚本 值有 是，否 两种
  • @return 布尔型 true 是 false 否
var m = {
    "running_mode": "无障碍",
    "auto_start_service": "是",
    "log_float_window": "否",
    "ctrl_float_window": "否"
};
window.ec.setECSystemConfig(JSON.stringify(m));

显示Toast消息​

window.ec.toast("我是toast消息");

显示日志消息窗口​

window.ec.showLogWindow();

关闭日志消息窗口​

window.ec.closeLogWindow();

显示日志消息​

window.ec.logd("我是日志");

显示启停控制窗口​

window.ec.showCtrlWindow();

关闭启停控制窗口​

window.ec.closeCtrlWindow();

打开其他应用程序 openActivity​

//打开浏览器下载测试
var m = {
    "action": "android.intent.action.VIEW",
    "uri": "https://imtt.dd.qq.com/16891/apk/55259F8EF9824AF1BF80106B0E00BCD1.apk?"

};
var x = window.ec.openActivity(JSON.stringify(m));
window.ec.logd("x " + x);

var map = {
    "uri": "xx://xx/live/6701887916223941379",
};
window.ec.openActivity(JSON.stringify(map));

服务状态控制​

是否是无障碍服务模式​

var s = window.ec.isAccMode();
alert(s);

是否是代理服务模式​

var s = window.ec.isAgentMode();
alert(s);

无障碍服务是否已经启动​

var s = window.ec.isAccServiceOk();
alert(s);

代理服务是否已经启动​

var s = window.ec.isAgentServiceOk();
alert(s);

启动服务环境​

var s = window.ec.startEnv();
alert(s);

悬浮窗控制​

是否有悬浮窗权限​

var s = window.ec.hasFloatViewPermission();
alert(s);

请求悬浮窗权限​

//参数是超时时间，单位是秒
var s = window.ec.requestFloatViewPermission(10);
alert(s);

展示浮窗​

var m = {
    "path": "main.html",
    "tag": "tag",
    "titleBg": "#888888",
    "x": 10,
    "y": 10,
    "w": 100,
    "h": 200
};
var xd = window.ec.showFloatView(JSON.stringify(m));
alert(xd);

关闭浮窗​

var m = {
    "path": "main.html",
    "tag": "tag",
    "titleBg": "#888888",
    "x": 10,
    "y": 10,
    "w": 100,
    "h": 200
};
var xd = window.ec.showFloatView(JSON.stringify(m));
setTimeout(function () {
    window.ec.closeFloatView("tag");
}, 3000);
alert(xd);

关闭所有浮窗，不包含日志悬浮窗​

var m = {
    "path": "main.html",
    "tag": "tag",
    "titleBg": "#888888",
    "x": 10,
    "y": 10,
    "w": 100,
    "h": 200
};
var xd = window.ec.showFloatView(JSON.stringify(m));
setTimeout(function () {
    window.ec.closeAllFloatView();
}, 3000);
alert(xd);

定时任务​

开启一个定时任务​

  • 开启一个定时脚本任务
  • @param tag 任务的唯一标示，不能为空，脚本中可以使用readConfigString("jobTaskTag")获取当前tag值，判断是那个任务过来执行的
  • @param execTime 定时时间格式: 2020-04-17 19:20:00，或者直接是秒数字，例如 3，代表3秒后
  • @param cancelBeforeRunning
  • @return 整型 jobid
var time = "2020-04-17 09:00:00";
var id = window.ec.startJob("task1", time, true);
alert("job id " + id);

获取所有定时任务TAG​

var t = window.ec.getAllJobTag();
alert("job tags " + t);

取消所有定时任务​

var t = window.ec.cancelAllJob();
alert("job cancel " + t);

取消指定TAG定时任务​

//参数task1 是创建定时任务的tag值
var t = window.ec.cancelJob("task1");
alert("job cancel " + t);