 | |  |  | 示例苹果IOS系统简单展示一下H5界面AIWORK WebView 示例
- //交流QQ群711841924
- //简单展示一下H5界面AIWORK WebView 示例
- var web = new WebView()
- web.show();
- 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>AIWORK WebView 示例</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
-
- body {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- color: #333;
- line-height: 1.6;
- padding: 20px;
- min-height: 100vh;
- }
-
- .container {
- max-width: 800px;
- margin: 0 auto;
- background: rgba(255, 255, 255, 0.95);
- border-radius: 15px;
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
- overflow: hidden;
- }
-
- header {
- background: linear-gradient(90deg, #4b6cb7, #182848);
- color: white;
- padding: 25px;
- text-align: center;
- }
-
- h1 {
- font-size: 28px;
- margin-bottom: 10px;
- }
-
- .subtitle {
- font-size: 16px;
- opacity: 0.9;
- }
-
- .content {
- padding: 30px;
- }
-
- .section {
- margin-bottom: 30px;
- padding: 20px;
- border-radius: 10px;
- background: #f8f9fa;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
- }
-
- h2 {
- color: #4b6cb7;
- margin-bottom: 15px;
- font-size: 22px;
- }
-
- .input-group {
- margin-bottom: 15px;
- }
-
- label {
- display: block;
- margin-bottom: 5px;
- font-weight: 500;
- }
-
- input, textarea {
- width: 100%;
- padding: 12px;
- border: 1px solid #ddd;
- border-radius: 6px;
- font-size: 16px;
- transition: border-color 0.3s;
- }
-
- input:focus, textarea:focus {
- outline: none;
- border-color: #4b6cb7;
- box-shadow: 0 0 0 2px rgba(75, 108, 183, 0.2);
- }
-
- .button-group {
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
- margin-top: 15px;
- }
-
- button {
- flex: 1;
- min-width: 120px;
- padding: 12px 20px;
- border: none;
- border-radius: 6px;
- font-size: 16px;
- font-weight: 500;
- cursor: pointer;
- transition: all 0.3s ease;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
- }
-
- button:active {
- transform: translateY(1px);
- }
-
- .btn-primary {
- background: linear-gradient(90deg, #4b6cb7, #182848);
- color: white;
- }
-
- .btn-success {
- background: linear-gradient(90deg, #56ab2f, #a8e063);
- color: white;
- }
-
- .btn-warning {
- background: linear-gradient(90deg, #ffb347, #ffcc33);
- color: white;
- }
-
- .btn-danger {
- background: linear-gradient(90deg, #ff416c, #ff4b2b);
- color: white;
- }
-
- .result {
- margin-top: 20px;
- padding: 15px;
- background: #e3f2fd;
- border-radius: 6px;
- border-left: 4px solid #2196f3;
- display: none;
- }
-
- .result.show {
- display: block;
- }
-
- .result h3 {
- margin-bottom: 10px;
- color: #0d47a1;
- }
-
- .result-content {
- font-family: monospace;
- background: white;
- padding: 10px;
- border-radius: 4px;
- white-space: pre-wrap;
- word-break: break-all;
- }
-
- footer {
- text-align: center;
- padding: 20px;
- background: #f8f9fa;
- color: #6c757d;
- font-size: 14px;
- }
-
- @media (max-width: 600px) {
- .container {
- margin: 10px;
- border-radius: 10px;
- }
-
- .content {
- padding: 20px;
- }
-
- h1 {
- font-size: 24px;
- }
-
- .button-group {
- flex-direction: column;
- }
-
- button {
- width: 100%;
- }
- }
- </style>
- </head>
- <body>
- <div class="container">
- <header>
- <h1>WebView 功能演示</h1>
- <p class="subtitle">展示 H5 与原生应用的交互功能</p>
- </header>
-
- <div class="content">
- <div class="section">
- <h2>配置管理</h2>
- <div class="input-group">
- <label for="configKey">配置键:</label>
- <input type="text" id="configKey" placeholder="输入配置键" value="user_name">
- </div>
- <div class="input-group">
- <label for="configValue">配置值:</label>
- <input type="text" id="configValue" placeholder="输入配置值" value="AIWORK 用户">
- </div>
- <div class="button-group">
- <button class="btn-primary" onclick="setConfigValue()">设置配置</button>
- <button class="btn-success" onclick="getConfigValue()">获取配置</button>
- </div>
- <div class="result" id="configResult">
- <h3>操作结果</h3>
- <div class="result-content" id="configResultContent"></div>
- </div>
- </div>
-
- <div class="section">
- <h2>消息提示</h2>
- <div class="input-group">
- <label for="toastMessage">提示消息:</label>
- <input type="text" id="toastMessage" placeholder="输入要显示的消息" value="这是一条提示消息">
- </div>
- <div class="button-group">
- <button class="btn-warning" onclick="showToast()">显示提示</button>
- </div>
- </div>
-
- <div class="section">
- <h2>脚本执行</h2>
- <div class="input-group">
- <label for="scriptCode">脚本代码:</label>
- <textarea id="scriptCode" rows="4" placeholder="输入要执行的脚本代码">printl("这是从WebView执行的脚本");
- toast("脚本执行成功");</textarea>
- </div>
- <div class="button-group">
- <button class="btn-danger" onclick="runScript()">执行脚本</button>
- </div>
- <div class="result" id="scriptResult">
- <h3>执行结果</h3>
- <div class="result-content" id="scriptResultContent">脚本已执行,请查看原生应用日志</div>
- </div>
- </div>
-
- <div class="section">
- <h2>应用控制</h2>
- <div class="button-group">
- <button class="btn-danger" onclick="closeWebView()">关闭界面</button>
- </div>
- </div>
- </div>
-
- <footer>
- <p>AIWORK WebView 示例 | 用于演示 H5 与原生应用交互</p>
- </footer>
- </div>
- <script>
- // 显示结果
- function showResult(elementId) {
- const resultElement = document.getElementById(elementId);
- resultElement.classList.add('show');
- setTimeout(() => {
- resultElement.classList.remove('show');
- }, 5000);
- }
-
- // 设置配置
- function setConfigValue() {
- const key = document.getElementById('configKey').value;
- const value = document.getElementById('configValue').value;
-
- if (!key) {
- alert('请输入配置键');
- return;
- }
-
- setConfig(key, value);
- document.getElementById('configResultContent').textContent =
- '配置已设置:\\n键: ' + key + '\\n值: ' + value;
- showResult('configResult');
- }
-
- // 获取配置
- async function getConfigValue() {
- const key = document.getElementById('configKey').value;
-
- if (!key) {
- alert('请输入配置键');
- return;
- }
-
- try {
- const value = await getConfig(key);
- document.getElementById('configResultContent').textContent =
- '获取到配置:\\n键: ' + key + '\\n值: ' + value;
- } catch (error) {
- document.getElementById('configResultContent').textContent =
- '获取配置失败: ' + error;
- }
- showResult('configResult');
- }
-
- // 显示提示
- function showToast() {
- const message = document.getElementById('toastMessage').value;
- if (message) {
- toast(message);
- }
- }
-
- // 执行脚本
- function runScript() {
- const scriptCode = document.getElementById('scriptCode').value;
- runJS(() => {
- try {
- eval(scriptCode);
- showResult('scriptResult');
- } catch (error) {
- document.getElementById('scriptResultContent').textContent =
- '脚本执行出错: ' + error;
- showResult('scriptResult');
- }
- });
- }
-
- // 关闭界面
- function closeWebView() {
- if (confirm('确定要关闭当前界面吗?')) {
- dismiss();
- }
- }
-
- // 页面加载完成后提示
- window.onload = function() {
- toast("WebView页面加载完成");
- }
- </script>
- </body>
- </html>
- `);
复制代码
| |  | |  |
|