AIWROK软件start.js简单H5直接调用 - B2B网络软件

printl('//🍎交流QQ群711841924');
// 创建一个黄色主题风格的 WebView 示例
function createYellowThemedWebViewExample() {
// 创建 WebView 实例
var web = new WebView();
// 显示界面
web.show();
// 加载黄色主题风格的 HTML 内容
web.loadHtml(`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应TabView</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: #f0f0f5;
color: #333;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
min-height: 100vh;
}
/* Tab样式 */
.tab-header {
display: flex;
background-color: #ff3b30;
position: sticky;
top: 0;
z-index: 100;
padding-top: 20px;
}
.tab-item {
flex: 1;
text-align: center;
padding: 12px 0;
color: #fff;
font-size: 16px;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
}
.tab-item.active {
font-weight: bold;
}
.tab-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 25%;
width: 50%;
height: 3px;
background-color: #fff;
border-radius: 3px;
}
/* 内容区域样式 */
.tab-content {
display: none;
padding: 16px;
}
.tab-content.active {
display: block;
}
/* 标题样式 */
.title-header {
text-align: center;
margin-bottom: 16px;
}
.title-label {
font-size: 22px;
color: #4682b4;
font-weight: bold;
}
/* 分隔线 */
.divider {
height: 1px;
background-color: #e8e8e8;
margin: 16px 0;
}
/* 按钮容器 */
.button-container { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 30px; width: 100%; }
.button { padding: 20px 48px; border: none; border-radius: 12px; color: white; font-size: 24px; cursor: pointer; width: 100%; max-width: 300px; height: 80px; font-weight: bold; }
.button.start {
background-color: #4682b4;
}
.button.back {
background-color: #ff6347;
}
/* 内容标题 */
.content-title {
font-size: 18px;
color: #800080;
margin-bottom: 12px;
font-weight: bold;
}
/* 任务分类 */
.category-label {
font-size: 18px;
color: #800080;
margin-top: 16px;
margin-bottom: 8px;
font-weight: bold;
}
/* 任务项 */
.task-container {
background-color: #fff;
padding: 12px 0;
display: flex;
align-items: center;
border-bottom: 1px solid #f0f0f0;
}
.task-checkbox {
display: flex;
align-items: center;
width: 200px;
}
.task-checkbox input[type="checkbox"] {
width: 20px;
height: 20px;
margin-right: 10px;
}
.task-checkbox label {
font-size: 16px;
cursor: pointer;
}
/* 设置项 */
.settings-container {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="tab-header">
<div class="tab-item active" data-tab="0">软件</div>
<div class="tab-item" data-tab="1">通用</div>
<div class="tab-item" data-tab="2">日常</div>
<div class="tab-item" data-tab="3">辅助</div>
<div class="tab-item" data-tab="4">设置</div>
</div>
<div class="tab-content active" id="tab-0">
<div class="title-header">
<div class="title-label">软件功能</div>
</div>
<div class="divider"></div>
<div class="button-container">
<button class="button start">开始</button>
<button class="button back">返回</button>
</div>
<div class="content-title">软件页面内容</div>
<div class="category-label">喜番任务</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-0-0">
<label for="task-0-0">看短剧</label>
</div>
</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-0-1">
<label for="task-0-1">宝箱</label>
</div>
</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-0-2">
<label for="task-0-2">看视频</label>
</div>
</div>
<div class="divider"></div>
<div class="category-label">抖极任务</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-1-0">
<label for="task-1-0">宝箱</label>
</div>
</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-1-1">
<label for="task-1-1">AD广</label>
</div>
</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-1-2">
<label for="task-1-2">小猪</label>
</div>
</div>
<div class="divider"></div>
<div class="category-label">红果任务</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-2-0">
<label for="task-2-0">宝箱</label>
</div>
</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-2-1">
<label for="task-2-1">短剧</label>
</div>
</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-2-2">
<label for="task-2-2">海量</label>
</div>
</div>
</div>
<div class="tab-content" id="tab-1">
<div class="title-header">
<div class="title-label">通用功能</div>
</div>
<div class="divider"></div>
<div class="button-container">
<button class="button start">开始</button>
<button class="button back">返回</button>
</div>
<div class="content-title">通用页面内容</div>
<div class="category-label">通用任务</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-3-0">
<label for="task-3-0">每日签到</label>
</div>
</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-3-1">
<label for="task-3-1">邀请好友</label>
</div>
</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-3-2">
<label for="task-3-2">分享内容</label>
</div>
</div>
</div>
<div class="tab-content" id="tab-2">
<div class="title-header">
<div class="title-label">日常功能</div>
</div>
<div class="divider"></div>
<div class="button-container">
<button class="button start">开始</button>
<button class="button back">返回</button>
</div>
<div class="content-title">日常页面内容</div>
<div class="category-label">日常任务</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-4-0">
<label for="task-4-0">浏览资讯</label>
</div>
</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-4-1">
<label for="task-4-1">观看视频</label>
</div>
</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-4-2">
<label for="task-4-2">评论互动</label>
</div>
</div>
</div>
<div class="tab-content" id="tab-3">
<div class="title-header">
<div class="title-label">辅助功能</div>
</div>
<div class="divider"></div>
<div class="button-container">
<button class="button start">开始</button>
<button class="button back">返回</button>
</div>
<div class="content-title">辅助页面内容</div>
<div class="category-label">辅助功能</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-5-0">
<label for="task-5-0">设置</label>
</div>
</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-5-1">
<label for="task-5-1">帮助</label>
</div>
</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="task-5-2">
<label for="task-5-2">关于我们</label>
</div>
</div>
</div>
<div class="tab-content" id="tab-4">
<div class="title-header">
<div class="title-label">设置功能</div>
</div>
<div class="divider"></div>
<div class="button-container">
<button class="button start">开始</button>
<button class="button back">返回</button>
</div>
<div class="content-title">设置选项</div>
<div class="settings-container">
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="settings-0">
<label for="settings-0">通用设置</label>
</div>
</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="settings-1">
<label for="settings-1">个性化</label>
</div>
</div>
<div class="task-container">
<div class="task-checkbox">
<input type="checkbox" id="settings-2">
<label for="settings-2">关于我们</label>
</div>
</div>
</div>
</div>
</div>
<script>
// 模拟原生环境的交互方法
// 在实际环境中，这些方法由原生应用提供
if (typeof setConfig === 'undefined') {
function setConfig(key, value) {
console.log('设置配置:', key, '=', value);
try {
// 尝试使用localStorage
localStorage.setItem(key, value);
console.log('localStorage设置成功:', key, '=', value);
// 优化提示内容
if (key && key.startsWith('last_')) {
showToast('操作已记录');
} else {
showToast('配置已设置');
}
} catch (e) {
console.warn('localStorage不可用，使用内存存储替代:', e.message);
// 使用内存对象存储作为降级方案
if (!window._memoryStorage) {
window._memoryStorage = {};
}
window._memoryStorage[key] = value;
// 只显示操作名称，避免显示完整时间戳
if (key && key.startsWith('last_')) {
showToast('操作已记录');
} else {
showToast('配置已记录');
}
}
}
}
if (typeof getConfig === 'undefined') {
function getConfig(key, callback) {
var value = '未设置';
try {
// 优先尝试localStorage
value = localStorage.getItem(key) || '未设置';
console.log('从localStorage获取配置:', { key: key, value: value });
} catch (e) {
// 降级到内存存储
console.warn('localStorage不可用，尝试从内存获取:', e.message);
if (window._memoryStorage && window._memoryStorage[key] !== undefined) {
value = window._memoryStorage[key];
}
}
if (typeof callback === 'function') {
callback(value);
}
}
}
if (typeof toast === 'undefined') {
function toast(message) {
console.log('显示提示:', message);
showToast(message);
}
}
if (typeof runJS === 'undefined') {
function runJS(func) {
console.log('运行JS代码');
try {
func();
showToast('JS代码执行成功');
} catch (e) {
showToast('JS代码执行失败: ' + e.message);
}
}
}
if (typeof printl === 'undefined') {
function printl(message) {
console.log('原生日志:', message);
}
}
if (typeof dismiss === 'undefined') {
function dismiss() {
console.log('关闭界面');
showToast('关闭界面操作');
}
}
if (typeof runFile === 'undefined') {
function runFile(filePath) {
console.log('运行脚本文件:', filePath);
showToast('运行脚本文件: ' + filePath);
}
}
// 保存用户操作到配置
function saveUserAction(action, value) {
var timestamp = new Date().toISOString();
console.log('保存用户操作:', action, '时间戳:', timestamp);
setConfig('last_' + action, timestamp);
if (value) {
console.log('保存操作值:', action, '=', value);
// 优化提示内容，只显示操作名和简短信息
setConfig(action, value);
}
}
// 自定义Toast提示 - 优化版本
function showToast(message) {
// 创建toast元素
var toast = document.getElementById('custom-toast');
if (!toast) {
toast = document.createElement('div');
toast.id = 'custom-toast';
toast.style.cssText =
'position: fixed;' +
'top: 50%;' +
'left: 50%;' +
'transform: translate(-50%, -50%);' +
'background: rgba(0, 0, 0, 0.7);' +
'color: white;' +
'padding: 12px 24px;' +
'border-radius: 8px;' +
'font-size: 14px;' +
'z-index: 9999;' +
'opacity: 0;' +
'transition: opacity 0.3s ease, transform 0.3s ease;' +
'transform: translate(-50%, -50%) scale(0.9);';
document.body.appendChild(toast);
}
// 清除之前的定时器
if (toast.timer) {
clearTimeout(toast.timer);
}
// 设置消息并显示（带动画效果）
toast.textContent = message;
toast.style.opacity = '1';
toast.style.transform = 'translate(-50%, -50%) scale(1)';
// 2秒后隐藏
toast.timer = setTimeout(function() {
toast.style.opacity = '0';
toast.style.transform = 'translate(-50%, -50%) scale(0.9)';
}, 2000);
}
// 添加按钮点击反馈
function addButtonFeedback() {
var buttons = document.querySelectorAll('.button');
for (var i = 0; i < buttons.length; i++) {
(function(button) {
button.addEventListener('mousedown', function() {
this.style.transform = 'scale(0.95)';
});
button.addEventListener('mouseup', function() {
this.style.transform = 'scale(1)';
});
button.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
})(buttons[i]);
}
}
// 初始化Tab切换功能
document.addEventListener('DOMContentLoaded', function() {
// 获取所有Tab项和内容
var tabItems = document.querySelectorAll('.tab-item');
var tabContents = document.querySelectorAll('.tab-content');
var startButtons = document.querySelectorAll('.button.start');
var backButtons = document.querySelectorAll('.button.back');
// 调用按钮点击反馈功能
addButtonFeedback();
// 尝试恢复上次选择的Tab
getConfig('last_tab', function(lastTabIndex) {
if (lastTabIndex !== '未设置' && !isNaN(lastTabIndex)) {
var tabIndex = parseInt(lastTabIndex);
if (tabIndex >= 0 && tabIndex < tabItems.length) {
// 移除所有active类
for (var i = 0; i < tabItems.length; i++) {
tabItems[i].classList.remove('active');
}
for (var j = 0; j < tabContents.length; j++) {
tabContents[j].classList.remove('active');
}
// 添加当前active类
tabItems[tabIndex].classList.add('active');
document.getElementById('tab-' + tabIndex).classList.add('active');
}
}
});
// 尝试恢复任务选中状态
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var k = 0; k < checkboxes.length; k++) {
(function(checkbox) {
var taskId = checkbox.id;
getConfig('task_' + taskId, function(value) {
if (value === 'true') {
checkbox.checked = true;
}
});
})(checkboxes[k]);
}
// Tab切换功能
for (var l = 0; l < tabItems.length; l++) {
(function(item) {
item.addEventListener('click', function() {
var tabIndex = this.getAttribute('data-tab');
var tabName = this.textContent;
// 移除所有active类
for (var m = 0; m < tabItems.length; m++) {
tabItems[m].classList.remove('active');
}
for (var n = 0; n < tabContents.length; n++) {
tabContents[n].classList.remove('active');
}
// 添加当前active类
this.classList.add('active');
document.getElementById('tab-' + tabIndex).classList.add('active');
// 保存当前Tab选择
saveUserAction('tab', tabIndex);
// 显示提示
toast('切换到' + tabName + '标签');
// 执行原生日志输出
runJS(function() {
printl('用户切换到标签: ' + tabName);
});
});
})(tabItems[l]);
}
// 开始按钮点击事件
for (var o = 0; o < startButtons.length; o++) {
(function(button) {
button.addEventListener('click', function() {
// 获取当前激活的标签
var activeTab = document.querySelector('.tab-item.active');
var tabName = activeTab ? activeTab.textContent : '未知';
// 保存操作
saveUserAction('start_button', tabName);
// 显示提示
toast('开始' + tabName + '任务');
// 执行原生操作
runJS(function() {
printl('用户点击了开始按钮，标签：' + tabName);
toast('开始执行' + tabName + '相关任务');
});
});
})(startButtons[o]);
}
// 返回按钮点击事件
for (var p = 0; p < backButtons.length; p++) {
(function(button) {
button.addEventListener('click', function() {
// 保存操作
saveUserAction('back_button');
// 关闭界面
if (confirm('确定要返回吗？')) {
dismiss();
}
});
})(backButtons[p]);
}
// 复选框点击事件
for (var q = 0; q < checkboxes.length; q++) {
(function(checkbox) {
checkbox.addEventListener('change', function() {
var label = this.nextElementSibling.textContent;
var taskId = this.id;
var status = this.checked ? '完成' : '取消完成';
// 保存任务状态
setConfig('task_' + taskId, this.checked.toString());
// 显示提示
toast(label + ' 已' + status);
// 执行原生日志输出
runJS(function() {
printl(label + ' 任务被标记为' + status);
});
});
})(checkboxes[q]);
}
// 页面加载完成提示
toast('TabView已启动');
// 记录页面加载时间和设备信息
setConfig('page_load_time', new Date().toISOString());
setConfig('app_version', '1.0.0');
// 演示配置设置
setTimeout(function() {
setConfig('demo_setting', 'initialized');
}, 1000);
});
</script>
</body>
</html>
`);
return web;
}
// 演示 WebView 的各种方法
function demonstrateWebViewMethods() {
printl('开始演示 WebView 控件的各种方法');
// 1. 创建并显示 WebView
var webView = createYellowThemedWebViewExample();
printl('1. WebView 已创建并显示黄色主题界面');
// 2. 演示 loadUrl 方法（注释形式，避免实际跳转）
// webView.loadUrl('https://www.baidu.com');
printl('2. loadUrl 方法可用于加载网页 URL');
// 3. 演示 loadFile 方法（注释形式）
// webView.loadFile('/sdcard/index.html');
printl('3. loadFile 方法可用于加载本地文件');
// 4. 演示 dismiss 方法（注释形式，避免实际关闭）
// webView.dismiss();
printl('4. dismiss 方法可用于关闭界面');
printl('WebView 控件方法演示完成');
}
// 运行示例
demonstrateWebViewMethods();

复制代码