被拒 10 次后，我的首款开源鸿蒙应用终上架，真的坎坷~

文章介绍了选择uni-app+Vue3+TS技术栈的原因，以及uViewPro组件库的丰富功能和核心优势，包括80+组件、多主题支持、游戏化学习机制等。该应用为开发者提供了鸿蒙跨平台开发的实践参考。

小铭、同学

44人浏览 · 2026-02-02 23:19:08

小铭、同学 · 2026-02-02 23:19:08 发布

经过近几个月的开发与打磨，我的首款鸿蒙应用👉 uViewPro（跨平台UI组件库）👈 点击体验正式上线华为鸿蒙应用市场！这是一款基于 uni-app + uView Pro 开发的应用，主要面向开发者实践的应用，它不仅展示了 uView Pro 开源组件库的强大能力，更是一次跨平台开发的完美落地实践。

但是上线的过程可谓是坎坷不断...

一. 说一下心酸苦楚

我感觉鸿蒙应用上架可比其他平台上线严格多了，我反复修改提交了近10次才最终上架成功。

第一次提交申请后被拒的原因是：

功能交互简单，影响用户的总体体验。
横竖屏布局未适配问题，不符合鸿蒙应用UX设计规范。
未正常适配设备深色模式，不符合鸿蒙应用UX设计规范。

第2,3个问题都好解决，因为问题明确，解决方案明了：

第2个问题需要适配横竖屏切换的布局适配，布局不要错乱即可。
第3个问题需要将应用的所有页面适配暗色模式。

但官方也明确说了，这两个问题不是重点，不解决也可以通过审核。

最重要的卡着不让上线的是第1个原因，由于应用交互简单所以不能上线。我真是....，这太主观了，审核人员说你交互简单，那你就过不了！

果真，经过优化后再次提交，后面所有被拒绝的原因都为第一个，其他的问题都已解决，不管应用内容如何丰富，都被拒绝！（这根本就是不想给过啊...）

提交多次被审核驳回后，快到了放弃的边缘，再次经群友提点，提交申诉和工单可能会通过，让我又看到了曙光。

很快，几天后一盆冷水又浇来了，唉，工单也给驳回了。

难道这一次真到了要放弃的时候了？那不可能，已经付出了那么多，不能轻易放弃。我甚至怀疑 UI 组件演示库就根本不让上，但是我通过在鸿蒙应用商店搜索，别人做的那么简单的都能上架，我的应用说太简单了？

从 1.0.0 到 1.0.9，我增加了下述重要的功能：

加入引导系统：首次启动展示引导页，在复杂组件页面新增分步引导。
提高用户参与度：任务与体验值体系，每个组件配套任务（学习/实现类任务），完成后奖励经验值与成就。
互动反馈功能：加入点赞/收藏/评分功能，记录用户偏好并提供“常用组件”列表。
增强交互动效：为演示页加入真实交互，“在线模拟” 操作，体验动效。
支持API文档查询：各组件的演示+API手册，做一个APP全能大师

所以我不认可审核人员说的“交互简单”，我梳理一下思路，开始复盘，开始反思。最终，我整理提交了一大堆材料+万字说明文档，包括如下：

我把这一次当成绝地反击的最后一次，终于，之前的努力没有被化作泡影，通过了审核！

为什么会这么艰难？不止我感觉难，鸿蒙开发群里的小伙伴同样是这样，可能是与报名了鸿蒙应用激励计划有关！

下面来说说，我为什么一定要在鸿蒙系统上线这款应用？

二. 为什么要开发这款鸿蒙应用？

众所周知，我是👉 uView Pro 开源组件库的作者，自从2025年8月份开源以来，目前已经有不少开发者使用，期间有许多小伙伴像我询问，支不支持鸿蒙？但由于我从未在鸿蒙系统上开发过应用，也没上架过鸿蒙应用，也不知道它的兼容性如何。

所以，我打算通过将这款应用真正上架到鸿蒙应用商店，来既验证uView Pro 在鸿蒙系统上的可行性，也为其他开发者提供了可参考的落地案例。

跨平台开发常见痛点：文档不直观、示例难落地、多端适配易踩坑。基于 uView Pro 组件库，因此我必须要做一个真实应用来解决这些问题，让开发者可以：

直观体验真实场景下的组件表现
快速上手通过交互 Demo 和任务系统掌握用法
验证可行性在鸿蒙平台验证跨平台方案
提升效率借助模板与工具加速开发

而我选择在鸿蒙上验证 uView Pro 组件库的可行性，主要是为了：

补齐版图：其他主流平台已兼容，鸿蒙是必选的一环
验证能力：确认 uni-app + Vue3 + uView Pro 在鸿蒙的兼容性、性能与体验
市场红利：华为对在2025年要求时间段上架的应用，会给开发者发放激励金
技术成长：学习鸿蒙特性、解决新问题、沉淀跨平台经验

最终不负众望，这次实践既验证了方案的可行性，也为其他开发者提供了可参考的落地案例。

三. 技术栈：为什么选择这些技术？

开发框架：uni-app（多端开发，提高生产力）
开发语言：Vue3 + TS（鸿蒙打包只支持Vue3）
UI组件库：uView Pro（我自己的开源组件库）

最主要的是我想验证 uView Pro 开发鸿蒙应用的可行性。

1. uni-app：一次开发，多端运行

uni-app 作为老牌的多端开发的跨平台开发框架，它的核心优势在于：真正的跨平台能力。

uni-app 开发的应用，支持编译到多个平台：

移动端：Android、iOS、HarmonyOS
小程序：微信、支付宝、百度、头条、QQ
Web：H5，PC
快应用：华为、小米等

这意味着，使用 uni-app 可以同时覆盖多个平台，会大大降低开发和维护成本。使用它可以充分利用它的跨平台能力，确保应用在各个平台上都能正常运行，特别是在鸿蒙平台上的表现，也完全达到了预期。

2. Vue 3 + TS：现代化的开发体验

Vue 3 作为当前最流行的前端框架之一，带来了：

Composition API：更灵活的代码组织方式，逻辑复用更简单
性能提升：相比 Vue 2，性能提升 2-3 倍
TypeScript 支持：完整的类型系统，只能提示校验，减少运行时错误
生态丰富：庞大的社区和丰富的插件生态

使用它可以充分利用 Vue 3 的 Composition API，将复杂的组件逻辑拆分成可复用的组合函数，代码更加清晰和易维护。不过，鸿蒙开发也只能用 Vue3，因为 uni-app 并不支持将 Vue2 的代码打包成鸿蒙应用。

// 示例：使用 Composition API 管理主题状态
<script setup lang="ts">
import type { DarkMode } from 'uview-pro/types/global'
import { useTheme } from 'uview-pro'
import { ref } from 'vue'

const { darkMode, currentTheme, setDarkMode, setTheme, getAvailableThemes } = useTheme()

const darkModes = ref<{ value: DarkMode, label: string }[]>(
  [
    { value: 'auto', label: '自动' },
    { value: 'light', label: '亮色' },
    { value: 'dark', label: '深色' },
  ],
)
function handleThemeSelect(theme: string) {
  // 切换到选定的主题
  setTheme(theme)
}

function handleDarkModeSelect(mode: DarkMode) {
  setDarkMode(mode)
}
</script>

TypeScript 的加入，会让整个项目更加健壮：

编译时类型检查，提前发现潜在问题
更好的 IDE 智能提示，提升开发效率
代码可读性更强，团队协作更顺畅
重构更安全，减少引入 Bug 的风险

3. uView Pro：强大的 UI 组件库

uView Pro 是我长期维护的开源 UI 组件库，它提供了：

(1). 丰富的组件生态

uView Pro 已包含 80+ 组件，覆盖了日常开发所需：

基础组件：Button、Input、Icon、Image 等
表单组件：Form、Checkbox、Radio、Picker 等
布局组件：Layout、Grid、Flex、Card 等
导航组件：Navbar、Tabbar、Tabs、Steps 等
数据展示：Table、List、Swiper、Waterfall 等
反馈组件：Toast、Modal、Loading、ActionSheet 等
其他组件：MessageInput、LazyLoad、Loadmore、Link 等

uView Pro 基于官方 uView UI 1.8.8 版本，完全使用 Vue3 + TypeScript 源码级重写，每个组件都经过精心重构优化，既保证了功能的完整性，又兼顾了易用性。

(2). 完善的文档和示例

uView Pro 的文档非常详细，同样进行了重构级优化，免费无广告：

API 文档：每个组件的属性、事件、方法都有详细说明
示例代码：提供多种使用场景的示例
最佳实践：分享组件使用的最佳实践
常见问题：整理常见问题和解决方案

(3). 主题定制能力

uView Pro 支持完整的主题定制：

内置主题：提供多种预设主题
自定义主题：支持自定义颜色、字体等
暗黑模式：完整的暗黑模式支持
动态切换：支持运行时切换主题

可以充分利用 uView Pro 的主题系统，实现多主题切换和暗黑模式，用户体验非常流畅。不仅如此，你可以3分钟智能生成多种主题，主要是靠：

智能推断主题色工具：通过设置某个主题色，可以阶梯生成其他色值。

随机生成主题色工具：随机生成主题色阶梯色值。

生成后可在 main.ts 这样使用：

import uViewPro from '@/uni_modules/uview-pro';

// 主题列表，仅作演示，应单独提取出来统一维护
const themes = [
    // 主题: 绿色
    {
        name: 'green',
        label: '清翠绿',
        color: {
            // 明亮模式下的主题色
            primary: '#059669',
            error: '#dc2626',
            warning: '#eab308',
            success: '#16a34a',
            info: '#78716c',
            primaryLight: '#ecfdf5',
            errorLight: '#fee2e2',
            warningLight: '#fefce8',
            successLight: '#dcfce7',
            infoLight: '#fafaf9',
            primaryDark: '#047857',
            errorDark: '#b91c1c',
            warningDark: '#ca8a04',
            successDark: '#15803d',
            infoDark: '#57534e',
            primaryDisabled: '#6ee7b7',
            errorDisabled: '#fca5a5',
            warningDisabled: '#facc15',
            successDisabled: '#86efac',
            infoDisabled: '#e7e5e4'
        },
        darkColor: {
            // 暗黑模式下的主题色
            // 如未配置，系统会自动根据亮色生成暗黑色值
        }
    }
];

export function createApp() {
    const app = createSSRApp(App);
    // 引入uView Pro 主库
    app.use(uViewPro, {
        theme: {
            themes: themes,
            defaultTheme: 'green',
            defaultDarkMode: 'light'
        },
    });
    return {
        app
    };
}

(4). 多语言能力

uView Pro 所有内置组件均支持多语言，支持全局与组件级配置、响应式切换与持久化语言偏好。

核心特性如下：

内置语言: 默认包含 zh-CN 与 en-US。
配置灵活: 支持在应用入口全局配置或组件内覆盖局部语言包。
响应式切换: 切换语言时组件文案自动更新。
持久化: 用户选择会被保存以便下次恢复。
扩展友好: 可按需添加或覆盖语言包，支持按需加载。

在 main.ts 这样使用：

import uViewPro from 'uview-pro';

export function createApp() {
    const app = createSSRApp(App);
    // 引入uView Pro 主库，
    app.use(uViewPro, {
        locale: {
            // 部分覆盖内置语言包
            locales: [
                { name: 'zh-CN', uModal: { confirmText: '好的', cancelText: '算了' } },
                { name: 'en-US', uModal: { confirmText: 'OK', cancelText: 'Cancel' } }
            ],
            defaultLocale: 'zh-CN'
        }
    });
    return {
        app
    };
}