苹果H5单按钮执行脚本示例 - B2B网络软件

//🍎交流QQ群711841924群一，苹果内测群，528816639
// 创建一个最简单的 WebView 示例
Import("主脚本.js")
async function createSimpleWebView() {
return new Promise((resolve, reject) => {
try {
// 创建 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, maximum-scale=1.0, user-scalable=no">
<title>AIWROK 脚本运行器QQ896757558</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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #333;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 20px;
position: relative;
overflow: hidden;
}
/* 粒子背景 */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
opacity: 0.6;
}
/* 容器样式 */
.container {
max-width: 480px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
overflow: hidden;
animation: fadeInUp 0.8s ease-out, scaleIn 0.6s ease-out;
position: relative;
z-index: 1;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* 头部样式 */
.header {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white;
padding: 40px 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: rotate 20s linear infinite;
}
.header h1 {
font-size: 28px;
font-weight: 800;
margin-bottom: 12px;
position: relative;
z-index: 1;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
letter-spacing: 1px;
}
.header p {
font-size: 16px;
opacity: 0.95;
font-weight: 500;
position: relative;
z-index: 1;
}
/* 内容区域 */
.content {
padding: 40px 25px;
}
/* 状态显示区域 */
.status-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 16px;
padding: 25px;
margin-bottom: 32px;
border-left: 6px solid #4facfe;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.status-section::after {
content: '';
position: absolute;
right: -50px;
top: -50px;
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(79,172,254,0.1) 0%, transparent 70%);
border-radius: 50%;
}
.status-section:hover {
transform: translateY(-4px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}
.status-title {
font-size: 14px;
font-weight: 700;
color: #666;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
z-index: 1;
}
.status-text {
font-size: 18px;
color: #333;
font-weight: 600;
position: relative;
z-index: 1;
transition: all 0.3s ease;
animation: pulse 2s ease-in-out infinite;
}
/* 按钮样式 */
.run-button {
width: 100%;
height: 72px;
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white;
border: none;
border-radius: 20px;
font-size: 22px;
font-weight: 800;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
box-shadow: 0 12px 40px rgba(79, 172, 254, 0.4);
text-transform: uppercase;
letter-spacing: 1px;
perspective: 1000px;
}
.run-button:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 20px 60px rgba(79, 172, 254, 0.6);
}
.run-button:active {
transform: translateY(-2px) scale(0.98);
box-shadow: 0 8px 30px rgba(79, 172, 254, 0.5);
}
.run-button:disabled {
background: linear-gradient(135deg, #a8d8ff 0%, #93e5ff 100%);
cursor: not-allowed;
transform: none;
box-shadow: 0 4px 15px rgba(79, 172, 254, 0.2);
}
/* 加载动画 */
.run-button.loading::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
margin-top: -16px;
margin-left: -16px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.run-button.loading span {
visibility: hidden;
}
/* 底部信息 */
.footer {
padding: 25px;
text-align: center;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-top: 2px solid rgba(79, 172, 254, 0.2);
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #4facfe, transparent);
animation: shimmer 2s ease-in-out infinite;
}
.footer p {
font-size: 14px;
color: #6c757d;
font-weight: 500;
position: relative;
z-index: 1;
}
/* Toast 提示 */
.toast {
position: fixed;
top: 30px;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(30, 30, 30, 0.9) 100%);
color: white;
padding: 16px 32px;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
opacity: 0;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 9999;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* 动画效果 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scaleIn {
from {
transform: scale(0.9);
}
to {
transform: scale(1);
}
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.8;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* 波纹效果 */
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
transform: scale(0);
animation: ripple-animation 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
pointer-events: none;
}
@keyframes ripple-animation {
to {
transform: scale(6);
opacity: 0;
}
}
/* 数字跳动动画 */
@keyframes countUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 背景光效 */
.container::after {
content: '';
position: absolute;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(79,172,254,0.1) 0%, transparent 70%);
border-radius: 50%;
top: -100px;
right: -100px;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
</style>
</head>
<body>
<div id="particles-js"></div>
<div class="container">
<div class="header">
<h1>AIWROK 脚本运行器</h1>
<p>一键启动您的自动化脚本</p>
</div>
<div class="content">
<div class="status-section">
<div class="status-title">当前状态</div>
<div class="status-text" id="statusText">就绪，等待执行</div>
</div>
<button class="run-button" onclick="handleRun()">
<span>点击运行脚本</span>
</button>
</div>
<div class="footer">
<p>AIWROK🍎交流QQ群711841924群一，苹果内测群，528816639| 自动化脚本运行器</p>
</div>
</div>
<div class="toast" id="toast"></div>
<script>
// 粒子背景效果
(function() {
var particles = [];
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var particleCount = 100;
var colors = ['#4facfe', '#00f2fe', '#667eea', '#764ba2'];
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = 'absolute';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.zIndex = '0';
canvas.style.pointerEvents = 'none';
document.getElementById('particles-js').appendChild(canvas);
// 创建粒子
function createParticles() {
for (var i = 0; i < particleCount; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 3 + 1,
color: colors[Math.floor(Math.random() * colors.length)],
speedX: (Math.random() - 0.5) * 2,
speedY: (Math.random() - 0.5) * 2
});
}
}
// 绘制粒子
function drawParticles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
ctx.fillStyle = p.color;
ctx.fill();
// 绘制连接线
for (var j = i + 1; j < particles.length; j++) {
var p2 = particles[j];
var dx = p.x - p2.x;
var dy = p.y - p2.y;
var distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 150) {
ctx.beginPath();
ctx.strokeStyle = 'rgba(255, 255, 255, ' + (0.2 - distance / 750) + ')';
ctx.lineWidth = 1;
ctx.moveTo(p.x, p.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();
}
}
}
}
// 更新粒子位置
function updateParticles() {
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
p.x += p.speedX;
p.y += p.speedY;
if (p.x < 0 || p.x > canvas.width) {
p.speedX *= -1;
}
if (p.y < 0 || p.y > canvas.height) {
p.speedY *= -1;
}
}
}
// 动画循环
function animate() {
updateParticles();
drawParticles();
requestAnimationFrame(animate);
}
// 窗口大小调整
window.addEventListener('resize', function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// 初始化
createParticles();
animate();
})();
// Toast 提示函数
function showToast(message, duration = 2000) {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
}, duration);
}
// 更新状态显示
function updateStatus(status) {
const statusText = document.getElementById('statusText');
statusText.style.animation = 'none';
statusText.offsetHeight; // 触发重排
statusText.style.animation = 'fadeInUp 0.5s ease-out';
statusText.textContent = status;
}
// 运行按钮点击处理
function handleRun() {
const button = document.querySelector('.run-button');
// 如果按钮已在运行中，不执行操作
if (button.classList.contains('loading')) {
return;
}
// 添加加载状态
button.classList.add('loading');
button.disabled = true;
button.innerHTML = '<span>运行中...</span>';
// 更新状态和提示
updateStatus('脚本正在执行中...');
showToast('脚本开始执行');
console.log('开始执行脚本');
// 模拟执行过程
setTimeout(() => {
// 执行脚本函数
if (typeof runJS !== 'undefined') {
runJS(function() {
console.log('脚本执行完成');
});
}
// 恢复按钮状态
button.classList.remove('loading');
button.disabled = false;
button.innerHTML = '<span>点击运行脚本</span>';
// 更新状态和提示
updateStatus('执行完成，就绪');
showToast('脚本执行完成');
}, 2000);
}
// 添加按钮波纹效果
document.addEventListener('DOMContentLoaded', function() {
const button = document.querySelector('.run-button');
button.addEventListener('click', function(e) {
// 创建波纹效果
const ripple = document.createElement('span');
const rect = button.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;
ripple.classList.add('ripple');
ripple.style.width = ripple.style.height = size + 'px';
ripple.style.left = x + 'px';
ripple.style.top = y + 'px';
button.appendChild(ripple);
// 移除波纹元素
setTimeout(() => ripple.remove(), 800);
});
});
</script>
</body>
</html>
`);
// 加载完成后解析Promise
resolve(web);
} catch (error) {
printl('创建WebView时发生错误: ' + error.message);
reject(error);
}
});
}
// 执行简化的WebView示例
async function demonstrateSimpleWebView() {
printl('开始演示简化的 WebView 示例');
// 创建并显示简化的 WebView
var webView = await createSimpleWebView();
printl('WebView 已创建并显示');
}
// 直接调用简化的演示函数
demonstrateSimpleWebView();

复制代码