鸿蒙6/鸿蒙NEXT WebView套壳APP源码

鸿蒙6/鸿蒙NEXT WebView套壳APP源码

本文使用AI生成!


一、事情的起因(真实踩坑)

我之前一直在做一个网页项目,但因为业务展示的原因,需要打包成 APP 使用。

在鸿蒙 4.2 的时候,这件事其实非常简单:

  • 找一个安卓 WebView 套壳 APP
  • 用 MT 管理器改一下 URL
  • 直接就能用了

整个流程几乎是“无脑操作”,而且这个方案稳定跑了一年多,没有任何问题


二、问题爆发:升级鸿蒙 NEXT 后直接炸了

直到今年(2026),我换了新手机(Mate80ProMax),系统直接升级到了 鸿蒙 6(HarmonyOS NEXT)

问题就来了。

虽然可以通过“卓易通”兼容运行之前的安卓壳子,但是:

文件上传直接废了

具体表现是:

  • <input type="file"> 还能点
  • 但是:
    • ❌ 不能调用相机拍照
    • ✅ 只能从本地相册选图片

原来是可以选择相机或文件上传的:

在这里插入图片描述

新版点击选图,直接跳转文件页面:

在这里插入图片描述

这对我来说是致命问题,因为我的业务是需要现场拍照上传的。


三、为什么会这样?(踩坑分析)

我后面查了一圈 + 问 AI,大概原因是:

👉 鸿蒙 NEXT 出于隐私安全考虑:

  • 不再允许 WebView 直接调用系统相机
  • H5 的文件选择需要宿主应用手动拦截
  • 再由原生代码去:
    • 调起相机 / 相册
    • 拿到结果
    • 回传给网页

简单说就是:

👉 以前安卓是“自动帮你做”,现在鸿蒙是“你自己写一套流程”

四、我尝试过的几个方案(全踩坑)

方案1:找现成鸿蒙 WebView 套壳

结论:

❌ 没找到能用的

要么:

  • 不支持文件上传回调
  • 要么压根不是鸿蒙 NEXT 原生

方案2:反编译原来的安卓壳子改

思路是:

  • 找 WebView 相关代码
  • 修改文件选择逻辑

问题:

❌ 太麻烦,而且不一定能编译成功

方案3:前端绕过(JS 调相机)

比如:

  • 用 H5 API 直接调用摄像头

问题:

❌ 如果壳子没权限,一样没用

五、为什么必须解决?

有朋友可能会说:

那你用旧手机不就行了?

问题是:

  • 我现在要频繁改网页功能
  • 必须实时验证在 APP 里的效果
  • 总不能天天带两台手机开发吧…

👉 这完全不现实


六、最终决定:自己写一个鸿蒙原生壳

被逼无奈,我直接上手:

✅ 用 ArkTS 写了一个 HarmonyOS NEXT 原生 WebView 套壳应用

于是这个项目就诞生了👇


七、这个项目能做什么?

简单说一句话:

👉 改一个 URL,就能把网页打包成鸿蒙 APP

目前已经做了这些功能:

  • ✅ WebView 全屏加载网页
  • ✅ 支持 JS / DOM Storage / 图片访问
  • ✅ 文件上传支持(相机 + 相册)
  • ✅ 返回键拦截(网页返回 + 双击退出)
  • ✅ 启动页(Splash)
  • ✅ 权限自动申请(相机 / 相册)
  • ✅ 沉浸式体验(隐藏导航条)

八、最关键:文件上传问题已解决 ✅

重点来了:

👉 现在可以正常:

  • 📸 直接拍照上传
  • 🖼️ 相册选择上传

也就是把鸿蒙 NEXT 缺失的那一段:

“WebView → 原生 → 相机 → 回传”

👉 全部补齐了


九、项目地址

👉 GitHub:项目地址

https://github.com/ZhaoYuLiOfficial/HarmonyOS6-WebView-Shell 

👉 Gitee:项目地址

https://gitee.com/ZhaoYuLiOfficial/HarmonyOS6-WebView-Shell 

(如果对你有帮助,欢迎点个 Star ⭐)


十、总结

这次踩坑最大的感受就是:

👉 鸿蒙 NEXT 对安全收得很紧,但开发成本确实上来了

以前安卓一句话能搞定的事情:

现在需要自己补一整套逻辑。

不过好处是:

  • 权限更清晰
  • 行为更可控

🤝 交流 & 反馈

如果你也在做类似的项目,或者遇到类似问题:

  • 欢迎留言交流
  • 也可以提 Issue 一起讨论

本文使用AI生成,大神们轻点喷,大学生第一个开源项目呜呜

Read more

前端小白速成:用CSS搞定文字流光渐变,炫酷又不掉帧!

前端小白速成:用CSS搞定文字流光渐变,炫酷又不掉帧!

前端小白速成:用CSS搞定文字流光渐变,炫酷又不掉帧! * 前端小白速成:用CSS搞定文字流光渐变,炫酷又不掉帧! * 先聊聊CSS文字渐变是啥玩意儿 * 从静态渐变到动态流光:一步步拆解 * 浏览器兼容性翻车现场实录 * 实际项目里怎么用才不翻车 * 遇到"字没了""颜色不动"咋整? * 几个骚操作提升逼格 * 别光抄代码,理解原理才能乱造 * 下次老板要"科技感大屏",你就甩这招 前端小白速成:用CSS搞定文字流光渐变,炫酷又不掉帧! 说实话啊,每次看到那种纯色大黑字标题,我就忍不住想问:兄弟,你这是在写网页还是在写Word文档?都2026年了,隔壁老王的宠物狗直播间的标题都会发光了,你的官网还在用 #333333 这种老干部配色,合适吗? 不过也别急着自卑。今天这篇文章就是专门来拯救你的。我不跟你扯什么设计理论色彩心理学,直接上硬货——纯CSS实现文字流光渐变效果。不用JavaScript,不用Canvas,甚至连个图片资源都不需要,就几行CSS,

安利一款超实用的前端可视化打印设计器:Vue Print Designer

安利一款超实用的前端可视化打印设计器:Vue Print Designer

做前端开发的朋友应该都懂,业务开发中遇到打印需求真的头大 —— 手写分页逻辑繁琐、不同框架适配麻烦、票据 / 快递单这类定制化打印场景不好实现,找个趁手的打印插件更是难上加难。最近发现了一款开源的可视化打印设计器Vue Print Designer,完美解决了这些痛点,不管是快速开发还是企业级定制化需求都能满足,今天就跟大家详细聊聊这款工具。 一、Vue Print Designer 是什么? Vue Print Designer 是一款面向业务表单、标签、票据、快递单等打印场景的可视化设计器,核心主打模板化、变量化设计,还提供了静默打印、云打印能力,同时支持 PDF / 图片 / Blob 等多种导出方式,完全能覆盖日常开发中的各类打印需求。 它不是简单的打印插件,而是一套完整的打印解决方案,从可视化设计模板,到参数配置、多端打印,再到定制化扩展,一站式搞定,而且项目还在持续更新,最新版本已经支持英寸、厘米作为单位,对国际化和精细化设计更友好了。 项目地址:https://gitee.com/

ClawdBot高清演示:Web UI中模型加载、对话历史、Token统计界面截图

ClawdBot高清演示:Web UI中模型加载、对话历史、Token统计界面截图 1. ClawdBot 是什么?一个真正属于你的本地AI助手 ClawdBot 不是一个云端调用的网页工具,也不是需要注册账号的SaaS服务。它是一个能完整运行在你自己的笔记本、台式机甚至树莓派上的个人AI助手——所有推理、记忆、上下文管理都在本地完成,你的对话不会上传到任何第三方服务器。 它的核心能力由 vLLM 提供支撑。vLLM 是当前最高效的开源大模型推理引擎之一,以极低的显存占用和极高的吞吐量著称。ClawdBot 把 vLLM 封装成轻量级网关服务,再通过 Web UI 暴露直观的操作界面。这意味着:你不需要写一行 Python 代码,也不用配置 CUDA 环境变量,就能直接和 Qwen3-4B-Instruct 这类高质量中文模型对话,还能实时看到它“想了多久”、“用了多少字”、“上下文有多长”。 这不是概念演示,而是开箱即用的生产力工具。它不追求参数规模的堆砌,而是专注把“

使用Docker安装Ollama及Open-WebUI完整教程

作者:吴业亮 博客:wuyeliang.blog.ZEEKLOG.net 一、Ollama 简介及工作原理 1. Ollama 简介及原理 * 简介:Ollama 是一款轻量级、开源的大语言模型(LLM)运行工具,旨在简化本地部署和运行大语言模型的流程。它支持 Llama 3、Mistral、Gemini 等主流开源模型,用户无需复杂配置即可在本地设备(CPU 或 GPU)上快速启动模型,适用于开发测试、本地智能应用搭建等场景。 * 工作原理: * 采用模型封装机制,将大语言模型的运行环境、依赖库及推理逻辑打包为标准化格式,实现模型的一键下载、启动和版本管理。 * 通过优化的推理引擎适配硬件架构,支持 CPU 基础运行和 GPU 加速(如 NVIDIA CUDA),减少资源占用并提升响应速度。 * 提供简洁的