[不懂前端也能用] WebView2高颜值应用商店/下载器UI界面

kfanghong

【开源分享】高颜值应用商店/下载器UI界面 —— 易语言+WebView2
不懂前端也能用 | 纯中文指令控制 | 复制粘贴就能跑

---

先说最重要的事：你完全不需要懂HTML、CSS、JavaScript。这个界面就是一个单独的HTML文件，你只需要用WebView2组件加载它，然后通过发送中文文本消息就能控制界面上的一切。比如你想加一个软件卡片，就发一句 插入普通卡片：xxx&&&xxx ，界面就自动渲染出来了。

---

整体效果预览

---

功能清单

■ 界面框架

• 8方向边缘拉伸：窗口四边和四角都有隐藏的拉伸热区，鼠标靠近自动变成对应的拉伸光标，按下就发消息给易语言处理调整窗口大小
• 标题栏拖拽移动：标签栏空白区域可以拖拽移动窗口，按钮等可交互区域自动排除
• 窗口控制按钮：右上角最小化、最大化、关闭按钮，点击发送对应消息
• 桌面应用化处理：禁用了右键菜单（输入框除外）、禁用了文本选择、禁用了图片拖拽，嵌入后和原生桌面窗口看起来没区别
  

■ 多标签页系统

• 浏览器风格标签栏：和Chrome标签页类似的设计，支持动态创建和关闭
• 内置页面：首页（应用广场）、下载管理、我的应用，都以标签页形式存在
• 左侧Logo：支持通过消息动态更换，点击随时回到首页
  

■ 应用展示 — 三种卡片样式

普通卡片：最常用的，上面图标、中间标题和描述、底部按钮，适合展示一般的软件工具。

大图卡片：全屏背景大图+底部文字叠加，适合游戏或需要视觉冲击力的内容。底部有渐变遮罩确保文字可读。

图文混合卡片：左边是大图、右边是图标+标题+描述+按钮的水平布局，适合编辑推荐或专题内容。在网格中自动占据两列宽度。

三种卡片可以混合放在同一个分组里，网格布局会自动适配，不用你操心排版。

■ 轮播Banner

• 首页顶部全宽Banner区域，支持两种模式：
    ● 自定义Banner：从图标和应用信息自动生成，左侧渐变背景+右侧应用图标水印
    ● 图片Banner：直接用一张大图作为背景
• 支持鼠标滚轮切换、左右箭头切换、底部指示点切换
• 自动轮播，鼠标悬停时暂停
• 插入卡片时在参数里标记 真[标签文字] 就自动加入Banner，不用单独管理
  

■ 下载管理（重点打磨了动效）

这块花了比较多心思做动效：

下载触发动画：用户点击卡片上的"获取"按钮后——
1. 卡片先灵动缩小（带微弹跳和轻微旋转，不是生硬的缩放）
2. 缩小到一定程度后生成一个飞行元素，沿贝塞尔曲线飞向标签栏的"下载管理"标签页
3. 飞行过程中元素不断缩小并旋转，快到终点时渐隐消失
4. 卡片弹性回弹恢复原状（有弹簧过冲效果）
5. 卡片上的按钮变成进度条状态显示"等待中"
6. 下载管理标签上出现红色数字角标

从Banner点击下载也有类似动画，Banner会先有一个整体缩小打包的效果，然后飞行元素从Banner中心飞出。

下载进度展示：

• 下载列表中每个项目有独立的进度条、速度显示、百分比
• 卡片上的按钮也同步显示进度，已填充部分用绿色渐变+流光效果，文字颜色随填充自动从黑变白
• 下载完成后卡片按钮自动变成绿色的"启动"按钮
  

删除下载项动画：点关闭按钮后，下载项向右滑出+渐隐，然后高度平滑折叠收起，一气呵成不卡顿（全程GPU加速，用的transform和opacity）。

多任务并行：每个下载任务有唯一标识（1-100的不重复数字），多个任务同时下载时进度互不影响，删除任务后标识会回收复用。

■ 卡密验证系统

部分应用可以设置成需要卡密才能启动：

• 卡片左上角会显示一个精致的琥珀金角标（扇形，带钥匙图标和内发光质感），一眼就能看出这个应用需要卡密
• 点击启动时不会直接发消息，而是弹出卡密验证弹窗
• 弹窗设计：顶部有琥珀金装饰条、左侧显示应用图标、输入框内嵌钥匙图标、等宽字体显示卡密
• 输入卡密点击"验证启动"后显示等待状态（带旋转Loading），等待易语言端返回验证结果
• 验证成功：绿色提示，1.2秒后自动关闭弹窗
• 验证失败：红色提示显示失败原因（比如"卡密已过期"），可以重新输入
• 支持Enter键快捷提交
  

■ 提示框

• 支持通过消息弹出提示框，带半透明遮罩，用户点击"确定"关闭
  

■ 主题切换

不是简单地换个背景色，而是有圆形扩散过渡动画：

• 从主题切换按钮的位置开始，新主题以圆形向四周扩散
• 扩散过程中你能同时看到半边深色半边浅色的效果（基于View Transitions API实现）
• 所有颜色都用CSS变量管理，深浅两套色板在 :root 和 [data-theme="dark"] 里定义
  

■ 搜索功能

• 点击搜索框弹出搜索覆盖层，实时搜索已有的所有卡片
• 搜索结果显示图标、名称、描述，鼠标悬停有滑入箭头动效
• 点击搜索结果自动跳转回首页、滚动到对应卡片位置、短暂高亮闪烁该卡片
• 搜索历史：以标签形式保存最近10条搜索记录，存在LocalStorage里关闭重开还在，每条可以单独删除或一键清空
  

■ 我的应用

• 顶部工具栏有"我的应用"入口
• 自动收集所有已下载（下载完成）的应用，以卡片形式展示
• 需要卡密的应用也会显示卡密角标
  

---

一些设计细节

说几个可能不容易注意到的小地方：

1. 卡片hover效果：鼠标悬停时卡片会微微上浮并加深阴影，离开时平滑回落，有"触碰反馈"的感觉
2. Banner背景色提取：自定义Banner会用Canvas从应用图标中提取主色调，自动生成和谐的渐变背景，每个Banner颜色都不一样
3. Banner水印：右侧有半透明的应用名文字和大图标作为水印装饰，视觉上不会太空
4. 下载角标：下载管理按钮上的红色角标，有新任务时才显示，为0时自动隐藏
5. 进度条流光：下载中的进度条填充部分有一个白色高光从左到右不断扫过的shimmer效果
6. 滚动条美化：内容区的滚动条是自定义的细条样式，悬停才明显，不抢视觉
```````

---

不懂前端怎么用？（手把手教程）

第一步：把HTML文件放到你的项目目录

就一个文件 download_ui.html，放哪都行，等下记住路径就好。

第二步：用WebView2加载它

1. WebView2.导航 ("你的路径\download_ui.html")

复制代码

第三步：等待界面就绪

界面加载完成后会主动给你发一条消息：页面已加载完成

在WebView2的消息接收事件里判断：

1. .如果 (消息 = "页面已加载完成")
   
2.     ' 界面准备好了，开始添加内容
   
3.     初始化商店内容 ()
   
4. .如果结束

复制代码

第四步：更新Logo（可选）

1. WebView2.发送消息 ("更新LOGO：logo.png")

复制代码

支持相对路径和网络链接。

第五步：添加分组和卡片

1. ' ① 先创建分组（相当于一个分类）
   
2. WebView2.发送消息 ("创建商店分组：热门推荐")
   
3. WebView2.发送消息 ("创建商店分组：实用工具")
   
4. 
   
5. ' ② 往分组里插入卡片
   
6. ' 参数用 &&& 隔开，依次是：分组名、图标地址、标题、描述、下载地址、是否进Banner、是否已下载、是否需要卡密
   
7. 
   
8. ' 普通卡片
   
9. WebView2.发送消息 ("插入普通卡片：热门推荐&&&https://图标地址.png&&&微信&&&国民社交软件&&&https://下载地址/wechat.exe&&&假&&&假&&&假")
   
10. 
    
11. ' 想让它出现在Banner里？第6个参数改成 真[标签文字]
    
12. WebView2.发送消息 ("插入普通卡片：热门推荐&&&https://图标地址.png&&&QQ&&&年轻人的社交&&&https://下载地址/qq.exe&&&真[社交必备]&&&假&&&假")
    
13. 
    
14. ' 已经下载过的？第7个参数改成 真，卡片直接显示"启动"按钮
    
15. WebView2.发送消息 ("插入普通卡片：实用工具&&&https://图标地址.png&&&记事本&&&轻量文本编辑&&&C:\notepad.exe&&&假&&&真&&&假")
    
16. 
    
17. ' 需要卡密的？最后一个参数改成 真，卡片有角标，启动弹验证框
    
18. WebView2.发送消息 ("插入普通卡片：实用工具&&&https://图标地址.png&&&XX加速器&&&游戏网络加速&&&https://下载地址/xx.exe&&&假&&&假&&&真")
    
19. 
    
20. ' 大图卡片（参数一样，只是图标换成大图地址）
    
21. WebView2.发送消息 ("插入大图卡片：热门推荐&&&https://游戏封面大图.jpg&&&艾尔登法环&&&拿起你的剑&&&https://下载地址/elden.exe&&&真[史诗巨作]&&&假&&&假")
    
22. 
    
23. ' 图文混合卡片（多一个图标参数，在大图和标题之间）
    
24. WebView2.发送消息 ("插入图文混合卡片：热门推荐&&&https://左侧大图.jpg&&&https://小图标.png&&&Photoshop&&&专业图像处理&&&https://下载地址/ps.exe&&&假&&&假&&&假")

复制代码

第六步：处理用户操作

用户在界面上的所有操作都会通过消息通知你：

1. .如果 (消息.取文本左边 (5) = "开始下载：")
   
2.     ' 解析出应用名、下载地址、唯一标识
   
3.     ' 比如消息是："开始下载：微信-下载地址：https://xxx-唯一标识：42"
   
4.     ' 在这里启动你的下载线程
   
5. 
   
6. .如果 (消息.取文本左边 (5) = "停止下载：")
   
7.     ' 消息是 "停止下载：42"，42就是唯一标识
   
8.     ' 在这里停止对应的下载线程
   
9. 
   
10. .如果 (消息.取文本左边 (5) = "启动应用：")
    
11.     ' 消息是 "启动应用：微信&&&C:\Downloads\WeChat.exe"
    
12.     ' 直接运行这个路径就行
    
13.     ' 如果有卡密："启动应用：XX加速器&&&C:\xx.exe&&&验证卡密：ABCD-1234"
    
14.     ' 先去你的服务器验证卡密，然后回传结果
    
15. 
    
16. .如果 (消息 = "最小化窗口")
    
17.     窗口最小化 ()
    
18. .如果 (消息 = "最大化窗口")
    
19.     窗口最大化 ()
    
20. .如果 (消息 = "关闭窗口")
    
21.     结束 ()

复制代码

第七步：回传下载进度

你的下载线程在跑的过程中，用定时器把进度发回给界面：

1. ' 下载进度（进度是0-100的数字，不要带%号）
   
2. WebView2.发送消息 ("下载回调：微信&&&35&&&2.4MB/s")
   
3. WebView2.发送消息 ("下载回调：微信&&&78&&&5.1MB/s")
   
4. 
   
5. ' 下载完成（告诉界面文件存到哪了，之后启动就用这个路径）
   
6. WebView2.发送消息 ("下载完成：微信&&&C:\Downloads\WeChat.exe")

复制代码

注意：下载进度消息只是更新显示，不会触发"完成"。必须发"下载完成："消息才会让卡片变成启动按钮。

第八步：处理卡密验证（如果你用了卡密功能）

1. ' 收到用户输入的卡密后，去你的服务器验证
   
2. ' 验证通过：
   
3. WebView2.发送消息 ("卡密验证：XX加速器&&&成功")
   
4. 
   
5. ' 验证失败（第二个参数写失败原因，界面会直接显示）：
   
6. WebView2.发送消息 ("卡密验证：XX加速器&&&卡密已过期，请重新购买")

复制代码

第九步：弹出提示框（可选）

1. WebView2.发送消息 ("弹出提示框：欢迎使用本软件！")

复制代码

---

完整消息格式速查

你发给界面的（易语言 → 界面）

消息格式	说明
创建商店分组：分组名称	在首页创建一个分类
更新LOGO：图片路径或链接	更新左上角Logo图标
插入普通卡片：分组&&&图标&&&标题&&&描述&&&下载地址&&&Banner标志&&&已下载&&&需要卡密	小图标卡片
插入大图卡片：分组&&&大图&&&标题&&&描述&&&下载地址&&&Banner标志&&&已下载&&&需要卡密	大背景图卡片
插入图文混合卡片：分组&&&大图&&&图标&&&标题&&&描述&&&下载地址&&&Banner标志&&&已下载&&&需要卡密	左图右文卡片
下载回调：应用名&&&进度数字&&&速度文本	实时更新下载进度
下载完成：应用名&&&本地文件路径	标记下载完成
卡密验证：应用名&&&成功	卡密验证通过
卡密验证：应用名&&&失败原因文本	卡密验证失败
弹出提示框：提示内容	弹出提示框

参数说明：
● Banner标志：假 = 不加入Banner，真[显示的标签] = 加入Banner轮播
● 已下载：真 = 显示启动按钮，假 = 显示获取按钮
● 需要卡密：真 = 启动时弹卡密验证框，假 = 直接启动

界面发给你的（界面 → 易语言）

消息格式	说明
页面已加载完成	界面准备就绪，可以开始发数据了
开始下载：名称-下载地址：地址-唯一标识：数字	用户点了下载按钮
停止下载：数字	用户取消了某个下载任务
启动应用：名称&&&本地路径	用户点了启动（不需要卡密）
启动应用：名称&&&本地路径&&&验证卡密：卡密内容	用户点了启动（需要卡密）
最小化窗口 / 最大化窗口 / 关闭窗口	窗口控制
调整尺寸-1 到 调整尺寸-8	用户拖拽了窗口边缘（1=左上角，顺时针到8=左边）

---

常见问题

Q：首次打开很慢？
A：图标库Remix Icon是CDN引入的，第一次需要联网加载。如果你想离线使用，可以把图标字体文件下载下来改成本地引用。

Q：图标地址填什么？
A：可以填网络图片URL（https://开头），也可以填本地路径。推荐用png格式正方形图标效果最好。

Q：一个分组里能混合放不同类型的卡片吗？
A：可以。普通卡片占1列，大图和图文卡片自动占2列，网格排版会自适应。

Q：分组的顺序是什么？
A：按你发送"创建商店分组"消息的先后顺序从上到下排列。

Q：能改颜色风格吗？
A：文件最开头 <style> 里有一段 :root 的CSS变量，比如 --primary: #0084ff 是主题色，--bg-body 是背景色，改这些值就行。深色模式的变量在 [data-theme="dark"] 里。不懂CSS也可以试着改，改了刷新就能看到效果。

Q：能改文本内容吗？
A：打开html文件搜索关键词修改后保存就行。

Q：标签页能自己创建吗？
A：目前标签页是内置的（首页、下载管理、我的应用），通过点击按钮或下载触发自动创建。如果你需要自定义标签页可以二次开发。

---

技术信息

给感兴趣的朋友补充一下技术细节：

• 纯HTML + 内联CSS + 内联JS，无任何外部依赖（除了Remix Icon字体）
• 图标库：Remix Icon（https://remixicon.com/），4.2.0版本，CDN引入
• 主题切换基于CSS Variables + View Transitions API
• 动画全部使用requestAnimationFrame手写（飞行用贝塞尔曲线插值，回弹用弹簧函数elasticOut），没用CSS animation是为了更精细的控制
• 搜索历史用LocalStorage持久化
  

---

下载

游客，如果您要查看本帖隐藏内容请回复

如果觉得这套UI有帮到你，帮忙点个评分支持一下。有任何问题、建议或者BUG反馈都欢迎回帖，看到就回~

迷和离

学习学习

7325701

66666666666666666666666666666666666666

qf123

123123213123123123

walsert

哥哥vrf大Gv

一尘不染

持开源~！感谢分享

陈治勤

6666666666666666

hegh

        支持开源~！感谢分享

鬼炙

厉害

hxq7311