|
|
Æ»¹ûH5½çÃæÍêÕûµ÷Óýű¾Ê¾Àý
- //🍎½»Á÷QQȺ711841924Ⱥһ£¬Æ»¹ûÄÚ²âȺ£¬528816639
- // ´´½¨Ò»¸öÂÌÉ«Ö÷Ìâ·ç¸ñµÄ WebView ʾÀý
- Import("Ö÷½Å±¾.js")
- async function createGreenThemedWebViewExample() {
- 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 CheckBox¿Ø¼þÑÝʾ</title>
- <style>
- /* »ù´¡ÑùÊ½ÖØÖà */
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- -webkit-tap-highlight-color: transparent;
- }
- body {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
- background-color: #f5f5f5;
- color: #333;
- line-height: 1.6;
- overflow-x: hidden;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- /* ÊÖ»úÈÝÆ÷ */
- .mobile-container {
- max-width: 414px;
- margin: 0 auto;
- background-color: white;
- min-height: 100vh;
- position: relative;
- overflow: hidden;
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
- }
- /* ¶¥²¿µ¼º½À¸ */
- .top-nav {
- display: flex;
- background-color: white;
- border-bottom: 1px solid #f0f0f0;
- padding: 12px 0;
- }
- .top-nav-item {
- flex: 1;
- text-align: center;
- font-size: 16px;
- color: #333;
- text-decoration: none;
- padding: 8px 0;
- }
- .top-nav-item.active {
- color: #2196f3;
- font-weight: 600;
- border-bottom: 2px solid #2196f3;
- }
- /* Ö÷ÒªÄÚÈÝÇøÓò */
- .content {
- padding: 0;
- padding-bottom: 80px;
- }
- /* Ò³ÃæÈÝÆ÷Ñùʽ */
- .page {
- display: none;
- }
- .page.active {
- display: block;
- }
- /* ·µ»Ø°´Å¥ */
- .back-button {
- width: 100%;
- height: 56px;
- background-color: #ff0000;
- color: white;
- border: none;
- border-radius: 0;
- font-size: 18px;
- font-weight: 600;
- cursor: pointer;
- margin-bottom: 0;
- transition: all 0.3s ease;
- transform: scale(1);
- }
- .back-button:active {
- background-color: #cc0000;
- transform: scale(0.95);
- }
- /* ¸´Ñ¡¿òÁбí */
- .checkbox-list {
- margin-bottom: 0;
- padding-left: 50px;
- }
- .checkbox-item {
- display: flex;
- align-items: center;
- padding: 12px 16px;
- border-bottom: 1px solid #f0f0f0;
- }
- .checkbox-item:last-child {
- border-bottom: none;
- }
- .checkbox-item input[type="checkbox"] {
- width: 20px;
- height: 20px;
- margin-right: 12px;
- accent-color: #ff0000;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: 1px solid #000;
- border-radius: 2px;
- background-color: #fff;
- cursor: pointer;
- position: relative;
- }
- .checkbox-item input[type="checkbox"]:checked {
- background-color: #fff;
- border-color: #000;
- }
- .checkbox-item input[type="checkbox"]:checked::after {
- content: "✓";
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- color: #ff0000;
- font-size: 14px;
- font-weight: bold;
- }
- .checkbox-item label {
- flex: 1;
- font-size: 16px;
- color: #333;
- cursor: pointer;
- }
- /* ÔËÐа´Å¥ */
- .run-button {
- width: 100%;
- height: 56px;
- background-color: #1976d2;
- color: white;
- border: none;
- border-radius: 0;
- font-size: 18px;
- font-weight: 600;
- cursor: pointer;
- transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
- margin-top: 20px;
- position: relative;
- overflow: hidden;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- }
- .run-button:hover {
- background-color: #1565c0;
- box-shadow: 0 4px 8px rgba(25, 118, 210, 0.3);
- transform: translateY(-2px);
- }
- .run-button:active {
- background-color: #0d47a1;
- transform: scale(0.98) translateY(0);
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- }
- .run-button:disabled {
- background-color: #90caf9;
- cursor: not-allowed;
- transform: none;
- box-shadow: none;
- }
- /* ²¨ÎÆÐ§¹û */
- .run-button::before {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- width: 0;
- height: 0;
- border-radius: 50%;
- background-color: rgba(255, 255, 255, 0.5);
- transform: translate(-50%, -50%);
- transition: width 0.6s ease, height 0.6s ease;
- }
- .run-button:active::before {
- width: 300px;
- height: 300px;
- }
- /* ¼ÓÔØ¶¯» */
- @keyframes spin {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
- }
- .run-button.loading {
- background-color: #1976d2;
- }
- .run-button.loading::after {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- width: 24px;
- height: 24px;
- margin-top: -12px;
- margin-left: -12px;
- border: 2px solid rgba(255, 255, 255, 0.3);
- border-top-color: white;
- border-radius: 50%;
- animation: spin 0.8s linear infinite;
- }
- .run-button.loading span {
- opacity: 0;
- }
- /* ÏìӦʽÉè¼Æ */
- @media (max-width: 375px) {
- .mobile-container {
- max-width: 100%;
- }
- }
- /* ÊÊÅäiOSÉ豸µÄÌØÊâÓÅ»¯ */
- @supports (-webkit-touch-callout: none) {
- /* ÊÊÅäiOSµ×²¿°²È«ÇøÓò */
- .content {
- padding-bottom: calc(80px + env(safe-area-inset-bottom, 0));
- }
- /* ÊÊÅäiOS¶¥²¿°²È«ÇøÓò */
- .status-bar {
- padding-top: env(safe-area-inset-top, 0);
- height: calc(44px + env(safe-area-inset-top, 0));
- }
- }
- </style>
- </head>
- <body>
- <div class="mobile-container">
- <!-- ¶¥²¿µ¼º½À¸ -->
- <div class="top-nav">
- <a href="#" class="top-nav-item active">Ê×Ò³</a>
- <a href="#" class="top-nav-item">µÚ¶þÒ³</a>
- <a href="#" class="top-nav-item">µÚÈýÒ³</a>
- <a href="#" class="top-nav-item">µÚËÄÒ³</a>
- </div>
- <!-- Ö÷ÒªÄÚÈÝÇøÓò -->
- <div class="content">
- <!-- Ê×Ò³ÄÚÈÝ -->
- <div id="page1" class="page active">
- <!-- ·µ»Ø°´Å¥ -->
- <button class="back-button" onclick="handleBackButton()">·µ»Ø</button>
- <!-- ¸´Ñ¡¿òÁбí -->
- <div class="checkbox-list">
- <div class="checkbox-item">
- <input type="checkbox" id="item1" onchange="handleCheckboxChange(this)">
- <label for="item1">¶¶Òô¼«ËÙ°æ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item2" onchange="handleCheckboxChange(this)">
- <label for="item2">¿ìÊÖ¼«ËÙ°æ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item3" onchange="handleCheckboxChange(this)">
- <label for="item3">ÆûË®ÒôÀÖ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item4" onchange="handleCheckboxChange(this)">
- <label for="item4">·¬Çѳ©ÌýÒôÀÖ°æ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item5" onchange="handleCheckboxChange(this)">
- <label for="item5">Î÷¹ÏÊÓÆµ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item6" onchange="handleCheckboxChange(this)">
- <label for="item6">·¬Çѳ©Ìý</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item7" onchange="handleCheckboxChange(this)">
- <label for="item7">·¬ÇÑС˵</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item8" onchange="handleCheckboxChange(this)">
- <label for="item8">Îò¿Õä¯ÀÀÆ÷</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item9" onchange="handleCheckboxChange(this)">
- <label for="item9">ºì¹û¶Ì¾ç</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item10" onchange="handleCheckboxChange(this)">
- <label for="item10">½ñÈÕÍ·Ìõ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item11" onchange="handleCheckboxChange(this)">
- <label for="item11">½ñÈÕÍ·Ìõ¼«ËÙ°æ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item12" onchange="handleCheckboxChange(this)">
- <label for="item12">ϲ·¬¶Ì¾ç</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item13" onchange="handleCheckboxChange(this)">
- <label for="item13">¿ìÊÖÕýʽ°æ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item14" onchange="handleCheckboxChange(this)">
- <label for="item14">Ð¶ÔØAPP</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item15" onchange="handleCheckboxChange(this)">
- <label for="item15">²âÊÔ2</label>
- </div>
- </div>
- <!-- ÔËÐа´Å¥ -->
- <button class="run-button" onclick="handleRunButton(this)"><span>µã»÷ÔËÐÐ</span></button>
- </div>
- <!-- µÚ¶þÒ³ÄÚÈÝ -->
- <div id="page2" class="page">
- <!-- ·µ»Ø°´Å¥ -->
- <button class="back-button" onclick="handleBackButton()">·µ»Ø</button>
- <!-- ¸´Ñ¡¿òÁбí -->
- <div class="checkbox-list">
- <div class="checkbox-item">
- <input type="checkbox" id="item21" onchange="handleCheckboxChange(this)">
- <label for="item21">ϲ·¬¿ìÊÖÕýʽ¿ìÊÖ¼«ËÙ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item22" onchange="handleCheckboxChange(this)">
- <label for="item22">¶¶Òô¼«ËÙÎ÷¹ÏÆûË®</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item23" onchange="handleCheckboxChange(this)">
- <label for="item23">ºì¹ûÎò¿Õ·¬Çѳ©ÌýÒôÀÖ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item24" onchange="handleCheckboxChange(this)">
- <label for="item24">·¬ÇÑС˵·¬Çѳ©Ìý</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item25" onchange="handleCheckboxChange(this)">
- <label for="item25">¶¶Òô¼«ËÙÎ÷¹ÏÆûË®ÐÂÊÖģʽ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item26" onchange="handleCheckboxChange(this)">
- <label for="item26">ºì¹ûÎò¿Õ·¬Çѳ©ÌýÒôÀÖÐÂÊÖģʽ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item27" onchange="handleCheckboxChange(this)">
- <label for="item27">·¬ÇÑС˵·¬Çѳ©ÌýÐÂÊÖģʽ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item28" onchange="handleCheckboxChange(this)">
- <label for="item28">ϲ·¬¿ìÊÖÕýʽ¿ìÊÖ¼«ËÙÐÂÊÖģʽ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item29" onchange="handleCheckboxChange(this)">
- <label for="item29">ϲ·¬¿ìÊÖÕýʽ¿ìÊÖ¼«ËÙÖÜÆÚ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item30" onchange="handleCheckboxChange(this)">
- <label for="item30">¶¶ÒôϵÖÜÆÚÈÎÎñ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item31" onchange="handleCheckboxChange(this)">
- <label for="item31">¶¶ÒôϵÖÜÆÚÑøºÅ</label>
- </div>
- </div>
- <!-- ÔËÐа´Å¥ -->
- <button class="run-button" onclick="handleRunButton(this)"><span>µã»÷ÔËÐÐ</span></button>
- </div>
- <!-- µÚÈýÒ³ÄÚÈÝ -->
- <div id="page3" class="page">
- <!-- ·µ»Ø°´Å¥ -->
- <button class="back-button" onclick="handleBackButton()">·µ»Ø</button>
- <!-- ¸´Ñ¡¿òÁбí -->
- <div class="checkbox-list">
- <div class="checkbox-item">
- <input type="checkbox" id="item41" onchange="handleCheckboxChange(this)">
- <label for="item41">¶¶ÒôϵÖÜÆÚÑøºÅ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item42" onchange="handleCheckboxChange(this)">
- <label for="item42">¶¶ÒôϵÖÜÆÚÈÎÎñ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item43" onchange="handleCheckboxChange(this)">
- <label for="item43">ϲ·¬¿ìÊÖÕýʽ¿ìÊÖ¼«ËÙÖÜÆÚ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item44" onchange="handleCheckboxChange(this)">
- <label for="item44">¶¶ÒôϵÐÂÊÖģʽ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item45" onchange="handleCheckboxChange(this)">
- <label for="item45">¿ìÊÖϵÐÂÊÖģʽ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item46" onchange="handleCheckboxChange(this)">
- <label for="item46">·¬ÇÑС˵·¬Çѳ©ÌýÐÂÊÖģʽ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item47" onchange="handleCheckboxChange(this)">
- <label for="item47">ºì¹ûÎò¿Õ·¬Çѳ©ÌýÒôÀÖÐÂÊÖģʽ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item48" onchange="handleCheckboxChange(this)">
- <label for="item48">¶¶Òô¼«ËÙÎ÷¹ÏÆûË®ÐÂÊÖģʽ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item49" onchange="handleCheckboxChange(this)">
- <label for="item49">¿ìÊÖϵÐÂÊÖģʽ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item50" onchange="handleCheckboxChange(this)">
- <label for="item50">·¬ÇÑС˵·¬Çѳ©ÌýÒôÀÖ</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item51" onchange="handleCheckboxChange(this)">
- <label for="item51">¶¶Òô¼«ËÙÎ÷¹ÏÆûË®</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item52" onchange="handleCheckboxChange(this)">
- <label for="item52">ϲ·¬¿ìÊÖÕýʽ¿ìÊÖ¼«ËÙ</label>
- </div>
- </div>
- <!-- ÔËÐа´Å¥ -->
- <button class="run-button" onclick="handleRunButton(this)"><span>µã»÷ÔËÐÐ</span></button>
- </div>
- <!-- µÚËÄÒ³ÄÚÈÝ£¨±¸Óã© -->
- <div id="page4" class="page">
- <!-- ·µ»Ø°´Å¥ -->
- <button class="back-button" onclick="handleBackButton()">·µ»Ø</button>
- <!-- ¸´Ñ¡¿òÁбí -->
- <div class="checkbox-list">
- <div class="checkbox-item">
- <input type="checkbox" id="item61" onchange="handleCheckboxChange(this)">
- <label for="item61">±¸ÓÃÈÎÎñ1</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item62" onchange="handleCheckboxChange(this)">
- <label for="item62">±¸ÓÃÈÎÎñ2</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item63" onchange="handleCheckboxChange(this)">
- <label for="item63">±¸ÓÃÈÎÎñ3</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item64" onchange="handleCheckboxChange(this)">
- <label for="item64">±¸ÓÃÈÎÎñ4</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item65" onchange="handleCheckboxChange(this)">
- <label for="item65">±¸ÓÃÈÎÎñ5</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item66" onchange="handleCheckboxChange(this)">
- <label for="item66">±¸ÓÃÈÎÎñ6</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item67" onchange="handleCheckboxChange(this)">
- <label for="item67">±¸ÓÃÈÎÎñ7</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item68" onchange="handleCheckboxChange(this)">
- <label for="item68">±¸ÓÃÈÎÎñ8</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item69" onchange="handleCheckboxChange(this)">
- <label for="item69">±¸ÓÃÈÎÎñ9</label>
- </div>
- <div class="checkbox-item">
- <input type="checkbox" id="item70" onchange="handleCheckboxChange(this)">
- <label for="item70">±¸ÓÃÈÎÎñ10</label>
- </div>
- </div>
- <!-- ÔËÐа´Å¥ -->
- <button class="run-button" onclick="handleRunButton(this)"><span>µã»÷ÔËÐÐ</span></button>
- </div>
- </div>
- </div>
- <script>
- // Ä£ÄâAIWROKÔÉú»·¾³µÄ½»»¥·½·¨
- // ÔÚʵ¼Ê»·¾³ÖУ¬ÕâЩ·½·¨ÓÉÔÉúÓ¦ÓÃÌṩ
- if (typeof setConfig === 'undefined') {
- function setConfig(key, value) {
- console.log('ÉèÖÃÅäÖÃ:', key, '=', value);
- try {
- localStorage.setItem(key, value);
- showToast('ÅäÖÃÒÑÉèÖÃ');
- } catch (e) {
- console.warn('localStorage²»¿ÉÓÃ:', e.message);
- if (!window._memoryStorage) {
- window._memoryStorage = {};
- }
- window._memoryStorage[key] = value;
- showToast('ÅäÖÃÒѼǼ');
- }
- }
- }
-
- if (typeof getConfig === 'undefined') {
- function getConfig(key, callback) {
- var value = 'δÉèÖÃ';
- try {
- value = localStorage.getItem(key) || 'δÉèÖÃ';
- } catch (e) {
- console.warn('localStorage²»¿ÉÓÃ:', e.message);
- if (window._memoryStorage && window._memoryStorage[key] !== undefined) {
- value = window._memoryStorage[key];
- }
- }
-
- if (typeof callback === 'function') {
- callback(value);
- }
- }
- }
- // ÍêÈ«ÒÆ³ýtoastÄ£Ä⣬±ÜÃâÓëÔÉútoast¶ÔÏó³åÍ»
- // ͳһʹÓÃshowToastº¯Êý½øÐÐÌáʾ
-
- if (typeof printl === 'undefined') {
- function printl(message) {
- console.log('ÔÉúÈÕÖ¾:', message);
- }
- }
-
- if (typeof dismiss === 'undefined') {
- function dismiss() {
- console.log('¹Ø±Õ½çÃæ');
- showToast('¹Ø±Õ½çÃæ²Ù×÷');
-
- // Ä£Äâ¹Ø±Õ½çÃæµÄÊÓ¾õЧ¹û
- var mobileContainer = document.querySelector('.mobile-container');
- if (mobileContainer) {
- mobileContainer.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
- mobileContainer.style.opacity = '0';
- mobileContainer.style.transform = 'translateY(20px)';
-
- // ¶¯»½áÊøºóÒþ²ØÔªËØ
- setTimeout(function() {
- mobileContainer.style.display = 'none';
- }, 500);
- }
- }
- }
-
- // ×Ô¶¨ÒåToastÌáʾ
- function showToast(message) {
- 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)';
-
- toast.timer = setTimeout(function() {
- toast.style.opacity = '0';
- toast.style.transform = 'translate(-50%, -50%) scale(0.9)';
- }, 2000);
- }
-
- // ±£´æÓû§²Ù×÷µ½ÅäÖÃ
- function saveUserAction(action, value) {
- var timestamp = new Date().toISOString();
- printl('±£´æÓû§²Ù×÷:' + action + ' ʱ¼ä´Á:' + timestamp);
- setConfig('last_' + action, timestamp);
- if (value) {
- setConfig(action, value);
- }
- }
-
- // Ìí¼Ó°´Å¥µã»÷·´À¡
- function addButtonFeedback() {
- var buttons = document.querySelectorAll('.back-button, .run-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]);
- }
- }
- // AIWROK±ê×¼µÄ·µ»Ø°´Å¥µã»÷´¦Àí
- function handleBackButton() {
- printl('·µ»Ø°´Å¥±»µã»÷');
- saveUserAction('back_button_click');
-
- // Èç¹ûµ±Ç°ÊǵÚÒ»Ò³£¬¹Ø±Õ½çÃæ
- if (currentPageId === 1) {
- showToast('¹Ø±Õ½çÃæ');
- dismiss();
- } else {
- // ´ÓÀúÊ·¼Ç¼ÖÐÒÆ³ýµ±Ç°Ò³Ãæ
- pageHistory.pop();
- // »ñÈ¡ÉÏÒ»Ò³µÄID
- var previousPageId = pageHistory[pageHistory.length - 1];
-
- // Òþ²ØËùÓÐÒ³Ãæ
- var pages = document.querySelectorAll('.page');
- for (var i = 0; i < pages.length; i++) {
- pages[i].classList.remove('active');
- }
-
- // ÏÔʾÉÏÒ»Ò³
- var previousPage = document.getElementById('page' + previousPageId);
- if (previousPage) {
- previousPage.classList.add('active');
- }
-
- // ¸üе¼º½À¸×´Ì¬
- var navItems = document.querySelectorAll('.top-nav-item');
- for (var j = 0; j < navItems.length; j++) {
- navItems[j].classList.remove('active');
- }
- navItems[previousPageId - 1].classList.add('active');
-
- // ¸üе±Ç°Ò³ÃæID
- currentPageId = previousPageId;
-
- showToast('·µ»ØÉÏÒ»Ò³');
- printl('·µ»Øµ½Ò³Ãæ: ' + previousPageId);
- }
- }
- // AIWROK±ê×¼µÄÔËÐа´Å¥µã»÷´¦Àí
- function handleRunButton(button) {
- // Èç¹û°´Å¥ÒѾ´¦ÓÚ¼ÓÔØ×´Ì¬£¬²»Ö´ÐÐÈκβÙ×÷
- if (button.classList.contains('loading')) {
- return;
- }
-
- printl('ÔËÐа´Å¥±»µã»÷');
- saveUserAction('run_button_click');
-
- // Ìí¼Ó¼ÓÔØ×´Ì¬
- button.classList.add('loading');
- button.disabled = true;
-
- showToast('¿ªÊ¼Ö´ÐÐÈÎÎñ');
-
- // ¸ù¾Ýµ±Ç°Ò³ÃæÖ´ÐжÔÓ¦µÄ½Å±¾
- var selectedItems = [];
-
- // »ñÈ¡µ±Ç°Ò³ÃæµÄËùÓÐÑ¡Öи´Ñ¡¿ò
- var currentPage = document.getElementById('page' + currentPageId);
- var checkboxes = currentPage.querySelectorAll('input[type="checkbox"]:checked');
-
- // Ö´ÐжÔÓ¦µÄ½Å±¾º¯Êý
- for (var i = 0; i < checkboxes.length; i++) {
- var checkbox = checkboxes[i];
- var itemId = checkbox.id;
- var label = checkbox.nextElementSibling.textContent;
-
- printl('Ö´Ðнű¾: ' + label);
- selectedItems.push(label);
-
- // ¸ù¾Ý²»Í¬Ò³ÃæºÍ¸´Ñ¡¿òÖ´Ðв»Í¬µÄº¯Êý
- if (currentPageId === 1) {
- // µÚÒ»Ò³½Å±¾
- switch (itemId) {
- case 'item1': runJS(() => { ¶¶Òô¼«ËÙ(); }); break;
- case 'item2': runJS(() => { ¿ìÊÖ¼«ËÙ(); }); break;
- case 'item3': runJS(() => { ÆûË®ÒôÀÖ(); }); break;
- case 'item4': runJS(() => { ·¬Çѳ©ÌýÒôÀÖ(); }); break;
- case 'item5': runJS(() => { Î÷¹ÏÊÓÆµ(); }); break;
- case 'item6': runJS(() => { ·¬Çѳ©Ìý(); }); break;
- case 'item7': runJS(() => { ·¬ÇÑС˵(); }); break;
- case 'item8': runJS(() => { Îò¿Õä¯ÀÀÆ÷(); }); break;
- case 'item9': runJS(() => { ºì¹û¶Ì¾ç(); }); break;
- case 'item10': runJS(() => { Í·Ìõ¹ã¸æµ¥°æ(); }); break;
- case 'item11': runJS(() => { Í·Ìõ¼«ËÙ¹ã¸æµ¥°æ(); }); break;
- case 'item12': runJS(() => { ϲ·¬¶Ì¾ç(); }); break;
- case 'item13': runJS(() => { ¿ìÊÖÕýʽ(); }); break;
- case 'item14': runJS(() => { Æ»¹ûɾ³ýAPP(); }); break;
- case 'item15': runJS(() => { ²âÊÔº¯Êý2(); printl('²âÊÔ2½Å±¾ÒÑÆô¶¯'); }); break;
- }
- } else if (currentPageId === 2) {
- // µÚ¶þÒ³½Å±¾
- switch (itemId) {
- case 'item21': runJS(() => { ϲ·¬¿ìÊÖÕýʽ¿ìÊÖ¼«ËÙ(); printl('ϲ·¬¼«ËÙ¿ìÊÖÕýʽ¿ìÊÖ»ìÅܽű¾ÒÑÆô¶¯'); }); break;
- case 'item22': runJS(() => { ¶¶Òô¼«ËÙÎ÷¹ÏÆûË®(); printl('¼«ËÙ¶¶Òô»ìÅܽű¾ÒÑÆô¶¯'); }); break;
- case 'item23': runJS(() => { ºì¹ûÎò¿Õ·¬Çѳ©ÌýÒôÀÖ(); printl('ºì¹û»ìÅܽű¾ÒÑÆô¶¯'); }); break;
- case 'item24': runJS(() => { ·¬ÇÑС˵·¬Çѳ©Ìý(); printl('·¬ÇÑС˵»ìÅܽű¾ÒÑÆô¶¯'); }); break;
- case 'item25': runJS(() => { ¶¶Òô¼«ËÙÎ÷¹ÏÆûË®ÐÂÊÖ(); printl('Î÷¹ÏÊÓÆµ½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item26': runJS(() => { ºì¹ûÎò¿Õ·¬Çѳ©ÌýÒôÀÖÐÂÊÖ(); printl('·¬Çѳ©Ìý½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item27': runJS(() => { ·¬ÇÑС˵·¬Çѳ©ÌýÐÂÊÖ(); printl('·¬ÇÑС˵½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item28': runJS(() => { ϲ·¬¿ìÊÖÕýʽ¿ìÊÖ¼«ËÙÐÂÊÖģʽ(); printl('ϲ·¬¿ìÊÖÕýʽ¿ìÊÖ¼«ËÙÐÂÊÖģʽÒÑÆô¶¯'); }); break;
- case 'item29': runJS(() => { ϲ·¬¿ìÊÖÕýʽ¿ìÊÖ¼«ËÙÖÜÆÚ(); }); break;
- case 'item30': runJS(() => { ¶¶ÒôϵÖÜÆÚ×öÈÎÎñ(); }); break;
- case 'item31': runJS(() => { ¶¶ÒôϵÖÜÆÚÑøºÅ(); }); break;
- }
- } else if (currentPageId === 3) {
- // µÚÈýÒ³½Å±¾
- switch (itemId) {
- case 'item41': runJS(() => { ¶¶ÒôϵÖÜÆÚÑøºÅ(); printl('¶¶ÒôϵÖÜÆÚÑøºÅ½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item42': runJS(() => { ¶¶ÒôϵÖÜÆÚ×öÈÎÎñ(); printl('¶¶ÒôϵÖÜÆÚÈÎÎñ½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item43': runJS(() => { ϲ·¬¿ìÊÖÕýʽ¿ìÊÖ¼«ËÙÖÜÆÚ(); printl('ϲ·¬¿ìÊÖÕýʽ¿ìÊÖ¼«ËÙÖÜÆÚ½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item44': runJS(() => { ¶¶ÒôϵÐÂÊÖģʽ(); printl('¶¶ÒôϵÐÂÊÖģʽ½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item45': runJS(() => { ¿ìÊÖϵÐÂÊÖģʽ(); printl('¿ìÊÖϵÐÂÊÖģʽ½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item46': runJS(() => { ·¬ÇÑС˵·¬Çѳ©ÌýÐÂÊÖ(); printl('·¬ÇÑС˵·¬Çѳ©ÌýÐÂÊÖģʽ½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item47': runJS(() => { ºì¹ûÎò¿Õ·¬Çѳ©ÌýÒôÀÖÐÂÊÖ(); printl('ºì¹ûÎò¿Õ·¬Çѳ©ÌýÒôÀÖÐÂÊÖģʽ½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item48': runJS(() => { ¶¶Òô¼«ËÙÎ÷¹ÏÆûË®ÐÂÊÖ(); printl('¶¶Òô¼«ËÙÎ÷¹ÏÆûË®ÐÂÊÖģʽ½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item49': runJS(() => { ¿ìÊÖϵÐÂÊÖģʽ(); printl('¿ìÊÖϵÐÂÊÖģʽ½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item50': runJS(() => { ·¬ÇÑС˵·¬Çѳ©Ìý(); printl('·¬ÇÑС˵·¬Çѳ©ÌýÒôÀֽű¾ÒÑÆô¶¯'); }); break;
- case 'item51': runJS(() => { ¶¶Òô¼«ËÙÎ÷¹ÏÆûË®(); printl('¶¶Òô¼«ËÙÎ÷¹ÏÆûË®½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item52': runJS(() => { ϲ·¬¿ìÊÖÕýʽ¿ìÊÖ¼«ËÙ(); printl('ϲ·¬¿ìÊÖÕýʽ¿ìÊÖ¼«Ëٽű¾ÒÑÆô¶¯'); }); break;
- }
- } else if (currentPageId === 4) {
- // µÚËÄÒ³±¸Óýű¾
- switch (itemId) {
- case 'item61': runJS(() => { ±¸ÓÃÈÎÎñ1(); printl('±¸ÓÃÈÎÎñ1½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item62': runJS(() => { ±¸ÓÃÈÎÎñ2(); printl('±¸ÓÃÈÎÎñ2½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item63': runJS(() => { ±¸ÓÃÈÎÎñ3(); printl('±¸ÓÃÈÎÎñ3½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item64': runJS(() => { ±¸ÓÃÈÎÎñ4(); printl('±¸ÓÃÈÎÎñ4½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item65': runJS(() => { ±¸ÓÃÈÎÎñ5(); printl('±¸ÓÃÈÎÎñ5½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item66': runJS(() => { ±¸ÓÃÈÎÎñ6(); printl('±¸ÓÃÈÎÎñ6½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item67': runJS(() => { ±¸ÓÃÈÎÎñ7(); printl('±¸ÓÃÈÎÎñ7½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item68': runJS(() => { ±¸ÓÃÈÎÎñ8(); printl('±¸ÓÃÈÎÎñ8½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item69': runJS(() => { ±¸ÓÃÈÎÎñ9(); printl('±¸ÓÃÈÎÎñ9½Å±¾ÒÑÆô¶¯'); }); break;
- case 'item70': runJS(() => { ±¸ÓÃÈÎÎñ10(); printl('±¸ÓÃÈÎÎñ10½Å±¾ÒÑÆô¶¯'); }); break;
- }
- }
- }
-
- // Èç¹ûûÓÐÑ¡ÖÐÈκθ´Ñ¡¿ò
- if (selectedItems.length === 0) {
- showToast('ÇëÏÈÑ¡ÔñÒªÖ´ÐеÄÈÎÎñ');
- }
-
- // Ä£ÄâÈÎÎñÖ´Ðйý³Ì
- setTimeout(function() {
- // ÒÆ³ý¼ÓÔØ×´Ì¬
- button.classList.remove('loading');
- button.disabled = false;
-
- // ÏÔʾִÐÐÍê³ÉÌáʾ
- if (selectedItems.length > 0) {
- showToast('ÈÎÎñÖ´ÐÐÍê³É');
- }
- }, 2000);
- }
- // Ò³ÃæÀúÊ·¼Ç¼£¬ÓÃÓÚʵÏÖ·µ»Ø¹¦ÄÜ
- var pageHistory = [1]; // ³õÊ¼Ò³ÃæÊǵÚÒ»Ò³
- var currentPageId = 1;
- // AIWROK±ê×¼µÄ¸´Ñ¡¿ò±ä»¯´¦Àí
- function handleCheckboxChange(checkbox) {
- var label = checkbox.nextElementSibling;
- if (checkbox.checked) {
- label.style.color = '#d32f2f';
- label.style.fontWeight = '600';
- printl('Ñ¡ÖÐ: ' + label.textContent);
- saveUserAction('checkbox_' + checkbox.id, 'checked');
- } else {
- label.style.color = '#333';
- label.style.fontWeight = 'normal';
- printl('È¡ÏûÑ¡ÖÐ: ' + label.textContent);
- saveUserAction('checkbox_' + checkbox.id, 'unchecked');
- }
- }
- // Ò³ÃæÇл»º¯Êý
- function switchPage(pageId) {
- // Èç¹ûÊǵ±Ç°Ò³Ã棬²»½øÐÐÇл»
- if (currentPageId === pageId) {
- return;
- }
- // Òþ²ØËùÓÐÒ³Ãæ
- var pages = document.querySelectorAll('.page');
- for (var i = 0; i < pages.length; i++) {
- pages[i].classList.remove('active');
- }
- // ÏÔʾѡÖеÄÒ³Ãæ
- var selectedPage = document.getElementById('page' + pageId);
- if (selectedPage) {
- selectedPage.classList.add('active');
- }
- // ¸üе¼º½À¸×´Ì¬
- var navItems = document.querySelectorAll('.top-nav-item');
- for (var j = 0; j < navItems.length; j++) {
- navItems[j].classList.remove('active');
- }
- navItems[pageId - 1].classList.add('active');
- // ¼ÇÂ¼Ò³ÃæÀúÊ·
- pageHistory.push(pageId);
- currentPageId = pageId;
- printl('Çл»µ½Ò³Ãæ: ' + pageId);
- }
- // Ò³Ãæ¼ÓÔØÍê³Éºó³õʼ»¯
- window.onload = function() {
- printl('Ò³Ãæ¼ÓÔØÍê³É');
-
- // Ϊµ¼º½À¸Ìí¼Óµã»÷ʼþ
- var navItems = document.querySelectorAll('.top-nav-item');
- for (var i = 0; i < navItems.length; i++) {
- (function(index) {
- navItems[index].addEventListener('click', function(e) {
- e.preventDefault();
- switchPage(index + 1);
- });
- })(i);
- }
-
- // Ìí¼Ó°´Å¥µã»÷·´À¡
- addButtonFeedback();
-
- printl('³õʼ»¯Íê³É£¬ËùÓн»»¥¹¦ÄÜÒѾÍÐ÷');
- };
- </script>
- </body>
- </html>
- `);
-
- // ¼ÓÔØÍê³Éºó½âÎöPromise
- resolve(web);
- } catch (error) {
- // ´¦Àí´íÎó
- printl('´´½¨WebViewʱ·¢Éú´íÎó: ' + error.message);
- reject(error);
- }
- });
- }
- // Ö´Ðнű¾±ØÐë·Åµ½Òì²½º¯ÊýÖÐ ·ñÔò»á¿¨¶Ù
- async function demonstrateWebViewMethods() {
- printl('¿ªÊ¼ÑÝʾ WebView ¿Ø¼þµÄ¸÷ÖÖ·½·¨');
-
- // 1. ´´½¨²¢ÏÔʾ WebView
- var webView = await createGreenThemedWebViewExample();
- printl('1. WebView ÒÑ´´½¨²¢ÏÔʾÂÌÉ«Ö÷Ìâ½çÃæ');
-
- // 2. ÑÝʾ loadUrl ·½·¨£¨×¢ÊÍÐÎʽ£¬±ÜÃâʵ¼ÊÌø×ª£©
- // webView.loadUrl('https://www.baidu.com');
- printl('2. loadUrl ·½·¨¿ÉÓÃÓÚ¼ÓÔØÍøÒ³ URL');
-
- // 3. ÑÝʾ loadFile ·½·¨£¨×¢ÊÍÐÎʽ£©
- // webView.loadFile('index.html');
- printl('3. loadFile ·½·¨¿ÉÓÃÓÚ¼ÓÔØ±¾µØÎļþ');
-
- // 4. ÑÝʾ dismiss ·½·¨£¨×¢ÊÍÐÎʽ£¬±ÜÃâʵ¼Ê¹Ø±Õ£©
- // webView.dismiss();
- printl('4. dismiss ·½·¨¿ÉÓÃÓڹرսçÃæ');
-
- printl('WebView ¿Ø¼þ·½·¨ÑÝʾÍê³É');
- }
- // ÔËÐÐʾÀý
- demonstrateWebViewMethods();
¸´ÖÆ´úÂë
|
|