 | |  |  | 苹果H5单按钮执行脚本示例
- //🍎交流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>
- <!-- Toast 提示 -->
- <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();
复制代码
| |  | |  |
|