不写一行从零开始的手工代码，靠 AI 搭架构、调 Bug、出素材——一个完全离线、收录 7188 家博物馆的鸿蒙 App，从想法到可安装包的全过程。

API 26 / HarmonyOS NEXT 仅 1 个权限 Three.js 3D 足迹地图 AI 生成上架素材

一个人，一台 Mac，一个会写代码也会踩坑的 AI 搭档。这篇文章不聊虚的，只讲三件事：这个 App 是干嘛的、我和 AI 是怎么把它开发出来的、上架要用的图标/预览图/文案，怎么用 AI 一次生成。最后告诉你怎么下载用上它。

一、先说产品：博物志能做什么

「博物志」是一个纯离线的全国博物馆查询应用。数据来自国家文物局备案系统，一共 7188 家博物馆，覆盖 32 个省级区划。它解决的是最朴素的痛点：想带孩子去个博物馆，营业时间、要不要预约、免不免费、离我多远——这些信息散在各家官网、藏得很深、还夹着广告。

功能	说明	关键数据
全量离线浏览	不联网也能查，所有数据打包进 App	7188 家 · 索引约 2MB 常驻内存
多维筛选	按地区 / 题材 / 等级组合筛选	6 大题材 · 一/二/三级馆
馆详情	地址、开放时间、是否免费、等级、简介	免费馆 6557 家（91.2%）
收藏 & 打卡	本地收藏想去的馆，"我去过"标记足迹	Preferences 持久化，关 App 不丢
3D 足迹地图	Three.js 画中国版图，去过的地方立起金色光柱	真实省界 339 环线 · 含台湾省与南海
导航前往	点一下调起已装地图 App 直接进导航	高德 / 百度，没装提示安装
官网一键复制	点官网地址直接复制，不打开网页	规避应用内打开网页的审核风险

为什么强调"离线 + 仅 1 个 INTERNET 权限"？因为博物馆信息本来就该随手能查，不该逼你联网、也不该向你要定位。最小权限，既是体验，也是上架合规的加分项。

二、设计：把"博物馆的厚重"做成"随手可用"

博物志的视觉语言定调为朱砂红 + 鎏金 + 纸白——朱砂红（#9A3B2F）取自传统印泥与宫墙，金（#B98A3C）是文物光泽，纸白（#F4F1EB）做背景，整体是"受光的纸面"质感，不走暗黑玻璃风，避免和博物馆的厚重感割裂。

圆润 · 质感手法

全工程圆角统一管理（列表卡 18、详情/Banner 22、缩略图 16、小标签 8），从设计 token 取值，不再散着写死数字。卡片从"纯白平涂"升级为三层质感：

• 纸白微渐变：顶白 → 底微暖，135° 线性渐变，像被光照过的纸；
• 1px 暖细描边：用暖灰描边勾出边界，比纯阴影更干净；
• 柔阴影 + 按压反馈：卡片按下轻微缩放（0.985），可点感更强。

强调块（"我去过""加入收藏"按钮、分段选中态）用朱砂/金渐变 + 投影；底部 Tab 栏从"文字+下划线"改成悬浮胶囊，选中是朱砂渐变白字。所有质感集中在 AppTheme.ets 的 token 里——改一处，全局生效。

3D 足迹地图设计

用 Three.js 把中国版图铺成底面，每家去过的博物馆立起一根金色光柱（未去过的灰色矮点，放大才浮现）。相机用透视 + 倾斜视角，光柱有高度和纵深，是真正的 3D 而非俯视小圆点。性能上，几千家馆全部塞进 1 个 InstancedMesh（1 次绘制），点开即出，不再卡在"加载中"。

三、用 AI 怎么开发出来的（重点）

整个工程不是我手写一行行堆出来的，而是和 AI 反复"提需求 → 写代码 → 跑编译 → 报 Bug → 修"循环出来的。下面是最关键的几步。

3.1 数据流水线：先有真数据，才有真应用

第一步不是写界面，是把 7188 家博物馆的原始数据抓下来、清洗、离线打包。AI 帮我写了爬虫与清洗脚本：

1

全量抓取：从官方备案系统拉全量馆数据，产出 museums.json / .csv / stats.json，原始页缓存到 data/raw/。

2

取真实照片：用 Wikidata 接口补馆藏照片，下载到 rawfile/，按 photo_<md5(馆名)[:12]>.jpg 命名。

3

导出离线包：打包进 entry/.../rawfile/，App 纯离线读取，不申请任何网络权限。大数据列表一律 LazyForEach + cachedCount，不一次性全量渲染。

3.2 ArkTS 架构：能跑只是开始，能维护才重要

AI 按鸿蒙规范搭了清晰分层：model（数据结构）/ service（收藏、打卡、导航）/ view（首页、发现、我的等页面）/ pages（详情、搜索、足迹地图）。几个 AI 帮我踩过的 API 26 硬坑：

坑	现象	修法
@StorageLink 不刷新	收藏点了没反应	只声明没读取就不建立依赖；封装 favState() 读取版本号，收藏切换用自增 bumpVersion()
对象字面量类型被拒	ArkTS 严格模式编译报错	返回对象字面量的函数先声明 interface（如 NavResult）
Three.js 模块格式	浏览器里 THREE 未定义	必须用浏览器 IIFE 版（three.min.js），不能用 CommonJS 的 three.cjs

3.3 3D 足迹地图：从"加载半天"到"秒进真 3D"

这块迭代最久。最初给每家馆都建独立 3D 网格——5903 家 ×（光柱+顶帽）= 11806 个物体，手机启动卡 2~4 秒，而且正俯视相机让光柱看着就是小圆点，毫无 3D 感。AI 重写了渲染核心：

• 性能：未去过的馆合并进 1 个 InstancedMesh，339 条省界合成 1 个 LineSegments，启动物体数从 1.2 万降到个位数；
• 真 3D：透视相机 + 倾斜视角，光柱立起来有高度纵深；
• 合规版图：用阿里 DataV 行政区划（含台湾省、南海诸岛十段线）生成真实边界，脚本做"缺台湾省/缺南海就拒绝生成"的硬校验，并在地图左下角标注数据来源。

3.4 两个上线前必改的"审核雷"

雷 1 · 官网打开网页：原先"在应用内打开官网"用 WebView 跳网页——这是上架审核易卡的点。改成整行点击直接复制网址，并删掉整套 WebView 链路。

雷 2 · 导航调不起地图：旧代码 Want 里带了 entity.system.browsable（浏览器实体），反而把地图 App 排除了。改成用高德/百度私有 scheme + bundleManager.canOpenLink 探测安装，装了直接进导航，没装提示安装；并在 module.json5 配 querySchemes。

四、上架文案和图片，也是 AI 生成的

应用市场要图标、≥3 张预览图、应用名、标题、简介。这些我让 AI 一次性产出，且所有数字都从真实数据算出来，不编。

应用图标

手写 SVG（非 AI 生图）：朱砂红圆角底 + 金色"殿堂"主形，主形控制在圆形遮罩安全区内。用 Puppeteer 按 1024 / 216 两档渲染成 PNG，分别用于商店上传与工程内分层图标。原图标已备份，新图标已写入工程 AppScope 与 entry 的 media 目录。

上架预览图（4 张 1920×1080）

用 HTML 写设计稿（真实配色 + 真实数据），Puppeteer 截图：① 首页（今日一馆）② 按地区/题材/等级筛选 ③ 馆详情与打卡收藏 ④ 3D 足迹地图。第 4 张的中国地图直接用工程里 china_boundary.json 的 339 条真实省界 + 7 根真实坐标光柱渲染，和 App 内同源。

预览图 4：3D 足迹地图（深色版，真实中国版图 + 光柱）

文案（逐字可核）

• 应用名称：博物志（3 字，远低于 15 字上限）
• 17 字推广标题：「把全国7188家博物馆装进你的口袋」（已逐字数验证 = 17 字）
• 一句话简介（≤80 字）：离线收录全国 7188 家备案博物馆，按地区/题材/等级筛选，收藏打卡，3D 足迹地图点亮你逛过的中国。
• 数据口径：7188 家 · 免费 91.2% · 一级 327 / 二级 670 / 三级 663 · 覆盖 32 省级区划 · 5903 家可上图。

五、下载与使用

博物志目前已完成开发并通过编译，正在上架准备阶段（补齐备案/软著/隐私政策即可提交华为应用市场）。

1

应用市场下载：上线后，在华为应用市场搜索 「博物志」 即可安装，手机/平板/2in1 都支持。

2

抢先体验：已生成签名 HAP 安装包，可在鸿蒙设备通过 DevEco 或侧载方式先行安装体验（适合想提前试用的朋友）。

3

怎么用：打开 App → 首页「今日一馆」随手看 → 用顶部筛选按省份 / 题材 / 等级缩小范围 → 进详情看开放时间与是否免费 → 点「加入收藏」「我去过」记录足迹 → 去「我的」打开 3D 足迹地图，看金色光柱在版图上亮起来 → 想出发时点「导航前往」，直接调起地图 App 进导航。

三个使用小贴士

• 全部离线可用，地铁里、馆门口没信号也能查；
• 点「官方网站」那一行会直接复制网址到剪贴板，需自行粘贴到浏览器打开；
• 足迹地图默认只显示去过的金色光柱，放大后会浮现更多馆的灰色标记。