H5 JS与UI交互

说明

本章节主要讲述JS与UI元素进行交互

如何使用

在工程的layout文件夹下新建一个ui.js和index.html文件，内容为

1
function main() {
2
    ui.layout("index", "index.html");
3
}
4

5
main();

以上的操作即可完成一个简单的展示 index.html 的操作

H5调用ec的函数

新建一个iOS脱机版工程，默认的例子都在里面

EC H5预定义函数

自动化服务是否正常 isServiceOk

1
// H5中调用，不是脚本
2
// 异步回调
3
window.ec.isServiceOk(function (resp) {
4
    // resp = true 代表自动化服务正常
5
});

启动脚本 start

1
// H5中调用，不是脚本
2
// 异步回调
3
window.ec.start(function (resp) {
4
    // resp = true 代表正常
5
});

停止脚本 stopTask

1
// H5中调用，不是脚本
2
// 异步回调
3
window.ec.stopTask(function (resp) {
4
    // resp = true 代表正常
5
});

脚本是否运行 isScriptRunning

1
// H5中调用，不是脚本
2
// 异步回调
3
window.ec.isScriptRunning(function (resp) {
4
    // resp = true 代表正常
5
});

获取UI配置 getConfig

1
// H5中调用，不是脚本
2
// 异步回调
3
window.ec.getConfig("key", function (resp) {
4
    console.log(resp)
5
});

移出UI配置 removeConfig

1
// H5中调用，不是脚本
2
// 异步回调
3
window.ec.removeConfig("key", function (resp) {
4
    console.log(resp)
5
});

保存UI配置 saveConfig

1
// H5中调用，不是脚本
2
// 异步回调
3
window.ec.saveConfig("key", "data", function (resp) {
4
    console.log(resp)
5
});

获取所有UI配置 getAllConfig

1
// H5中调用，不是脚本
2
// 异步回调
3
window.ec.getAllConfig(function (resp) {
4
    console.log(resp)
5
});

暂停和继续

暂停继续 setScriptPause

1
function pause() {
2
    // setScriptPause
3
    // {"pause":true,"timeout":3330} 参数，pause:true代表暂停，false代表继续，
4
    // timeout: pause=true的时候，单位是毫秒，大于0代表多长时间自动恢复执行，等于0代表等待用户继续
5
    window.ec.setScriptPause({"pause": true, "timeout": 3330}, function (resp) {
6
        checkPause()
7
    });
8
}
9

10
function checkPause() {
11
    window.ec.isScriptPause(function (resp) {
12
        alert("isScriptPause " + resp)
13
    });
14
}

暂停状态判断 isScriptPause

1
function checkPause() {
2
    window.ec.isScriptPause(function (resp) {
3
        // resp = true 代表 暂停中
4
        alert("isScriptPause " + resp)
5
    });
6
}

开启调试服务

startDebugServer 开启调试服务

已经打包的也可以开启调试服务，给idea链接
@return 布尔型 true 代表成功，false 代表失败

1
function main() {
2
    logd(ui.startDebugServer())
3
}
4

5
main();

扩展H5功能

registeH5Function 向H5注入扩展函数

向网页中注入一个JS函数，H5可以调用该函数，以实现脚本和HTML的互通扩展
@param funcName 注入的函数名称
@param callback 回调常见例子
@return 布尔型 true 代表成功，false 代表失败

1
 // ui.js中的注入
2
function main() {
3
    //UI中进行注入新的扩展
4
    ui.registeH5Function("customFunction", function (data) {
5
        logd("h5 call-> " + data);
6
        //返回给网页的数据
7
        return new Date().toString()
8
    })
9
    ui.layout("main", "main.html");
10
}
11

12
main();

网页中的调用

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<body>
8
<button onclick="test()">测试扩展函数</button>
9
<script>
10
    function test() {
11
        //调用ui.js注入进来的扩展
12
        window.ec.call('customFunction',
13
                JSON.stringify({'action': '111'}),
14
                function (resp) {
15
                    console.log("ddd  " + resp)
16
                });
17

18
    }
19
</script>
20
</body>
21
</html>