浏览器H5方法小结

YYPOST群发软件 · 发表于昨天 08:30

浏览器H5方法小结

/**
* 安卓H5与原生交互整合脚本（ES5+Rhino兼容）
* 用途：H5调用原生API + APP调用H5逻辑
* 使用：直接在Rhino引擎执行，或拆分H5/APP代码分别部署
🍎交流QQ群711841924群一，苹果内测群，528816639
*/
// ==================================================
// 一、核心API方法（H5调用原生专用）
// ==================================================
// 1. H5执行APP端JS文件
function runJsFile(file) {
window.at.runJsFile(file);
}
// 2. H5调用APP端指定方法（多参数用JSON字符串）
function callAppFunction(funname, arg) {
window.at.callFunction(funname, arg); // 兼容window.at.callFun
}
// 3. 获取项目根目录
function getAppRootPath() {
var rootPath = window.at.getRootPath();
printl("项目根目录：" + rootPath);
return rootPath;
}
// 4. 获取项目资源目录
function getAppResourcesPath() {
var resPath = window.at.getResourcesPath();
printl("资源目录：" + resPath);
return resPath;
}
// 5. 存储数据到APP本地文件
function setAppConfig(path, arg, value) {
window.at.setConfig(path, arg, value);
printl("数据存储成功：" + path + "|" + arg);
}
// 6. 从APP本地文件读取数据
function getAppConfig(path, arg, defaultValue) {
var data = window.at.getConfig(path, arg, defaultValue);
printl("读取数据：" + data);
return data;
}
// 7. H5向APP传公共变量
function setAppPublicData(key, value) {
window.at.publicSet(key, value);
printl("公共变量设置：" + key + "=" + value);
}
// 8. H5从APP读公共变量
function getAppPublicData(key) {
var value = window.at.publicGet(key);
printl("公共变量读取：" + key + "=" + value);
return value;
}
// ==================================================
// 二、H5示例代码（复制此变量内的字符串，保存为.html文件）
// ==================================================
var H5_DEMO_HTML = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5-原生交互演示</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {background:#222;color:#fff;padding:20px;font-family:Arial;}
.form-group {margin-bottom:20px;}
input,select,button {background:#333;color:#fff;border:none;border-radius:5px;padding:10px;margin-right:10px;}
button {background:#4CAF50;width:60%;font-size:20px;margin-top:20px;cursor:pointer;}
</style>
<script language="JavaScript">
// 调用APP的main方法
function callAppMain() {
var inputVal = document.getElementById("input1").value;
callAppFunction("main", inputVal);
}
// 执行APP代码块
function runAppJs() {
window.at.runJs(function() {
printl("H5触发APP执行");
auto.home();
}.toString());
}
// 执行APP JS文件
function runAppJsFile() {
runJsFile("主脚本.js");
}
// 测试配置读写
function testConfig() {
var resPath = getAppResourcesPath();
var path = resPath + "test.txt";
setAppConfig(path, "user", "testUser");
var user = getAppConfig(path, "user", "default");
alert("读取用户名：" + user);
}
// 测试公共变量
function testPublicData() {
setAppPublicData("h5Val", document.getElementById("input1").value);
var appVal = getAppPublicData("appInfo");
alert("APP回传：" + appVal);
}
</script>
</head>
<body>
<h1>H5-原生交互演示</h1>
<div class="form-group">
<label>输入框：</label>
<input type="text" id="input1" value="测试数据">
</div>
<button onclick="callAppMain()">调用APP main</button>
<button onclick="runAppJs()">执行APP代码</button>
<button onclick="runAppJsFile()">执行APP JS文件</button>
<button onclick="testConfig()">测试配置读写</button>
<button onclick="testPublicData()">测试公共变量</button>
</body>
</html>
`;
printl("H5代码已生成，提取H5_DEMO_HTML变量内容保存为.html文件");
// ==================================================
// 三、APP端调用H5代码（Rhino引擎直接执行）
// ==================================================
// 1. 初始化WebView
function initWebView() {
var ac = new activity();
var layout = [
'<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"',
' android:layout_width="match_parent"',
' android:layout_height="match_parent"',
' android:orientation="vertical">',
' <WebView android:id="@+id/web"',
' android:layout_width="match_parent"',
' android:layout_height="match_parent" />',
'</LinearLayout>'
].join('\n');
ac.loadXML(layout);
sleep.millisecond(400);
var web = ac.findWebViewById("web");
printl("WebView初始化完成");
return web;
}
// 2. 加载H5页面
function loadH5(webView, h5Path) {
webView.url(h5Path);
printl("加载H5：" + h5Path);
sleep.millisecond(1000); // 等待加载
}
// 3. 向H5注入JS
function runH5Js(webView, jsCode) {
var result = webView.runWebJs(jsCode);
printl("H5 JS执行结果：" + result);
return result;
}
// 4. APP端方法（供H5调用）
function main(arg) {
printl("APP收到H5参数：" + arg);
// 解析多参数（若H5传JSON）
if (arg.indexOf("{") !== -1) {
var obj = JSON.parse(arg);
printl("解析参数：" + obj.name + "," + obj.age);
}
// 向H5回传数据
publicData.set("appInfo", "已收到：" + arg);
}
// 5. APP调用H5完整流程
function appH5Flow() {
var web = initWebView();
// 加载H5（需替换为实际保存的.html路径）
loadH5(web, "/代码/h5Demo.html");
// 向H5注入JS修改输入框
runH5Js(web, 'document.getElementById("input1").value = "APP注入值"');
// 触发H5按钮点击
runH5Js(web, 'document.querySelector("button[onclick=\'callAppMain()\']").click()');
}
// 执行APP-H5交互流程（取消注释即可运行）
// appH5Flow();
// ==================================================
// 四、使用说明
// ==================================================
/*
1. H5部署：
- 复制H5_DEMO_HTML变量内的字符串，保存为"h5Demo.html"
- 将文件放入APP可访问路径（如"/代码/"）
2. APP执行：
- 在Rhino引擎中运行此JS文件
- 取消"appH5Flow();"注释，启动完整交互
3. 注意：
- 确保APP有SD卡读写权限（配置读写需）
- "主脚本.js"需存在于APP根目录（若执行runAppJsFile）
- 日志通过printl输出，在Rhino控制台查看
*/

复制代码

1. 方法：runJsFile（H5 运行 APP JS 文件）

信息类别	详情说明
方法作用	H5 页面调用并执行 APP 端指定的 JS 脚本文件
方法语法	window.at.runJsFile(file)
参数详情	名称：file类型：String说明：需执行的 APP 端 JS 文件路径或文件名（如 “主脚本.js”）
返回值	无
核心功能描述	从 H5 端触发，加载并运行 APP 本地的 JS 文件，实现调用 APP 端预设脚本的需求
调用示例代码	// H5中调用APP端的“主脚本.js” window.at.runJsFile('主脚本.js');

2. 方法：callFunction /callFun（H5 执行脚本方法）

信息类别	详情说明
方法作用	H5 页面调用 APP 原生脚本中定义的指定方法，并传递参数
方法语法	window.at.callFunction(funname, arg) 或 window.at.callFun(funname, arg)
参数详情	1. 名称：funname类型：String说明：APP 端需调用的方法名2. 名称：arg类型：String说明：传递给方法的参数（多参数需用 JSON 字符串封装，如'{"name":"test","value":123}' ）
返回值	无
核心功能描述	建立 H5 与 APP 原生脚本的方法调用通道，支持 H5 向 APP 传递数据并触发指定逻辑
调用示例代码	// H5调用APP端“main”方法，传递参数“hello” window.at.callFun('main', 'hello'); // 多参数示例（JSON字符串） window.at.callFun('submitData', '{"username":"user1","age":20}');

3. 方法：getRootPath（获取项目根目录）

信息类别	详情说明
方法作用	H5 页面获取当前 APP 项目的根目录路径，用于后续文件操作（如读写文件）
方法语法	window.at.getRootPath()
参数详情	无
返回值	类型：String说明：返回项目根目录的绝对路径（如 “/storage/emulated/0/APP 名称 /”）
核心功能描述	提供项目根路径基准，方便 H5 拼接文件路径，实现对 APP 本地文件的访问
调用示例代码	// H5获取项目根目录并打印 var rootPath = window.at.getRootPath();console.log('项目根目录：', rootPath);

4. 方法：getResourcesPath（获取项目资源目录）

信息类别	详情说明
方法作用	H5 页面获取当前 APP 项目的资源目录路径，用于访问 APP 预设的资源文件（如配置文件）
方法语法	window.at.getResourcesPath()
参数详情	无
返回值	类型：String说明：返回项目资源目录的绝对路径（如 “/storage/emulated/0/APP 名称 /resources/”）
核心功能描述	定位 APP 资源文件存放路径，便于 H5 读取或写入资源目录下的文件（如配置数据）
调用示例代码	// H5获取资源目录并拼接文件路径 var resPath = window.at.getResourcesPath(); var configPath = resPath + 'config.txt'; // 资源目录下的config.txt console.log('配置文件路径：', configPath);

5. 方法：setConfig（存储数据到指定路径）

信息类别	详情说明
方法作用	H5 页面将数据存储到 APP 本地指定路径的文件中，实现数据持久化（如保存配置）
方法语法	window.at.setConfig(path, arg, value)
参数详情	1. 名称：path类型：String说明：数据存储的文件路径（如 “/sdcard/1.txt” 或资源目录路径）2. 名称：arg类型：String说明：数据存储的参数标识（用于后续读取时定位数据）3. 名称：value类型：String说明：需存储的具体数据内容
返回值	无
核心功能描述	支持 H5 向 APP 本地文件写入数据，可指定存储路径和参数标识，便于后续精准读取
调用示例代码	// 1. 存储到SD卡根目录 window.at.setConfig('/sdcard/1.txt', 'a', '1'); // 2. 存储到资源目录（先获取资源路径） var resPath = window.at.getResourcesPath(); window.at.setConfig(resPath + '1.txt', 'userInfo', '{"name":"test"}');

6. 方法：getConfig（从指定路径读取数据）

信息类别	详情说明
方法作用	H5 页面从 APP 本地指定路径的文件中读取数据，获取之前通过 setConfig 存储的内容
方法语法	window.at.getConfig(path, arg, value)
参数详情	1. 名称：path类型：String说明：数据读取的文件路径（需与存储时路径一致）2. 名称：arg类型：String说明：数据读取的参数标识（需与存储时 arg 一致）3. 名称：value类型：String说明：默认值，当文件中无对应数据时返回该值
返回值	类型：String说明：返回读取到的数据（有数据则返回实际值，无数据则返回默认值）
核心功能描述	配合 setConfig 使用，实现 H5 对 APP 本地存储数据的读取，支持默认值兜底
调用示例代码	// 1. 从SD卡读取数据（默认值为“0”） var data1 = window.at.getConfig('/sdcard/1.txt', 'a', '0');// 2. 从资源目录读取数据（默认值为“{}”） var resPath = window.at.getResourcesPath(); var userInfo = window.at.getConfig(resPath + '1.txt', 'userInfo', '{}'); console.log('用户信息：', userInfo);

7. 方法：publicSet（公共变量传参）

信息类别	详情说明
方法作用	H5 页面向 APP 原生端的公共变量中设置键值对，实现 H5 到 APP 的简单数据传递
方法语法	window.at.publicSet(key, value)
参数详情	1. 名称：key类型：String说明：公共变量的键名（用于 APP 端识别数据）2. 名称：value类型：String说明：公共变量的键值（需传递给 APP 的数据）
返回值	无
核心功能描述	轻量级数据传递方式，无需文件操作，直接通过公共变量实现 H5 与 APP 的数据交互
调用示例代码	// H5向APP公共变量设置“a=1” window.at.publicSet('a', '1'); // APP端对应取值方式：publicData.get('a')

8. 方法：publicGet（公共变量读参）

信息类别	详情说明
方法作用	H5 页面从 APP 原生端的公共变量中读取指定键名对应的值，获取 APP 传递的数据
方法语法	window.at.publicGet(key)
参数详情	名称：key类型：String说明：需读取的公共变量键名（需与 APP 端设置的键名一致）
返回值	类型：String说明：返回公共变量中对应键名的 value 值
核心功能描述	配合 publicSet 使用，实现 APP 到 H5 的轻量级数据传递，无需文件读写操作
调用示例代码	// H5读取APP公共变量中“a”的值 var data = window.at.publicGet('a'); console.log('公共变量a的值：', data); // APP端对应设值方式：publicData.set('a', '1')

9. 方法：url /loadUrl（APP 加载 H5 页面）

信息类别	详情说明
方法作用	APP 端通过 WebView 控件加载指定的 H5 页面（支持本地路径或网络 URL）
方法语法	web1.url(url) 或 web1.loadUrl(url) （web1 为 WebView 控件实例）
参数详情	名称：url类型：String说明：H5 页面路径，本地路径如 “/ 代码 /h5.html”，网络路径如 “https://xxx.com/h5 ”
返回值	无
核心功能描述	APP 端初始化 H5 页面的核心方法，建立 WebView 与 H5 页面的关联
调用示例代码	// 1. APP初始化WebView控件 var ac = new activity(); ac.loadXML('<!-- 布局中包含WebView（id为web） -->'); var web1 = ac.findWebViewById('web'); // 2. 加载本地H5页面 web1.url('/代码/h5.html'); // 3. 加载网络H5页面 // web1.url('https://xxx.com/test.html');

10. 方法：runWebJs（APP 执行 H5 的 JS 代码）

信息类别	详情说明
方法作用	APP 端向 WebView 中的 H5 页面注入并执行 JS 代码，实现 APP 到 H5 的逻辑触发
方法语法	web1.runWebJs(jscode) （web1 为 WebView 控件实例）
参数详情	名称：jscode类型：String说明：需在 H5 中执行的 JS 代码字符串（如 “alert ('123')”）
返回值	类型：String说明：返回 JS 代码执行后的结果（类似 eval 执行结果，即最后一个变量的值）
核心功能描述	APP 主动控制 H5 页面逻辑，如触发 H5 弹窗、调用 H5 方法、修改 H5 页面数据
调用示例代码	// 1. APP向H5注入弹窗代码 web1.runWebJs('alert("APP触发H5弹窗")'); // 2. APP调用H5中的test方法 web1.runWebJs('test()'); // 需确保H5中已定义test方法 // 3. APP获取H5执行结果 var result = web1.runWebJs('1 + 2'); // result值为“3” console.log('H5代码执行结果：', result);