鸿蒙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

【前端地图】地图基本操作控制——平移、缩放、旋转、手势控制、地图样式切换、全屏模式支持

【前端地图】地图基本操作控制——平移、缩放、旋转、手势控制、地图样式切换、全屏模式支持

🎮 第3节 | 地图基本操作控制 🎯 学习目标 老曹说:“地图不能动算什么地图?今天教你让地图飞起来!” 1. 🧭 掌握地图平移、缩放、旋转三大基础操作 2. 🖱️ 理解手势控制与事件监听机制 3. 🎨 实现地图样式动态切换(白天/黑夜/卫星图) 4. 🖥️ 支持全屏模式与自适应布局 🧠 引言:让用户掌控地图! 地图不只是看的,更是用来“玩”的!优秀的用户体验离不开流畅的操作反馈。本节课带你解锁地图操控的所有姿势,让你的地图像游戏一样丝滑。 老曹吐槽时间: “有些产品地图做得跟 PPT 似的,点都点不动……用户:你礼貌吗?” 🧭 一、三大基础操作详解 1.1 平移(Pan)📍 平移是最常见的操作,通过改变地图中心点实现视角移动。 ✅ 高德地图实现 // 方法一:直接设置中心点 map.setCenter([116.404,

前端人拿不到offer,九成是不知道这个新风向

今年大部分互联网公司面试的题目已经开始小部分八股文,大部分场景题了,公司需要的不仅是知识扎实,而且招进来就能上手项目的面试者… 2026最新高频场景题 * 1. 请求失败会弹出一个toast,如何保证批量请求失败,只弹出一个toast * 2. 如何减少项目里面if-else * 3. babel-runtime 作用是啥 * 4. 如何实现预览PDF文件 * 5. 如何在划词选择的文本上添加右键菜单(划词:鼠标滑动选择一组字符,对组字符进行操作) * 6. 富文本里面,是如何做到划词的(鼠标滑动选择一组字符,对组字符进行操作)? * 7. 如何做好前端监控方案 * 8. 如何标准化处理线上用户反馈的问题 * 9. px如何转为rem * 10. 浏览器有同源策略,但是为何 cdn 请求资源的时候不会有 跨域限制 * 11. cookie可以实现不同域共享吗 * 12. axios是否可以取消请求 * 13. 前端如何实现折叠面板效果? * 14. dom里面,如何判定a元素是否是b元素的子元 * 15. 判断一个对象是否为空,包含了其原型链上是否有自

CVE-2026-21962漏洞利用工具:Oracle WebLogic代理插件未授权RCE检测与利用

CVE-2026-21962 - Oracle WebLogic Server Proxy Plug-In RCE 项目描述 该项目提供了一个针对Oracle WebLogic Server代理插件(Proxy Plug-In)中一个关键安全漏洞(CVE-2026-21962)的漏洞利用概念验证(PoC)脚本。该漏洞允许未经验证的远程攻击者通过HTTP协议在受影响的服务器上执行任意操作系统命令,风险等级极高(CVSS 10.0)。 影响组件: * Oracle HTTP Server(版本12.2.1.4.0、14.1.1.0.0、14.1.2.0.0) * Oracle WebLogic Server代理插件(用于Apache HTTP Server和Microsoft IIS)

前端实现交互式3D人体肌肉解剖图:基于 Three.js + React Three Fiber 的完整方案

本文将详细介绍如何在前端实现一个交互式的3D人体肌肉解剖展示工具,用户可以旋转、缩放模型,点击任意肌肉查看中英文名称。 为什么要做这个? 传统的肌肉解剖学习通常依赖静态图片或昂贵的3D软件。作为健身爱好者,我希望能有一个免费、易用的在线工具来学习肌肉解剖知识。于是我决定自己动手,基于开源的 Z-Anatomy 项目,在浏览器中实现一个交互式的3D肌肉解剖图。 如果你想先体验效果,可以试试这个在线的3D肌肉功能解剖工具。 技术架构概览 ┌─────────────────────────────────────────────────────────────┐ │ 用户浏览器 │ ├─────────────────────────────────────────────────────────────┤ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────────┐ │ │ │ GLB 模型 │ -> │ Three.js │ -> │ React Three │ │ │ │ (Draco) │ │ 场景渲染 │ │ Fiber