自动发帖软件

标题: 浏览器H5方法小结 [打印本页]
作者: 发帖软件    时间: 前天 08:29
标题: 浏览器H5方法小结
浏览器H5方法小结
浏览器H5方法小结 群发软件发帖工具
浏览器H5方法小结 群发软件发帖工具

浏览器H5方法小结 群发软件发帖工具

  1. /**
  2. * 安卓H5与原生交互整合脚本（ES5+Rhino兼容）
  3. * 用途：H5调用原生API + APP调用H5逻辑
  4. * 使用：直接在Rhino引擎执行，或拆分H5/APP代码分别部署
  5. 🍎交流QQ群711841924群一，苹果内测群，528816639
  6. */

  8. // ==================================================
  9. // 一、核心API方法（H5调用原生专用）
  10. // ==================================================
  11. // 1. H5执行APP端JS文件
  12. function runJsFile(file) {
  13.     window.at.runJsFile(file);
  14. }

  16. // 2. H5调用APP端指定方法（多参数用JSON字符串）
  17. function callAppFunction(funname, arg) {
  18.     window.at.callFunction(funname, arg); // 兼容window.at.callFun
  19. }

  21. // 3. 获取项目根目录
  22. function getAppRootPath() {
  23.     var rootPath = window.at.getRootPath();
  24.     printl("项目根目录：" + rootPath);
  25.     return rootPath;
  26. }

  28. // 4. 获取项目资源目录
  29. function getAppResourcesPath() {
  30.     var resPath = window.at.getResourcesPath();
  31.     printl("资源目录：" + resPath);
  32.     return resPath;
  33. }

  35. // 5. 存储数据到APP本地文件
  36. function setAppConfig(path, arg, value) {
  37.     window.at.setConfig(path, arg, value);
  38.     printl("数据存储成功：" + path + "|" + arg);
  39. }

  41. // 6. 从APP本地文件读取数据
  42. function getAppConfig(path, arg, defaultValue) {
  43.     var data = window.at.getConfig(path, arg, defaultValue);
  44.     printl("读取数据：" + data);
  45.     return data;
  46. }

  48. // 7. H5向APP传公共变量
  49. function setAppPublicData(key, value) {
  50.     window.at.publicSet(key, value);
  51.     printl("公共变量设置：" + key + "=" + value);
  52. }

  54. // 8. H5从APP读公共变量
  55. function getAppPublicData(key) {
  56.     var value = window.at.publicGet(key);
  57.     printl("公共变量读取：" + key + "=" + value);
  58.     return value;
  59. }


  62. // ==================================================
  63. // 二、H5示例代码（复制此变量内的字符串，保存为.html文件）
  64. // ==================================================
  65. var H5_DEMO_HTML = `
  66. <!DOCTYPE html>
  67. <html lang="en">
  68. <head>
  69.     <meta charset="UTF-8">
  70.     <title>H5-原生交互演示</title>
  71.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  72.     <style>
  73.         body {background:#222;color:#fff;padding:20px;font-family:Arial;}
  74.         .form-group {margin-bottom:20px;}
  75.         input,select,button {background:#333;color:#fff;border:none;border-radius:5px;padding:10px;margin-right:10px;}
  76.         button {background:#4CAF50;width:60%;font-size:20px;margin-top:20px;cursor:pointer;}
  77.     </style>
  78.     <script language="JavaScript">
  79.         // 调用APP的main方法
  80.         function callAppMain() {
  81.             var inputVal = document.getElementById("input1").value;
  82.             callAppFunction("main", inputVal);
  83.         }

  85.         // 执行APP代码块
  86.         function runAppJs() {
  87.             window.at.runJs(function() {
  88.                 printl("H5触发APP执行");
  89.                 auto.home();
  90.             }.toString());
  91.         }

  93.         // 执行APP JS文件
  94.         function runAppJsFile() {
  95.             runJsFile("主脚本.js");
  96.         }

  98.         // 测试配置读写
  99.         function testConfig() {
  100.             var resPath = getAppResourcesPath();
  101.             var path = resPath + "test.txt";
  102.             setAppConfig(path, "user", "testUser");
  103.             var user = getAppConfig(path, "user", "default");
  104.             alert("读取用户名：" + user);
  105.         }

  107.         // 测试公共变量
  108.         function testPublicData() {
  109.             setAppPublicData("h5Val", document.getElementById("input1").value);
  110.             var appVal = getAppPublicData("appInfo");
  111.             alert("APP回传：" + appVal);
  112.         }
  113.     </script>
  114. </head>
  115. <body>
  116.     <h1>H5-原生交互演示</h1>
  117.     <div class="form-group">
  118.         <label>输入框：</label>
  119.         <input type="text" id="input1" value="测试数据">
  120.     </div>
  121.     <button onclick="callAppMain()">调用APP main</button>
  122.     <button onclick="runAppJs()">执行APP代码</button>
  123.     <button onclick="runAppJsFile()">执行APP JS文件</button>
  124.     <button onclick="testConfig()">测试配置读写</button>
  125.     <button onclick="testPublicData()">测试公共变量</button>
  126. </body>
  127. </html>
  128. `;
  129. printl("H5代码已生成，提取H5_DEMO_HTML变量内容保存为.html文件");


  132. // ==================================================
  133. // 三、APP端调用H5代码（Rhino引擎直接执行）
  134. // ==================================================
  135. // 1. 初始化WebView
  136. function initWebView() {
  137.     var ac = new activity();
  138.     var layout = [
  139.         '<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"',
  140.         '    android:layout_width="match_parent"',
  141.         '    android:layout_height="match_parent"',
  142.         '    android:orientation="vertical">',
  143.         '    <WebView android:id="@+id/web"',
  144.         '        android:layout_width="match_parent"',
  145.         '        android:layout_height="match_parent" />',
  146.         '</LinearLayout>'
  147.     ].join('\n');
  148.     ac.loadXML(layout);
  149.     sleep.millisecond(400);
  150.     var web = ac.findWebViewById("web");
  151.     printl("WebView初始化完成");
  152.     return web;
  153. }

  155. // 2. 加载H5页面
  156. function loadH5(webView, h5Path) {
  157.     webView.url(h5Path);
  158.     printl("加载H5：" + h5Path);
  159.     sleep.millisecond(1000); // 等待加载
  160. }

  162. // 3. 向H5注入JS
  163. function runH5Js(webView, jsCode) {
  164.     var result = webView.runWebJs(jsCode);
  165.     printl("H5 JS执行结果：" + result);
  166.     return result;
  167. }

  169. // 4. APP端方法（供H5调用）
  170. function main(arg) {
  171.     printl("APP收到H5参数：" + arg);
  172.     // 解析多参数（若H5传JSON）
  173.     if (arg.indexOf("{") !== -1) {
  174.         var obj = JSON.parse(arg);
  175.         printl("解析参数：" + obj.name + "," + obj.age);
  176.     }
  177.     // 向H5回传数据
  178.     publicData.set("appInfo", "已收到：" + arg);
  179. }

  181. // 5. APP调用H5完整流程
  182. function appH5Flow() {
  183.     var web = initWebView();
  184.     // 加载H5（需替换为实际保存的.html路径）
  185.     loadH5(web, "/代码/h5Demo.html");
  186.     // 向H5注入JS修改输入框
  187.     runH5Js(web, 'document.getElementById("input1").value = "APP注入值"');
  188.     // 触发H5按钮点击
  189.     runH5Js(web, 'document.querySelector("button[onclick=\'callAppMain()\']").click()');
  190. }

  192. // 执行APP-H5交互流程（取消注释即可运行）
  193. // appH5Flow();


  196. // ==================================================
  197. // 四、使用说明
  198. // ==================================================
  199. /*
  200. 1. H5部署：
  201.    - 复制H5_DEMO_HTML变量内的字符串，保存为"h5Demo.html"
  202.    - 将文件放入APP可访问路径（如"/代码/"）

  204. 2. APP执行：
  205.    - 在Rhino引擎中运行此JS文件
  206.    - 取消"appH5Flow();"注释，启动完整交互

  208. 3. 注意：
  209.    - 确保APP有SD卡读写权限（配置读写需）
  210.    - "主脚本.js"需存在于APP根目录（若执行runAppJsFile）
  211.    - 日志通过printl输出，在Rhino控制台查看
  212. */
复制代码
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);







欢迎光临 自动发帖软件 (http://www.fatiegongju.com/) Powered by Discuz! X3.2