苹果IOS系统简单展示一下H5界面AIWORK WebView 示例
苹果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>
`);
页:
[1]