UI与脚本互通交互

说明

如何使用

在idea工程中新建脱机的项目，自带的就有交互的实例

H5->ui.js->脚本调用的流程

H5 文件内容

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6
    <link href="htmljs/bootstrap.min.css" rel="stylesheet">
7
    <script src="htmljs/bootstrap.min.js"></script>
8
    <script src="htmljs/jquery.min.js"></script>
9
</head>
10

11
<body>
12
<div class="alert alert-info" role="alert">
13
    开始脚本配置
14
</div>
15
<div style="margin: 10px">
16
    <div class="form-check form-switch">
17
        <input class="form-check-input" type="checkbox" role="switch" id="autoService" disabled>
18
        <label class="form-check-label" for="autoService">自动化服务</label>
19
        <span class="badge text-bg-info bg-primary" onclick="refreshIsServiceOk()">刷新</span>
20
        <p>请点击代理程序图标<br/>或者使用激活器激活自动化<br/>
21
            手机上出现了Automation Running字样即可
22
        </p>
23
    </div>
24
    <br/>
25
    <div class="input-group mb-3">
26
        <span class="input-group-text" id="username1">姓名: </span>
27
        <input type="text" class="form-control" placeholder="" id="username" aria-label="username"
28
               aria-describedby="basic-addon1">
29
    </div>
30
    <div class="form-group">
31
        <label>爱好: </label>
32
        <label class="checkbox-inline">
33
            <input type="checkbox" name="aihao1" id="aihao1" value="1"> 游戏
34
        </label>
35
        <label class="checkbox-inline">
36
            <input type="checkbox" name="aihao2" id="aihao2" value="2"> 摄影
37
        </label>
38
        <label class="checkbox-inline">
39
            <input type="checkbox" name="aihao3" id="aihao3" value="3"> 旅游
40
        </label>
41
    </div>
42
    <br/>
43
    <div class="form-group">
44
        <label>性别: </label>
45
        <label class="radio-inline">
46
            <input type="radio" value="1" name="sex"> 男性
47
        </label>
48
        <label class="radio-inline">
49
            <input type="radio" value="2" name="sex"> 女性
50
        </label>
51
        <label class="radio-inline">
52
            <input type="radio" value="3" name="sex"> 中性
53
        </label>
54
    </div>
55
    <br/>
56
    <div class="input-group mb-3">
57
        <span class="input-group-text" id="basic-addon1">功能 </span>
58
        <select class="form-select" aria-label="" id="func">
59
            <option value="1">功能1</option>
60
            <option value="2">功能2</option>
61
            <option value="3">功能3</option>
62
        </select>
63
    </div>
64
    <div>
65
        <button type="button" class="btn btn-primary" onclick="saveParam()">保存参数</button>
66
        <button type="button" class="btn btn-success" onclick="start()">执行脚本</button>
67
        <button type="button" class="btn btn-primary" onclick="pause()">暂停</button>
68
        <button type="button" class="btn btn-success" onclick="continueRun()">继续</button>
69

70
    </div>
71
    <div>
72
        <button type="button" class="btn btn-success" onclick="h5calltest()">脚本注入函数测试</button>
73
    </div>
74
</div>
75
<script>
76
    function updateUserName(data) {
77
        $("#username").val(data)
78
    }
79
    // 用户点击这个函数 会调用到 ui.js的h5calltest注入函数
80
    function h5calltest() {
81
        window.ec.call("h5calltest", "我是H5传递的数据")
82
    }
83

84
    function pause() {
85
        window.ec.setScriptPause({"pause": true, "timeout": 3330}, function (resp) {
86
            checkPause()
87
        });
88
    }
89

90
    function checkPause() {
91
        window.ec.isScriptPause(function (resp) {
92
            alert("isScriptPause " + resp)
93
        });
94
    }
95
    function continueRun() {
96
        window.ec.setScriptPause({"pause":false,"timeout":0},function (resp) {
97

98
        });
99
    }
100
    function refreshIsServiceOk() {
101
        window.ec.isServiceOk(function (resp) {
102
            if (resp) {
103
                $("#autoService").attr("checked", true)
104
            } else {
105
                $("#autoService").attr("checked", false)
106
            }
107
        })
108
    }
109

110
    function resetParam() {
111
        window.ec.isServiceOk(function (resp) {
112
            if (resp) {
113
                $("#autoService").attr("checked", true)
114
            } else {
115
                $("#autoService").attr("checked", false)
116
            }
117
        })
118
        // 读取username
119
        window.ec.getConfig("uiconfig", function (resp) {
120
            if (resp == null || resp == undefined) {
121
                return
122
            }
123
            console.log("resp " + resp)
124
            let p = JSON.parse(resp)
125
            $("#username").val(p["username"])
126
            $("#func").val(p["func"])
127
            if (p["aihao1"]) {
128
                $("#aihao1").prop("checked", true)
129
            }
130
            if (p["aihao2"]) {
131
                $("#aihao2").prop("checked", true)
132
            }
133
            if (p["aihao3"]) {
134
                $("#aihao3").prop("checked", true)
135
            }
136
            $("input[type=radio][name='sex'][value='" + p["sex"] + "']").attr("checked", 'checked')
137
        })
138
    }
139

140
    function saveParam() {
141
        let username = $("#username").val()
142
        var aihao1 = $("#aihao1").prop("checked");
143
        var aihao2 = $("#aihao2").prop("checked");
144
        var aihao3 = $("#aihao3").prop("checked");
145
        let sex = $("input[name='sex']:checked").val();
146
        let func = $("#func").val()
147
        // 组装为json
148
        let mp = {
149
            "username": username,
150
            "aihao1": aihao1,
151
            "aihao2": aihao2,
152
            "aihao3": aihao3,
153
            "sex": sex,
154
            "func": func
155
        }
156
        let j = JSON.stringify(mp)
157
        console.log("saveParam " + j)
158
        window.ec.saveConfig("uiconfig", j, function (resp) {
159
            if (resp) {
160
                alert("保存成功")
161
            } else {
162
                alert("保存失败")
163
            }
164
            console.log("保存结果: " + resp)
165
        })
166
    }
167

168
    function start() {
169
        window.ec.start()
170
    }
171

172
    $(function () {
173
        resetParam()
174
    });
175
</script>
176
</body>
177
</html>

ui.js 文件内容

1
// ui.js 文件内容
2
function main() {
3
    ui.layout("main", "index.html")
4
    uiRegToScript();
5
}
6

7
function uiRegToScript() {
8
    // // UI注入函数给脚本，方便脚本更新UI
9
    // // 注入方向  ui.js 调用 ui.registeFunctionToScript，然后脚本执行的时候,调用 callUIRegisteFunction
10
    // // 注册一个函数 可以让js脚本调用
11
    // // 脚本调用ui.js的ui-hello->调用到H5的updateUserName函数
12
    // ui.registeFunctionToScript("ui-hello", function (data) {
13
    //     logd("UI hello " + data)
14
    //     // 调用到 H5页面中
15
    //     ui.evaluateJavaScript("updateUserName('" + data + "');")
16
    //     return ""
17
    // })
18

19
    // H5->调用UI.JS的h5calltest->调用到脚本的js中的script-hello
20
    // 注册一个函数给H5调用
21
    ui.registeH5Function("h5calltest", function (data) {
22
        logd("h5calltest data: " + data)
23
        // 这里可以调用脚本注入的script-hello函数
24
        let bb = ui.callScriptRegisteFunction("script-hello", data)
25
        logd("bb " + bb)
26
    })
27

28
}
29
main()

main.js脚本内容

1
function main() {
2
    //开始再这里编写代码了！！
3
    logd("检查自动化环境...")
4
    //如果自动化服务正常
5
    regToUI()
6

7
    logd("开始执行脚本...")
8

9
    // 如果是循环执行 一定要使用脚本是否结束为标志，不能使用while true的方式
10
    while (!isScriptExit()) {
11

12
        // 开始编写自己的业务逻辑
13
        sleep(1000)
14
        logd(new Date())
15
    }
16
}
17

18
function regToUI() {
19
    // 以下都是例子，具体请看 ui.js的uiRegToScript 代码
20
    // 注入 script-hello 给UI.js 调用
21
    registeScriptFunctionToUI("script-hello", function (data) {
22
        // 如果 脚本不在运行 可能调用不到这个函数
23
        logd("h5 传递的数据 " + data)
24
        return "script say hello"
25
    })
26

27
    // // 调用UI.js 注入的 ui-hello 函数
28
    // let result = callUIRegisteFunction("ui-hello", "我的js数据")
29
    // logd("ui.js 返回的数据 " + result)
30

31
    // 需要的时候进行移出即可
32
    //removeAllScriptToUIfFunc();
33
    //removeAllUIToScriptFunc();
34

35
}
36

37
main();

脚本->ui.js->H5的调用流程

main.js脚本内容

1
function main() {
2
    //开始再这里编写代码了！！
3
    logd("检查自动化环境...")
4
    //如果自动化服务正常
5
    regToUI()
6
    // 如果是循环执行 一定要使用脚本是否结束为标志，不能使用while true的方式
7
    while (!isScriptExit()) {
8

9
        // 开始编写自己的业务逻辑
10
        sleep(1000)
11
        logd(new Date())
12
        // 调用到 ui.js 注入的 ui-hello函数
13
        callUIRegisteFunction("ui-hello", "我的js数据:"+new Date())
14
    }
15
}
16

17
function regToUI() {
18
    // 以下都是例子，具体请看 ui.js的uiRegToScript 代码
19
    // 调用UI.js 注入的 ui-hello 函数
20
    let result = callUIRegisteFunction("ui-hello", "我的js数据")
21
    logd("ui.js 返回的数据 " + result)
22

23
    // 需要的时候进行移出即可
24
    //removeAllScriptToUIfFunc();
25
    //removeAllUIToScriptFunc();
26

27
}
28

29
main();

ui.js内容

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

6
function uiRegToScript() {
7
    // UI注入函数给脚本，方便脚本更新UI
8
    // 注入方向  ui.js 调用 ui.registeFunctionToScript，然后脚本执行的时候,调用 callUIRegisteFunction
9
    // 注册一个函数 可以让js脚本调用
10
    // 脚本调用ui.js的ui-hello->调用到H5的updateUserName函数
11
    ui.registeFunctionToScript("ui-hello", function (data) {
12
        logd("UI hello " + data)
13
        // 调用到 H5页面中
14
        ui.evaluateJavaScript("updateUserName('" + data + "');")
15
        return ""
16
    })
17

18
}
19
main()

H5文件内容

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6
    <link href="htmljs/bootstrap.min.css" rel="stylesheet">
7
    <script src="htmljs/bootstrap.min.js"></script>
8
    <script src="htmljs/jquery.min.js"></script>
9
</head>
10

11
<body>
12
<div class="alert alert-info" role="alert">
13
    开始脚本配置
14
</div>
15
<div style="margin: 10px">
16
    <div class="form-check form-switch">
17
        <input class="form-check-input" type="checkbox" role="switch" id="autoService" disabled>
18
        <label class="form-check-label" for="autoService">自动化服务</label>
19
        <span class="badge text-bg-info bg-primary" onclick="refreshIsServiceOk()">刷新</span>
20
        <p>请点击代理程序图标<br/>或者使用激活器激活自动化<br/>
21
            手机上出现了Automation Running字样即可
22
        </p>
23
    </div>
24
    <br/>
25
    <div class="input-group mb-3">
26
        <span class="input-group-text" id="username1">姓名: </span>
27
        <input type="text" class="form-control" placeholder="" id="username" aria-label="username"
28
               aria-describedby="basic-addon1">
29
    </div>
30
    <div class="form-group">
31
        <label>爱好: </label>
32
        <label class="checkbox-inline">
33
            <input type="checkbox" name="aihao1" id="aihao1" value="1"> 游戏
34
        </label>
35
        <label class="checkbox-inline">
36
            <input type="checkbox" name="aihao2" id="aihao2" value="2"> 摄影
37
        </label>
38
        <label class="checkbox-inline">
39
            <input type="checkbox" name="aihao3" id="aihao3" value="3"> 旅游
40
        </label>
41
    </div>
42
    <br/>
43
    <div class="form-group">
44
        <label>性别: </label>
45
        <label class="radio-inline">
46
            <input type="radio" value="1" name="sex"> 男性
47
        </label>
48
        <label class="radio-inline">
49
            <input type="radio" value="2" name="sex"> 女性
50
        </label>
51
        <label class="radio-inline">
52
            <input type="radio" value="3" name="sex"> 中性
53
        </label>
54
    </div>
55
    <br/>
56
    <div class="input-group mb-3">
57
        <span class="input-group-text" id="basic-addon1">功能 </span>
58
        <select class="form-select" aria-label="" id="func">
59
            <option value="1">功能1</option>
60
            <option value="2">功能2</option>
61
            <option value="3">功能3</option>
62
        </select>
63
    </div>
64
    <div>
65
        <button type="button" class="btn btn-primary" onclick="saveParam()">保存参数</button>
66
        <button type="button" class="btn btn-success" onclick="start()">执行脚本</button>
67
        <button type="button" class="btn btn-primary" onclick="pause()">暂停</button>
68
        <button type="button" class="btn btn-success" onclick="continueRun()">继续</button>
69

70
    </div>
71
    <div>
72
        <button type="button" class="btn btn-success" onclick="h5calltest()">脚本注入函数测试</button>
73
    </div>
74
</div>
75
<script>
76
    // ui.js 会回调到这个函数然后更新数据
77
    function updateUserName(data) {
78
        $("#username").val(data)
79
    }
80
    function h5calltest() {
81
        window.ec.call("h5calltest", "我是H5传递的数据")
82
    }
83

84
    function pause() {
85
        window.ec.setScriptPause({"pause": true, "timeout": 3330}, function (resp) {
86
            checkPause()
87
        });
88
    }
89

90
    function checkPause() {
91
        window.ec.isScriptPause(function (resp) {
92
            alert("isScriptPause " + resp)
93
        });
94
    }
95
    function continueRun() {
96
        window.ec.setScriptPause({"pause":false,"timeout":0},function (resp) {
97

98
        });
99
    }
100
    function refreshIsServiceOk() {
101
        window.ec.isServiceOk(function (resp) {
102
            if (resp) {
103
                $("#autoService").attr("checked", true)
104
            } else {
105
                $("#autoService").attr("checked", false)
106
            }
107
        })
108
    }
109

110
    function resetParam() {
111
        window.ec.isServiceOk(function (resp) {
112
            if (resp) {
113
                $("#autoService").attr("checked", true)
114
            } else {
115
                $("#autoService").attr("checked", false)
116
            }
117
        })
118
        // 读取username
119
        window.ec.getConfig("uiconfig", function (resp) {
120
            if (resp == null || resp == undefined) {
121
                return
122
            }
123
            console.log("resp " + resp)
124
            let p = JSON.parse(resp)
125
            $("#username").val(p["username"])
126
            $("#func").val(p["func"])
127
            if (p["aihao1"]) {
128
                $("#aihao1").prop("checked", true)
129
            }
130
            if (p["aihao2"]) {
131
                $("#aihao2").prop("checked", true)
132
            }
133
            if (p["aihao3"]) {
134
                $("#aihao3").prop("checked", true)
135
            }
136
            $("input[type=radio][name='sex'][value='" + p["sex"] + "']").attr("checked", 'checked')
137
        })
138
    }
139

140
    function saveParam() {
141
        let username = $("#username").val()
142
        var aihao1 = $("#aihao1").prop("checked");
143
        var aihao2 = $("#aihao2").prop("checked");
144
        var aihao3 = $("#aihao3").prop("checked");
145
        let sex = $("input[name='sex']:checked").val();
146
        let func = $("#func").val()
147
        // 组装为json
148
        let mp = {
149
            "username": username,
150
            "aihao1": aihao1,
151
            "aihao2": aihao2,
152
            "aihao3": aihao3,
153
            "sex": sex,
154
            "func": func
155
        }
156
        let j = JSON.stringify(mp)
157
        console.log("saveParam " + j)
158
        window.ec.saveConfig("uiconfig", j, function (resp) {
159
            if (resp) {
160
                alert("保存成功")
161
            } else {
162
                alert("保存失败")
163
            }
164
            console.log("保存结果: " + resp)
165
        })
166
    }
167

168
    function start() {
169
        window.ec.start()
170
    }
171

172
    $(function () {
173
        resetParam()
174
    });
175
</script>
176
</body>
177
</html>

ui.js可用函数

ui.registeFunctionToScript 注入函数给脚本用

注册一个函数，给脚本调用
适配EC iOS 脱机 5.10+
@param funcName 函数名称
@param callback 函数回调
@return {boolean} true 代表成功，false 代表失败

1
 // ui.js 文件
2
function main() {
3
    ui.registeFunctionToScript("ui-hello", function (data) {
4
        logd("ui hello call-> " + data);
5
        //返回给网页的数据
6
        return new Date().toString()
7
    })
8
    ui.layout("main", "main.html");
9
}
10

11
main();

ui.callScriptRegisteFunction 调用脚本注册的函数

调用脚本注册的函数
适配EC iOS 脱机 5.10+
@param funcName 函数名称
@param data 数据
@return {string} 返回的数据

1
 // ui.js 文件
2
function main() {
3
   // 调用脚本的注入过来的 script-hello 函数
4
    let a = ui.callScriptRegisteFunction("script-hello", "hello")
5
    logd(a)
6
}
7

8
main();

ui.evaluateJavaScript 调用H5页面的js代码

调用H5页面的js代码
适配EC iOS 脱机 5.10+
@param code js代码
@return {string} 返回的数据

1
 // ui.js 文件
2
function main() {
3
    let code = 'alert("123")';
4
    ui.evaluateJavaScript(code)
5
}
6

7
main();

ui.removeFunctionToScript 移出UI注入给脚本函数

移出UI注入给脚本函数
适配EC iOS 脱机 5.10+
@param funcName 函数名称
@return {boolean} true 代表成功，false 代表失败

1
 // ui.js 文件
2
function main() {
3
    ui.removeFunctionToScript("ui-hello")
4
}
5

6
main();

ui.removeAllScriptToUIfFunc 移出UI注入给脚本函数

移出所有脚本注册给UI的函数
适配EC iOS 脱机 5.10+
@return {boolean} true 代表成功，false 代表失败

1
 // ui.js 文件
2
function main() {
3
    ui.removeAllScriptToUIfFunc()
4
}
5

6
main();

ui.removeAllUIToScriptFunc 移出所有UI注册给脚本的函数

移出所有UI注册给脚本的函数
适配EC iOS 脱机 5.10+
@return {boolean} true 代表成功，false 代表失败

1
 // ui.js 文件
2
function main() {
3
    ui.removeAllUIToScriptFunc()
4
}
5

6
main();

脚本中可用函数

registeScriptFunctionToUI 注入函数给UI用

注册一段函数给UI使用
适配EC iOS 脱机 5.10+
@param funcName 函数名称
@param callback 函数回调
@return {boolean} true 代表成功，false 代表失败

1
 // main.js 文件
2
function main() {
3
    registeScriptFunctionToUI("script-hello", function (data) {
4
        logd("script hello call-> " + data);
5
        //返回给网页的数据
6
        return new Date().toString()
7
    })
8
}
9
main();

callUIRegisteFunction 调用UI注册给脚本的函数

调用UI注册给脚本的函数
适配EC iOS 脱机 5.10+
@param funcName 函数名称
@param data 数据
@return {string} 返回的数据

1
 // main.js 文件
2
function main() {
3
   // 调用脚本的注入过来的 ui-hello 函数
4
    let a = callUIRegisteFunction("ui-hello", "hello")
5
    logd(a)
6
}
7

8
main();

removeFunctionToUI 移出脚本注册给UI的函数

移出脚本注册给UI的函数
适配EC iOS 脱机 5.10+
@param funcName 函数名称
@return {boolean} true 代表成功 false代表失败

1
 // main.js 文件
2
function main() {
3
    removeFunctionToUI("script-hello")
4
}
5

6
main();

removeAllScriptToUIfFunc 移出所有脚本注册给UI的函数

移出所有脚本注册给UI的函数
适配EC iOS 脱机 5.10+
@return {boolean} true 代表成功，false 代表失败

1
 // main.js 文件
2
function main() {
3
  removeAllScriptToUIfFunc();
4
}
5

6
main();

removeAllUIToScriptFunc 移出所有UI注册给脚本的函数

移出所有UI注册给脚本的函数
适配EC iOS 脱机 5.10+
@return {boolean} true 代表成功，false 代表失败

1
 // main.js 文件
2
function main() {
3
  removeAllUIToScriptFunc();
4
}
5

6
main();