webview_demo_v2/
webview_demo_v2.rs

1//! WebView 网页视图演示 (新库版本)
2//!
3//! 演示 WebView 组件的使用：
4//! - 显示HTML内容
5//! - 加载网页URL
6//! - 执行JavaScript代码
7//! - 网页导航（前进/后退）
8
9use termux_gui::{Activity, WebView, Result};
10use termux_gui::connection::read_message;
11
12fn main() -> Result<()> {
13    println!("=== WebView 网页视图演示 (新库版本) ===\n");
14    
15    // 创建 Activity
16    let mut activity = Activity::new(false)?;
17    println!("✓ 连接建立\n");
18    
19    // 创建根布局 (垂直)
20    let root = activity.create_linear_layout(None)?;
21    
22    // 标题文本
23    let title = activity.create_text_view("🌐 WebView 演示", Some(root.id()))?;
24    title.set_text_size(&mut activity, 20)?;
25    title.view().set_height_wrap_content(&mut activity)?;
26    title.view().set_margin(&mut activity, 16)?;
27    title.view().set_linear_layout_params(&mut activity, 0, None)?;
28    
29    // 提示文本
30    let hint = activity.create_text_view(
31        "━━━━━━━━━━━━━━━━━━━━━━\n\
32        演示步骤:\n\
33        1️⃣ 显示HTML内容 (3秒)\n\
34        2️⃣ 加载Google网页 (3秒)\n\
35        3️⃣ 请求JavaScript权限\n\
36        4️⃣ 执行JavaScript代码\n\
37        ━━━━━━━━━━━━━━━━━━━━━━", 
38        Some(root.id()))?;
39    hint.set_text_size(&mut activity, 14)?;
40    hint.view().set_height_wrap_content(&mut activity)?;
41    hint.view().set_margin(&mut activity, 16)?;
42    hint.view().set_linear_layout_params(&mut activity, 0, None)?;
43    
44    // 创建 WebView
45    let webview = activity.create_web_view(Some(root.id()))?;
46    webview.view().set_linear_layout_params(&mut activity, 1, None)?;  // 占据剩余空间
47    
48    println!("✓ 界面创建完成\n");
49    
50    // 演示流程
51    demo_workflow(&mut activity, &webview)?;
52    
53    println!("\n📌 等待用户关闭窗口...");
54    
55    // 事件循环
56    loop {
57        let event = read_message(activity.event_stream())?;
58        let event_type = event["type"].as_str().unwrap_or("");
59        
60        match event_type {
61            "destroy" => {
62                println!("\n✓ Activity 已关闭");
63                return Ok(());
64            },
65            _ => {}
66        }
67    }
68}
69
70/// 演示 WebView 的各种功能
71fn demo_workflow(activity: &mut Activity, webview: &WebView) -> Result<()> {
72    use std::thread;
73    use std::time::Duration;
74    
75    // 步骤1: 显示 HTML 内容
76    println!("1️⃣ 显示 HTML 内容...");
77    let html = r#"
78        <html>
79        <head>
80            <meta name="viewport" content="width=device-width, initial-scale=1.0">
81            <style>
82                body {
83                    font-family: Arial, sans-serif;
84                    padding: 20px;
85                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
86                    color: white;
87                    text-align: center;
88                }
89                h1 {
90                    font-size: 2em;
91                    margin-bottom: 20px;
92                    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
93                }
94                p {
95                    font-size: 1.2em;
96                    line-height: 1.6;
97                }
98                .emoji {
99                    font-size: 3em;
100                    margin: 20px 0;
101                }
102            </style>
103        </head>
104        <body>
105            <div class="emoji">🚀</div>
106            <h1>Hello from HTML!</h1>
107            <p>这是通过 setData() 设置的 HTML 内容</p>
108            <p>包含样式和布局</p>
109        </body>
110        </html>
111    "#;
112    webview.set_data(activity, html)?;
113    println!("   ✓ HTML 内容已设置");
114    
115    // 等待3秒
116    thread::sleep(Duration::from_secs(3));
117    
118    // 步骤2: 加载网页
119    println!("\n2️⃣ 加载 Google 网页...");
120    webview.load_uri(activity, "https://www.google.com")?;
121    println!("   ✓ URL 已加载");
122    
123    // 等待3秒
124    thread::sleep(Duration::from_secs(3));
125    
126    // 步骤3: 请求 JavaScript 权限
127    println!("\n3️⃣ 请求 JavaScript 权限...");
128    println!("   ⏳ 等待用户确认...");
129    
130    match webview.allow_javascript(activity, true) {
131        Ok(enabled) => {
132            if enabled {
133                println!("   ✓ JavaScript 已启用");
134                
135                // 步骤4: 执行 JavaScript
136                println!("\n4️⃣ 执行 JavaScript 代码...");
137                let js_code = r#"
138                    document.body.innerHTML = `
139                        <div style="
140                            font-family: Arial, sans-serif;
141                            padding: 20px;
142                            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
143                            color: white;
144                            text-align: center;
145                            min-height: 100vh;
146                            display: flex;
147                            flex-direction: column;
148                            justify-content: center;
149                            align-items: center;
150                        ">
151                            <div style="font-size: 4em; margin-bottom: 20px;">✨</div>
152                            <h1 style="font-size: 2.5em; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">
153                                Hello from JavaScript!
154                            </h1>
155                            <p style="font-size: 1.5em; line-height: 1.6;">
156                                这个页面是通过 evaluateJS() 动态创建的
157                            </p>
158                            <p style="font-size: 1.2em; margin-top: 20px;">
159                                🎉 JavaScript 执行成功！
160                            </p>
161                        </div>
162                    `;
163                "#;
164                webview.evaluate_js(activity, js_code)?;
165                println!("   ✓ JavaScript 已执行");
166                println!("   ✓ 页面内容已通过 JS 更新");
167            } else {
168                println!("   ⚠ JavaScript 未启用（用户拒绝或系统限制）");
169            }
170        },
171        Err(e) => {
172            println!("   ⚠ 启用 JavaScript 失败: {}", e);
173        }
174    }
175    
176    println!("\n✓ 演示流程完成！");
177    
178    Ok(())
179}
webview_demo_v2/webview_demo_v2.rs

webview_demo_v2/
webview_demo_v2.rs
