AIWROK软件IOS苹果创建一个蓝色主题风格的 WebView 示例H5
AIWROK软件IOS苹果创建一个蓝色主题风格的 WebView 示例H5printl('//🍎交流QQ群711841924');
// 创建一个黄色主题风格的 WebView 示例
function createYellowThemedWebViewExample() {
// 创建 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">
<title>黄金矿工配置系统</title>
<link rel="stylesheet" href="https://lark-assets-prod-aliyun.oss-cn-hangzhou.aliyuncs.com/yuque/0/2025/css/44811133/1754534784655-d7b49f36-beac-4b87-bfd7-0f9d35594a1f.css?OSSAccessKeyId=LTAI4GKnqTWmz2X8mzA1Sjbv&Expires=1754536590&Signature=mdjtiAYrBBQLORJ9PKi6RdAatRY%3D&response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Comic Sans MS', '幼圆', 'Microsoft YaHei', cursive, sans-serif;
}
body {
background: linear-gradient(135deg, #FFD700, #FFA500);
color: #8B4513;
min-height: 100vh;
overflow-x: hidden;
padding: 20px;
}
/* 主界面样式 */
#main-container {
max-width: 600px;
margin: 0 auto;
background: linear-gradient(135deg, #FFEC8B, #FFD700);
border-radius: 25px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(139, 69, 19, 0.4);
border: 5px solid #DAA520;
position: relative;
}
.app-header {
background: linear-gradient(90deg, #FFD700, #FFA500, #DAA520);
padding: 25px;
text-align: center;
position: relative;
border-bottom: 5px solid #8B4513;
}
.app-header h1 {
font-size: 2.2rem;
font-weight: bold;
letter-spacing: 2px;
text-shadow: 3px 3px 0 #8B4513, 6px 6px 0 rgba(0, 0, 0, 0.2);
color: #FF4500;
margin: 10px 0;
}
.gold-nuggets {
display: flex;
justify-content: center;
gap: 20px;
margin: 20px 0;
}
.nugget {
width: 60px;
height: 60px;
background: radial-gradient(circle at 30% 30%, #FFD700, #DAA520);
border-radius: 50%;
border: 3px solid #8B4513;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
animation: float 3s ease-in-out infinite;
}
.nugget:nth-child(2) {
animation-delay: 0.5s;
}
.nugget:nth-child(3) {
animation-delay: 1s;
}
.start-method {
display: flex;
justify-content: center;
gap: 25px;
margin: 25px 0;
padding: 0 20px;
}
.method-option {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
background: rgba(255, 255, 255, 0.3);
padding: 15px;
border-radius: 15px;
border: 3px solid #DAA520;
transition: all 0.3s ease;
}
.method-option:hover {
transform: scale(1.05);
background: rgba(255, 255, 255, 0.5);
}
.method-option.active {
background: rgba(255, 215, 0, 0.7);
box-shadow: 0 0 15px #FF4500;
}
.method-icon {
width: 70px;
height: 70px;
background: radial-gradient(circle at 30% 30%, #FFD700, #DAA520);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
border: 3px solid #8B4513;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.method-icon i {
font-size: 30px;
color: #8B4513;
}
.method-option span {
font-size: 16px;
font-weight: bold;
color: #8B4513;
text-shadow: 1px 1px 0 #FFD700;
}
.app-list {
padding: 25px;
max-height: 60vh;
overflow-y: auto;
}
.app-item {
display: flex;
align-items: center;
padding: 20px;
background: linear-gradient(90deg, #FFEC8B, #FFD700);
border-radius: 15px;
margin-bottom: 20px;
transition: all 0.3s ease;
border: 3px solid #DAA520;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.app-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
background: linear-gradient(90deg, #FFFACD, #FFEC8B);
}
.app-checkbox {
margin-right: 20px;
}
.app-checkbox input {
width: 25px;
height: 25px;
accent-color: #FF4500;
cursor: pointer;
}
.app-info {
flex: 1;
}
.app-name {
font-weight: bold;
font-size: 18px;
margin-bottom: 8px;
color: #8B4513;
}
.app-duration {
font-size: 15px;
color: #A0522D;
font-weight: bold;
}
.config-btn {
background: linear-gradient(90deg, #FF4500, #FF6347);
color: white;
border: none;
border-radius: 10px;
padding: 12px 20px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid #8B4513;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.config-btn:hover {
opacity: 0.9;
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
/* 配置界面样式 */
.config-page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #FFD700, #FFA500);
z-index: 100;
padding: 25px;
overflow-y: auto;
transform: scale(0);
transition: transform 0.5s ease;
display: none;
}
.config-page.active {
transform: scale(1);
display: block;
}
.config-header {
display: flex;
align-items: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 5px solid #8B4513;
background: linear-gradient(90deg, #FFEC8B, #FFD700);
padding: 20px;
border-radius: 15px;
border: 3px solid #DAA520;
}
.back-button {
background: linear-gradient(90deg, #FF4500, #FF6347);
border: none;
color: white;
padding: 12px 20px;
border-radius: 50px;
cursor: pointer;
display: flex;
align-items: center;
font-size: 16px;
font-weight: bold;
transition: all 0.3s ease;
margin-right: 20px;
border: 2px solid #8B4513;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.back-button i {
margin-right: 10px;
}
.back-button:hover {
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.config-title {
font-size: 2rem;
font-weight: bold;
color: #FF4500;
text-shadow: 2px 2px 0 #8B4513;
}
.config-content {
max-width: 600px;
margin: 0 auto;
}
.config-section {
background: linear-gradient(135deg, #FFEC8B, #FFD700);
border-radius: 20px;
padding: 25px;
margin-bottom: 25px;
border: 4px solid #DAA520;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.section-title {
font-size: 1.5rem;
margin-bottom: 20px;
color: #FF4500;
display: flex;
align-items: center;
text-shadow: 1px 1px 0 #FFD700;
border-bottom: 3px solid #DAA520;
padding-bottom: 10px;
}
.section-title i {
margin-right: 15px;
background: #8B4513;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #FFD700;
}
.option-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
}
.option-item {
display: flex;
align-items: center;
padding: 15px;
background: linear-gradient(90deg, #FFFACD, #FFEC8B);
border-radius: 12px;
border: 2px solid #DAA520;
}
.option-item input {
width: 22px;
height: 22px;
accent-color: #FF4500;
margin-right: 12px;
cursor: pointer;
}
.option-item label {
font-size: 16px;
font-weight: bold;
color: #8B4513;
}
.gold-setting {
display: flex;
align-items: center;
margin: 20px 0;
padding: 15px;
background: linear-gradient(90deg, #FFFACD, #FFEC8B);
border-radius: 12px;
border: 2px solid #DAA520;
}
.gold-setting span {
margin-right: 20px;
font-size: 16px;
font-weight: bold;
color: #8B4513;
}
.radio-group {
display: flex;
gap: 20px;
}
.radio-option {
display: flex;
align-items: center;
}
.radio-option input {
margin-right: 8px;
width: 18px;
height: 18px;
accent-color: #FF4500;
}
.radio-option label {
font-size: 16px;
font-weight: bold;
color: #8B4513;
}
.input-group {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 20px 0;
}
.input-field {
flex: 1;
min-width: 220px;
}
.input-field label {
display: block;
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
color: #8B4513;
}
.input-field input {
width: 100%;
padding: 15px;
background: linear-gradient(90deg, #FFFACD, #FFEC8B);
border: 2px solid #DAA520;
border-radius: 10px;
color: #8B4513;
font-size: 16px;
font-weight: bold;
}
.input-field input::placeholder {
color: #A0522D;
}
.save-btn {
background: linear-gradient(90deg, #FF4500, #FF6347);
color: white;
border: none;
border-radius: 15px;
padding: 18px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
width: 100%;
margin-top: 25px;
transition: all 0.3s ease;
border: 3px solid #8B4513;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.save-btn:hover {
opacity: 0.9;
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
.note {
font-size: 14px;
color: #8B4513;
margin-top: 15px;
text-align: center;
font-weight: bold;
}
/* 动画效果 */
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
@keyframes zoomIn {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.zoom-in {
animation: zoomIn 0.5s ease forwards;
}
/* 矿工元素 */
.miner-icon {
position: absolute;
font-size: 40px;
color: #8B4513;
animation: float 4s ease-in-out infinite;
}
.miner-1 {
top: 20px;
left: 20px;
animation-delay: 0s;
}
.miner-2 {
bottom: 20px;
right: 20px;
animation-delay: 1s;
}
@media (max-width: 600px) {
.start-method {
flex-direction: column;
align-items: center;
gap: 15px;
}
.option-list {
grid-template-columns: 1fr;
}
.input-group {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- 装饰性矿工图标 -->
<div class="miner-icon miner-1">
<i class="fas fa-helmet-safety"></i>
</div>
<div class="miner-icon miner-2">
<i class="fas fa-shovel"></i>
</div>
<!-- 主界面 -->
<div id="main-container">
<div class="app-header">
<h1>黄金矿工起飞计划</h1>
<div class="gold-nuggets">
<div class="nugget"></div>
<div class="nugget"></div>
<div class="nugget"></div>
</div>
<div class="start-method">
<div class="method-option active">
<div class="method-icon">
<i class="fas fa-bolt"></i>
</div>
<span>闪电挖掘</span>
</div>
<div class="method-option">
<div class="method-icon">
<i class="fas fa-pickaxe"></i>
</div>
<span>手动挖掘</span>
</div>
</div>
</div>
<div class="app-list">
<!-- 红果短剧 -->
<div class="app-item">
<div class="app-checkbox">
<input type="checkbox" id="app1" checked>
</div>
<div class="app-info">
<div class="app-name">红果短剧</div>
<div class="app-duration">金币收入: 120枚/小时</div>
</div>
<button class="config-btn" onclick="showConfig('红果短剧')">配置挖矿参数</button>
</div>
<!-- 抖音极速 -->
<div class="app-item">
<div class="app-checkbox">
<input type="checkbox" id="app2" checked>
</div>
<div class="app-info">
<div class="app-name">抖音极速</div>
<div class="app-duration">金币收入: 150枚/小时</div>
</div>
<button class="config-btn" onclick="showConfig('抖音极速')">配置挖矿参数</button>
</div>
<!-- 番茄小说 -->
<div class="app-item">
<div class="app-checkbox">
<input type="checkbox" id="app3">
</div>
<div class="app-info">
<div class="app-name">番茄小说</div>
<div class="app-duration">金币收入: 80枚/小时</div>
</div>
<button class="config-btn" onclick="showConfig('番茄小说')">配置挖矿参数</button>
</div>
<!-- 番茄畅听 -->
<div class="app-item">
<div class="app-checkbox">
<input type="checkbox" id="app4" checked>
</div>
<div class="app-info">
<div class="app-name">番茄畅听</div>
<div class="app-duration">金币收入: 200枚/小时</div>
</div>
<button class="config-btn" onclick="showConfig('番茄畅听')">配置挖矿参数</button>
</div>
<!-- 畅听音乐 -->
<div class="app-item">
<div class="app-checkbox">
<input type="checkbox" id="app5">
</div>
<div class="app-info">
<div class="app-name">畅听音乐</div>
<div class="app-duration">金币收入: 90枚/小时</div>
</div>
<button class="config-btn" onclick="showConfig('畅听音乐')">配置挖矿参数</button>
</div>
<!-- 头条极速版 -->
<div class="app-item">
<div class="app-checkbox">
<input type="checkbox" id="app6">
</div>
<div class="app-info">
<div class="app-name">头条极速版</div>
<div class="app-duration">金币收入: 110枚/小时</div>
</div>
<button class="config-btn" onclick="showConfig('头条极速版')">配置挖矿参数</button>
</div>
<!-- 西瓜视频 -->
<div class="app-item">
<div class="app-checkbox">
<input type="checkbox" id="app7" checked>
</div>
<div class="app-info">
<div class="app-name">西瓜视频</div>
<div class="app-duration">金币收入: 180枚/小时</div>
</div>
<button class="config-btn" onclick="showConfig('西瓜视频')">配置挖矿参数</button>
</div>
<!-- 汽水音乐 -->
<div class="app-item">
<div class="app-checkbox">
<input type="checkbox" id="app8">
</div>
<div class="app-info">
<div class="app-name">汽水音乐</div>
<div class="app-duration">金币收入: 70枚/小时</div>
</div>
<button class="config-btn" onclick="showConfig('汽水音乐')">配置挖矿参数</button>
</div>
</div>
</div>
<!-- 配置界面 -->
<div id="config-page" class="config-page">
<div class="config-header">
<button class="back-button" onclick="goBack()">
<i class="fas fa-arrow-left"></i> 返回金矿
</button>
<h1 class="config-title">红果短剧挖矿配置</h1>
</div>
<div class="config-content">
<div class="config-section">
<h2 class="section-title"><i class="fas fa-cog"></i> 挖矿功能设置</h2>
<div class="option-list">
<div class="option-item">
<input type="checkbox" id="option1" checked>
<label for="option1">观看短剧赚金币</label>
</div>
<div class="option-item">
<input type="checkbox" id="option2">
<label for="option2">查看收益日报</label>
</div>
<div class="option-item">
<input type="checkbox" id="option3">
<label for="option3">海量视频观看</label>
</div>
<div class="option-item">
<input type="checkbox" id="option4">
<label for="option4">幸运翻牌游戏</label>
</div>
<div class="option-item">
<input type="checkbox" id="option5">
<label for="option5">红包雨活动</label>
</div>
<div class="option-item">
<input type="checkbox" id="option6">
<label for="option6">单广告观看</label>
</div>
<div class="option-item">
<input type="checkbox" id="option7" checked>
<label for="option7">开启宝箱奖励</label>
</div>
</div>
</div>
<div class="config-section">
<h2 class="section-title"><i class="fas fa-coins"></i> 金币保护设置</h2>
<div class="gold-setting">
<span>当金币低于</span>
<div class="radio-group">
<div class="radio-option">
<input type="radio" id="goldOption1" name="goldOption" checked>
<label for="goldOption1">继续挖矿</label>
</div>
<div class="radio-option">
<input type="radio" id="goldOption2" name="goldOption">
<label for="goldOption2">暂停挖矿</label>
</div>
</div>
</div>
<div class="input-group">
<div class="input-field">
<label>最低金币阈值</label>
<input type="text" placeholder="2000" value="2000">
</div>
</div>
</div>
<div class="config-section">
<h2 class="section-title"><i class="fas fa-ad"></i> 广告挖掘设置</h2>
<div class="input-group">
<div class="input-field">
<label>直播间停留时间（秒）</label>
<input type="text" placeholder="5,10" value="5,10">
</div>
<div class="input-field">
<label>广告转化比例（%）</label>
<input type="text" placeholder="50" value="50">
</div>
<div class="input-field">
<label>广告转化时间（秒）</label>
<input type="text" placeholder="30,60" value="30,60">
</div>
<div class="input-field">
<label>广告关闭时间（秒）</label>
<input type="text" placeholder="8,16" value="8,16">
</div>
</div>
<p class="note">时间设置请用英文逗号(,)分隔多个数值</p>
</div>
<button class="save-btn" onclick="saveConfig()">
<i class="fas fa-save"></i> 保存挖矿配置并返回金矿
</button>
</div>
</div>
<script>
// 显示配置界面
function showConfig(appName) {
// 更新配置界面标题
document.querySelector('.config-title').textContent = appName + '挖矿配置';
// 隐藏主界面
document.getElementById('main-container').style.display = 'none';
// 显示配置界面
document.getElementById('config-page').classList.add('active');
// 添加动画效果
setTimeout(() => {
const elements = document.querySelectorAll('.config-section, .save-btn');
elements.forEach((el, index) => {
el.style.opacity = '0';
setTimeout(() => {
el.classList.add('zoom-in');
el.style.opacity = '1';
}, index * 150);
});
}, 10);
}
// 返回主界面
function goBack() {
// 隐藏配置界面
document.getElementById('config-page').classList.remove('active');
// 显示主界面
setTimeout(() => {
document.getElementById('main-container').style.display = 'block';
}, 500);
}
// 保存配置
function saveConfig() {
// 这里可以添加保存配置的逻辑
alert('挖矿配置已保存！金矿即将产出更多金币！');
goBack();
}
// 启动方式选择
const methodOptions = document.querySelectorAll('.method-option');
methodOptions.forEach(option => {
option.addEventListener('click', () => {
methodOptions.forEach(opt => opt.classList.remove('active'));
option.classList.add('active');
});
});
// WebView 与原生交互的函数
function setConfig(key, value) {
// 在实际应用中，这会调用原生方法
console.log('设置配置:', key, '=', value);
}
function getConfig(key) {
// 在实际应用中，这会调用原生方法并返回 Promise
return new Promise((resolve) => {
setTimeout(() => {
resolve('配置值');
}, 100);
});
}
function toast(message) {
// 在实际应用中，这会显示原生 Toast 提示
alert(message);
}
function runJS(callback) {
// 在实际应用中，这会在原生环境中执行 JS 代码
callback();
}
function runFile(filename) {
// 在实际应用中，这会运行指定的脚本文件
console.log('运行脚本文件:', filename);
}
function printl(message) {
// 在实际应用中，这会打印日志
console.log(message);
}
</script>
</body>
</html>
`);
return web;
}
// 演示 WebView 的各种方法
function demonstrateWebViewMethods() {
printl('开始演示 WebView 控件的各种方法');
// 1. 创建并显示 WebView
var webView = createYellowThemedWebViewExample();
printl('1. WebView 已创建并显示黄色主题界面');
// 2. 演示 loadUrl 方法（注释形式，避免实际跳转）
// webView.loadUrl('https://www.baidu.com');
printl('2. loadUrl 方法可用于加载网页 URL');
// 3. 演示 loadFile 方法（注释形式）
// webView.loadFile('/sdcard/index.html');
printl('3. loadFile 方法可用于加载本地文件');
// 4. 演示 dismiss 方法（注释形式，避免实际关闭）
// webView.dismiss();
printl('4. dismiss 方法可用于关闭界面');
printl('WebView 控件方法演示完成');
}
// 运行示例
demonstrateWebViewMethods();
演示了如何创建和操作 WebView 控件。代码中使用了注释的方式避免了实际的 URL 加载和界面关闭，以确保安全性和功能性。以下是代码的详细说明：
function createYellowThemedWebViewExample() {...}：定义了一个名为 createYellowThemedWebViewExample 的函数，用于创建一个带有黄色主题风格的 WebView 示例。var web = new WebView();：创建了一个新的 WebView 实例。web.show();：显示 WebView 界面。web.loadHtml('...');：加载了一段 HTML 内容到 WebView 中，该内容显示了一些应用名称和对应的金币收入，以及一个简单的挖矿配置界面。function demonstrateWebViewMethods() {...}：定义了一个名为 demonstrateWebViewMethods 的函数，用于演示 WebView 控件的各种方法。printl('开始演示 WebView 控件的各种方法');：打印一条消息，表示接下来将演示 WebView 的各种方法。var webView = createYellowThemedWebViewExample();：调用之前定义的函数创建并显示了一个 WebView 实例。printl('1. WebView 已创建并显示黄色主题界面');：打印一条消息，确认 WebView 已按预期显示。// webView.loadUrl('https://www.baidu.com');：注释掉的代码展示了如何使用 loadUrl 方法加载一个网页 URL。这里没有实际加载网页，以防止不必要的网络访问。printl('2. loadUrl 方法可用于加载网页 URL');：打印一条消息，说明 loadUrl 方法的作用。// webView.loadFile('/sdcard/index.html');：注释掉的代码展示了如何使用 loadFile 方法加载本地文件。这里没有实际加载文件，以防止访问不安全的文件路径。printl('3. loadFile 方法可用于加载本地文件');：打印一条消息，说明 loadFile 方法的作用。// webView.dismiss();：注释掉的代码展示了如何使用 dismiss 方法关闭 WebView 界面。这里没有实际关闭界面，以防止界面在演示过程中意外关闭。printl('4. dismiss 方法可用于关闭界面');：打印一条消息，说明 dismiss 方法的作用。printl('WebView 控件方法演示完成');：打印一条消息，表示 WebView 方法演示已经完成。demonstrateWebViewMethods();：调用 demonstrateWebViewMethods 函数，运行演示。https://cdn.nlark.com/yuque/0/2025/png/44811133/1754866667358-a9f65ed6-3dc0-448e-9b54-6dba46427834.png需要注意的是，代码中提到的“黄色主题”通常不会被用来描述 WebView 的外观颜色，这可能是一个误导性的描述或代码示例中的错误。在实际开发中，WebView 的颜色主题可以通过 CSS 来设置，而不是通过“黄色主题”这样的描述。
页:
[1]