缘起：为什么选择鸿蒙

作为一名前端开发者，我一直在关注各种新兴的技术生态。当华为宣布鸿蒙系统将独立发展时，我就意识到这可能是下一个重要的技术风口。但真正促使我动手的，还是实际的需求痛点。

我们团队有一个成熟的 uni-app 项目，已经在 iOS 和 Android 上稳定运行了两年。但随着华为设备市场份额的不断扩大，越来越多的用户反馈希望有鸿蒙版本。看着应用商店里竞品陆续上线鸿蒙版本，我决定亲自趟一趟这趟"浑水"。

从今年 3 月开始，我花了近三个月时间，完成了从技术调研到实际上架的完整过程。今天就来分享这段充满挑战又收获满满的经历。

技术选型：为什么坚持 uni-app

在开始之前，团队内部有过激烈的讨论：是重新开发原生鸿蒙应用，还是基于现有 uni-app 项目进行适配？

重新开发原生鸿蒙的优势：

• 性能最优，体验最佳
• 可以充分利用鸿蒙的特有能力
• 技术栈更纯粹

但最终我们还是选择了 uni-app 适配，原因很现实：

1. 开发成本：团队熟悉 Vue 技术栈，重新学习 ArkTS 成本太高
2. 维护成本：三套代码意味着三倍的维护工作量
3. 迭代速度：业务需求变化快，需要快速响应
4. DCloud 的承诺：官方明确表示会持续加强鸿蒙支持

事后证明，这个选择是正确的，但过程远比想象中曲折。

环境搭建：第一个坑就栽了跟头

按照官方文档，我信心满满地开始环境搭建。HBuilderX、DevEco Studio、Node.js，一切看起来都很简单。

第一个坑：模拟器选择

文档说"下载 API 19 模拟器即可"，但我下载后始终无法启动。各种错误提示看得我头皮发麻：

模拟器启动失败：硬件加速未开启  
VT-x 不可用，请检查 BIOS 设置

我花了整整两天时间：

• 重启电脑进入 BIOS 开启虚拟化
• 在 Windows 功能中启用 Hyper-V
• 更新显卡驱动
• 重装 DevEco Studio

最后发现是杀毒软件冲突。关闭某数字卫士后，模拟器终于正常启动了。

经验教训：环境问题不要死磕，及时换思路。后来我直接使用真机调试，效率反而更高。

项目迁移：看似顺利的开始

将现有 uni-app 项目迁移到鸿蒙，最初进展出乎意料的顺利。

基础页面适配

大部分 Vue 页面无需修改即可运行，uni-app 的跨端能力确实令人印象深刻：

<template>  
  <view class="container">  
    <text class="title">{{ title }}</text>  
    <button @click="handleClick">点击我</button>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      title: 'Hello HarmonyOS'  
    }  
  },  
  methods: {  
    handleClick() {  
      uni.showToast({  
        title: '点击成功'  
      })  
    }  
  }  
}  
</script>  

<style>  
.container {  
  padding: 20px;  
}  
.title {  
  font-size: 18px;  
  color: #333;  
}  
</style>

路由配置

pages.json的配置也完全兼容：

{  
  "pages": [  
    {  
      "path": "pages/index/index",  
      "style": {  
        "navigationBarTitleText": "首页"  
      }  
    },  
    {  
      "path": "pages/detail/detail",   
      "style": {  
        "navigationBarTitleText": "详情页"  
      }  
    }  
  ]  
}

静态资源

static目录下的图片、字体等资源都能正常加载。前 80% 的工作在两天内就完成了，我甚至觉得鸿蒙开发不过如此。

但接下来的 20%，花了我 80% 的时间。

深水区：平台特定适配

导航栏差异

第一个平台差异出现在导航栏。在 iOS 和 Android 上正常的导航栏，在鸿蒙上出现了错位。

问题现象：

• 标题位置偏移
• 返回按钮点击区域异常
• 状态栏颜色不匹配

解决方案：

在 pages.json中为鸿蒙平台单独配置：

{  
  "pages": [  
    {  
      "path": "pages/index/index",  
      "style": {  
        "navigationBarTitleText": "首页",  
        "app-plus": {  
          "titleNView": {  
            // iOS/Android 配置  
          }  
        },  
        "harmony": {  
          "navigationBarBackgroundColor": "#FFFFFF",  
          "navigationBarTextStyle": "black",  
          "navigationBarTitleText": "首页",  
          "navigationStyle": "default"  
        }  
      }  
    }  
  ]  
}

组件兼容性问题

更大的挑战来自组件兼容性。我们项目中使用了大量第三方组件，有些在鸿蒙上表现异常。

案例：图片裁剪组件

在 iOS/Android 上正常的图片裁剪组件，在鸿蒙上出现以下问题：

• 触摸事件响应错乱
• 裁剪框位置计算错误
• 性能卡顿明显

排查过程：

1. 首先怀疑是触摸事件机制差异
2. 尝试修改事件处理逻辑，效果有限
3. 深入组件源码，发现使用了 DOM API
4. 鸿蒙不支持部分 DOM API

最终方案：

寻找替代组件，选择明确支持鸿蒙的图片裁剪库。这个过程让我意识到：不是所有 web 生态都能无缝迁移到鸿蒙。

API 兼容性

uni-app 的 API 在鸿蒙上的支持程度不一：

完全兼容的：

• uni.showToast
• uni.request
• uni.getStorage
• uni.chooseImage

需要适配的：

• uni.getSystemInfo返回的信息结构不同
• uni.onKeyboardHeightChange在鸿蒙上触发机制不同
• 部分设备 API 需要鸿蒙特定实现

不支持的：

• 某些平台特定的扩展 API

我们建立了兼容性检查清单，对每个 API 进行测试：

// 兼容性封装示例  
export const getSafeArea = () => {  
  return new Promise((resolve, reject) => {  
    uni.getSystemInfo({  
      success: (res) => {  
        // 鸿蒙平台特殊处理  
        if (res.platform === 'harmony') {  
          resolve({  
            top: res.statusBarHeight || 0,  
            bottom: 0,  
            left: 0,  
            right: 0  
          })  
        } else {  
          resolve(res.safeArea)  
        }  
      },  
      fail: reject  
    })  
  })  
}

性能优化：从卡顿到流畅

首次在真机上运行应用时，性能问题让我震惊：列表滚动卡顿、页面切换白屏、内存占用过高。

列表性能优化

问题：商品列表页有 1000+ 项目，滚动时严重卡顿。

分析：

• 鸿蒙的列表渲染机制与 web 不同
• 大量 DOM 节点导致内存压力
• 图片加载没有做优化

解决方案：

1. 虚拟列表：

<template>  
  <view class="list-container">  
    <unicloud-db   
      ref="udb"  
      collection="goods"  
      where="category_id == categoryId"  
      orderby="create_time desc"  
      :page-size="20"  
      @load="onListLoad"  
      v-slot:default="{data, loading, error}">  

      <virtual-list   
        :data="data"  
        :item-size="100"  
        key-field="_id">  
        <template v-slot:default="{item}">  
          <goods-item :item="item" />  
        </template>  
      </virtual-list>  

    </unicloud-db>  
  </view>  
</template>

1. 图片懒加载：

<image   
  :src="item.image"   
  mode="aspectFill"  
  lazy-load  
  :fade-show="false"  
  @load="onImageLoad"  
  @error="onImageError">  
</image>

1. 内存管理：

// 监听页面生命周期  
onPageScroll(e) {  
  // 可视区域外的图片取消加载  
  this.checkVisibleImages()  
},  

onHide() {  
  // 页面隐藏时释放大资源  
  this.clearCache()  
}

启动速度优化

问题：应用冷启动需要 3-5 秒，体验较差。

优化措施：

1. 代码分包：

// pages.json  
{  
  "subPackages": [  
    {  
      "root": "pagesA",  
      "pages": [  
        "page1/page1",  
        "page2/page2"  
      ]  
    },  
    {  
      "root": "pagesB",   
      "pages": [  
        "page3/page3",  
        "page4/page4"  
      ]  
    }  
  ]  
}

1. 预加载关键资源：

// app.vue  
onLaunch() {  
  // 预加载首屏必要数据  
  this.preloadEssentialData()  

  // 异步加载非关键资源  
  setTimeout(() => {  
    this.preloadSecondaryResources()  
  }, 1000)  
}

1. 减少同步操作：

// 优化前：同步阻塞  
const userInfo = uni.getStorageSync('userInfo')  
const settings = uni.getStorageSync('settings')  

// 优化后：异步并行  
Promise.all([  
  this.getStorage('userInfo'),  
  this.getStorage('settings')  
]).then(([userInfo, settings]) => {  
  // 处理数据  
})

经过优化后，启动时间缩短到 1-2 秒，列表滚动帧率稳定在 60fps。

打包发布：证书的"坑爹"之旅

如果说代码适配是技术挑战，那证书和打包就是流程挑战。

证书配置的坑

第一个坑：证书类型混淆

我一开始把调试证书当成发布证书使用，结果打包时各种错误：

错误: 证书类型不匹配  
错误: 签名验证失败

解决方案：

• 调试证书：用于开发阶段真机调试
• 发布证书：用于应用商店上架
• 两者不能混用

第二个坑：证书有效期

发布证书有一年有效期，但测试证书只有三个月。我第一次提交审核时，证书差点过期。

经验：设置证书到期提醒，提前一个月更新。

打包流程优化

手动打包效率低下，我建立了自动化流程：

// package.json 脚本  
{  
  "scripts": {  
    "build:harmony:debug": "uni build --platform harmony --mode development",  
    "build:harmony:release": "uni build --platform harmony --mode production",  
    "pack:harmony": "node scripts/pack-harmony.js",  
    "deploy:harmony": "npm run build:harmony:release && npm run pack:harmony"  
  }  
}  
// scripts/pack-harmony.js  
const { execSync } = require('child_process')  
const fs = require('fs')  
const path = require('path')  

console.log('🚀 开始鸿蒙应用打包...')  

// 检查构建产物  
const buildPath = path.join(__dirname, '../dist/build/harmony')  
if (!fs.existsSync(buildPath)) {  
  console.error('❌ 构建产物不存在，请先执行构建')  
  process.exit(1)  
}  

// 执行鸿蒙特定打包逻辑  
try {  
  execSync('node scripts/harmony-specific-pack.js', { stdio: 'inherit' })  
  console.log('✅ 鸿蒙应用打包完成')  
} catch (error) {  
  console.error('❌ 打包失败:', error)  
  process.exit(1)  
}

上架审核：意料之外的拒绝

第一次提交审核时，我信心满满，觉得经过充分测试的应用肯定能一次通过。结果被打脸了。

审核拒绝原因：

1. 隐私政策不完整缺少数据存储说明未说明第三方 SDK 数据收集
2. 权限说明不清晰相机权限用途描述过于简单位置权限必要性未充分说明
3. 应用截图不规范截图包含状态栏时间"17:30"部分截图尺寸不一致

解决方案：

隐私政策完善：

## 数据存储说明  
本应用使用本地存储保存用户偏好设置，使用华为云存储备份用户数据。所有数据均加密存储。  

## 第三方 SDK 说明  
- 华为账号 SDK：用于用户登录认证  
- 华为推送 SDK：用于消息推送  
- 微信分享 SDK：用于内容分享

权限说明重写：

## 相机权限  
用途：用于扫描商品条形码、拍摄商品照片  
必要性：核心功能需要，无法替代  
数据处理：图片仅在本地处理，不上传服务器  

## 位置权限    
用途：用于推荐附近门店、配送地址定位  
必要性：增值功能需要，非核心功能  
数据处理：位置信息加密传输到服务器

截图规范：

• 使用模拟器统一截图
• 隐藏状态栏敏感信息
• 确保所有截图尺寸一致
• 展示核心功能流程

第二次提交后，顺利通过审核。

监控与反馈：上架只是开始

应用上架后，真正的挑战才开始。用户反馈和线上监控发现了我们测试中未发现的问题。

线上问题排查

案例：特定机型闪退

有用户反馈在华为 Mate 40 上频繁闪退，但我们测试机上正常。

排查过程：

1. 查看 AGC 崩溃日志
2. 发现内存溢出错误
3. 定位到图片加载组件
4. 特定机型内存管理更严格

解决方案：

// 图片加载优化  
loadImage(url) {  
  return new Promise((resolve, reject) => {  
    const img = new Image()  

    // 限制图片尺寸  
    if (this.isLowMemoryDevice()) {  
      url = this.addImageSizeParams(url, '800x600')  
    }  

    img.onload = () => {  
      // 及时释放引用  
      img.onload = null  
      img.onerror = null  
      resolve(img)  
    }  

    img.onerror = reject  
    img.src = url  
  })  
}

用户反馈处理

建立用户反馈响应机制：

• 24 小时内响应严重问题
• 每周汇总用户反馈
• 每月发布优化版本

经验总结与建议

技术层面

1. 组件选择要谨慎优先选择官方组件验证第三方组件兼容性准备备用方案
2. 性能优化要前置开始就考虑性能问题建立性能监控体系定期进行性能回归测试

流程层面

1. 证书管理要规范区分调试和发布证书设置证书到期提醒备份证书文件
2. 审核准备要充分仔细阅读审核指南准备完整的说明材料提前测试审核流程
3. 监控体系要完善建立崩溃监控收集用户反馈定期分析使用数据

给后来者的建议

1. 不要畏惧鸿蒙开发uni-app 已经提供了很好的支持大部分代码可以复用社区资源越来越丰富
2. 从小功能开始尝试先移植简单页面逐步增加复杂度积累经验再处理核心功能
3. 善用官方资源DCloud 文档很详细华为开发者社区活跃官方技术支持响应快
4. 加入开发者社区学习他人经验分享自己的收获共同推动生态发展

未来规划

鸿蒙版本的成功上线，给了我们很大信心。下一步计划：

1. 深度集成鸿蒙特性原子化服务探索分布式能力应用鸿蒙特有 UI 交互
2. 性能持续优化启动速度优化到 1 秒内内存占用降低 30%功耗优化
3. 多端协同与 iOS/Android 版本功能同步数据互通体验优化统一的设计语言

写在最后

三个月的鸿蒙适配之旅，让我深刻体会到：技术转型虽然痛苦，但收获远超预期。

最大的收获不是技术上架，而是思维转变：从"web 思维"到"多端思维"，从"功能实现"到"体验优化"。

鸿蒙生态还在快速发展，现在入局正是好时机。uni-app 为跨端开发提供了很好的基础，让我们能够以较低成本探索新平台。

如果你也在考虑鸿蒙开发，我的建议是：不要观望，直接开始。从简单的 demo 开始，逐步深入，你会发现鸿蒙开发没有想象中那么难。

在这个过程中，你会遇到各种问题，但也会收获解决问题的成就感。更重要的是，你将成为新生态的早期参与者，这本身就是宝贵的机会。

希望这篇文章能帮助到正在或准备进行鸿蒙开发的你。如果遇到问题，欢迎交流讨论，我们一起推动鸿蒙生态的繁荣！

作为一个靠 uni-app 做跨端开发的 “老玩家”，之前已经用它上线了五款 Vue2 的 App —— 不过这次多了个新目标：适配鸿蒙 NEXT 系统。目前成功打包上架鸿蒙两款APP，中间踩了不少坑，也攒了些实打实的经验，今天就把整个过程捋一捋，希望能帮到同样在做鸿蒙适配的朋友。​

一、技术选型：为什么选 uni-app 做鸿蒙开发？​

其实最开始也纠结过要不要用鸿蒙原生开发，但手里的项目是现成的 Vue2 代码，还要兼顾微信小程序 ——uni-app 的 “一次开发多端跑” 刚好戳中需求。后来查了文档才知道，uni-app 对鸿蒙 NEXT 的支持已经比较成熟了，尤其是 UTS 插件能直接调用鸿蒙原生能力，不用从头写原生代码，省了不少事。这也是我最终敲定用 uni-app 做适配的核心原因：能复用老项目代码，还能兼顾跨端，效率比重新开发高太多。​

二、鸿蒙迁移实战

1.手里的 App 都是 Vue2 写的，但鸿蒙只支持 Vue3 的 uni-app 项目，所以第一步就得把 Vue2 迁移到 Vue3。​需要适配vue3包括项目代码和相关组件。
首先是生命周期，Vue2 里的beforeDestroy得改成beforeUnmount，destroyed改成unmounted，一开始没注意，控制台报了一堆错；然后是 v-model，Vue3 里父子组件传值得写成:modelValue="xxx"和@update:modelValue="xxx=$event"，之前的写法直接用不了；还有路由，Vue2 里是new VueRouter()，Vue3 得用createRouter和createWebHistory，这些基础语法得逐个核对。​
组件方面，之前用的 Element UI 在 Vue3 里不兼容，只能换成 Element Plus。这里要注意，Element Plus 的引入方式和 Element UI 不一样，得在 main.js 里用createApp(App).use(ElementPlus)，还得单独引入样式文件，不然组件样式会乱。我当时漏引了样式，页面加载出来全是裸奔的 HTML 元素，排查了半天才发现问题。

​2.引入harmony-configs，注意里面的client_id的取值。

3.华为登录：必须做的 “硬性要求”​
鸿蒙上架有个规定：只要 App 接入了第三方登录（比如微信、QQ 登录），就必须集成华为登录。不过好在 uni-app 已经封装了华为登录的 API，不用自己写原生代码，直接调用uni.login({provider: 'huawei'})就行。​
但这里有个细节：调用登录前得确保harmony-configs已经初始化，不然会报 “client_id 未配置” 的错。我当时是在 main.js 里先初始化harmony-configs，再调用登录接口，代码大概是这样：​

import harmonyConfigs from '@dcloudio/harmony-configs'​  
// 初始化，client_id从AGC拿​  
harmonyConfigs.init({​  
  clientId: '这里填你的client_id',​  
  scope: 'openid profile email'​  
})​  
​  
// 后续调用华为登录​  
uni.login({​  
  provider: 'huawei',​  
  success: (res) => {​  
    // 拿到code后去后端换token​  
    console.log('华为登录code：', res.code)​  
  },​  
  fail: (err) => {​  
    uni.showToast({ title: '登录失败：' + err.errMsg, icon: 'none' })​  
  }​  
})​

4.发布到鸿蒙开发平台，开发服务中要添加发布证书/调试证书 SHA256证书/公钥指纹。
迁移完代码，就得搭鸿蒙开发环境了。首先得装 DevEco Studio，我下的是 5.0 版本。然后是证书 —— 这是我踩的第二个 “坑”。​
鸿蒙开发需要调试证书和发布证书，还得配置 SHA256 指纹。步骤其实不复杂：先在 DevEco Studio 里生成.p12 格式的密钥库，再用这个密钥库生成.csr 文件，然后去华为 AGC 平台（鸿蒙开发平台）上传.csr，申请发布证书（.cer 格式）和 Profile 文件（.p7b 格式）。最后要在 AGC 的 “应用信息” 里填 SHA256 指纹 —— 这里一定要注意，调试证书和发布证书的指纹要分开填，我一开始把调试指纹当成发布指纹填了，导致后来打包发布版登录失败，折腾了好久才发现。​
另外，引入harmony-configs的时候，里面的client_id得从 AGC 平台拿 —— 在 “我的应用” 里找到对应的 App，进入 “配置” 页面，OAuth 2.0 客户端 ID 就是client_id，填错了后续华为登录会调不通。

5.鸿蒙隐私政策完善:请在相应场景补充HarmonyOS NEXT操作系统的介绍/选项/设备标识符等信息。可参考《审核指南》第1.14项：https://developer.huawei.com/consumer/cn/doc/app/50104-01

​

三、鸿蒙原生能力：uts实现实况窗接入

鸿蒙 NEXT 的实况窗是个特色功能，我做的App 是计时工具，刚好能用实况窗显示剩余时间，提升用户体验。这里就用到了 uni-app 的 UTS 插件，分享下具体怎么集成的。
​

UTS 插件结构

uni_modules/harmony-liveview/  
├── package.json          # 插件配置  
├── utssdk/  
│   ├── interface.uts    # TypeScript 接口定义  
│   └── app-harmony/  
│       └── index.uts    # 鸿蒙平台实现  
├── readme.md            # 使用文档  
├── changelog.md         # 更新日志  
└── 使用说明.md          # 本文件

核心 API

• isLiveViewEnabled() - 检查实况窗是否可用
• startLiveView() - 启动实况窗
• updateLiveView() - 更新实况窗显示
• pauseLiveView() - 暂停/继续计时
• stopLiveView() - 停止实况窗

完整流程:

1.UTS 插件创建：自己搭了个简单的插件​
我在uni_modules下建了个harmony-liveview文件夹，专门放实况窗相关的代码。结构很简单：utssdk文件夹里放接口定义（interface.uts）和鸿蒙原生实现（app-harmony/index.uts），还有个package.json配置插件信息。​
interface.uts主要定义了几个核心方法的接口，比如检查实况窗是否可用、启动、停止、更新，这样 Vue 组件里调用的时候有类型提示；​
index.uts是真正对接鸿蒙原生 LiveView API 的地方，比如startLiveView方法里，会先检查设备是否支持实况窗，再调用鸿蒙的LiveViewManager.start()启动，还加了定时更新数据的逻辑，默认 10 秒更一次。​

2.uniapp vue组件集成：和业务逻辑绑在一起​
我的计时页面是clock.vue，在里面导入了 UTS 插件的方法，然后把实况窗的启动 / 停止和计时功能绑在一起：用户点 “开始” 按钮，调用startTimer的时候，自动触发startHarmonyLiveView启动实况窗；点 “停止” 的时候，调用stopTimer，同时触发stopHarmonyLiveView停止实况窗。​这里要注意，启动实况窗前得先调用isLiveViewEnabled()检查设备是否支持，不然在不支持的设备上会报错。我还加了个提示，不支持的话就弹个 Toast 告诉用户，体验会好一些。​

3.本地调试，先申请权限也需要添加设备token，参考官方文档，添加后才能进行测试，只有调试没有问题才可以提交单独的实况窗开通审核。

4.实况窗上线：审核比想象中严格​
实况窗要上线，得先在 AGC 申请权限，还得提交设计方案 —— 包括功能场景、界面布局图、资源占用情况。我当时提交的方案里，因为没写清楚 “为什么需要实时更新”，被审核打回来了，后来补充了 “计时工具需要用户在桌面就能看到剩余时间，不用打开 App” 的说明，才通过。​
另外，本地测试的时候，要在 AGC 里添加测试设备的 Token，不然实况窗调不起来。我一开始没加，以为是代码有问题，查了半天文档才知道要配置设备 Token，这点大家要注意。​

UTS代码片段:

参考资料:

• 鸿蒙 LiveView Kit 官方文档
• uni-app UTS 插件开发文档
• https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_NEXT-Live-View-Flight
• https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/liveview-create-locally

四、上架前的 “避坑指南”：我踩过的 3 个关键问题​

1.发布版白屏：云调试救了我​
本地调试的时候一切正常，但打包发布版提审，鸿蒙审核那边反馈说白屏。我自己下载发布包安装，也遇到了同样的问题，不知道哪里出了错。后来想起 AGC 有个 “云调试” 功能，能选不同型号的鸿蒙设备测试，还能看日志。我用云调试跑了一遍，发现是 SHA256证书/公钥指纹的问题。
​
2.登录失败：指纹配置错了​
调试版登录没问题，但发布版一直报 “Fingerprint verification error”。查了 AGC 的日志，发现是发布证书的 SHA256 指纹没配置 —— 我之前只填了调试指纹，发布指纹忘了填。补填之后，还得在manifest.json里把versionCode改大一点（比如从 100 改成 101），再让测试的手机把旧版本删掉，不然缓存会导致配置不生效。​

3.鸿蒙备案：提前一周做准备​
鸿蒙上架前必须完成 鸿蒙App 备案。备案提交后，审核界面的校验不是立马生效的，我当时等了差不多 1 天半才显示备案通过。​

五、总结：几个实用的小经验

1.上线前可以用 AGC 的云调试测一遍，很多本地测不出来的问题（比如白屏、登录失败），云调试能快速帮你找到原因；​
2.Vue2 迁 Vue3 的时候，别着急删老代码，先建个分支慢慢改，遇到问题还能回滚；​
3.实况窗的设计方案要写详细，尤其是 “为什么需要这个功能”，不然审核容易被打回；​
4.证书和指纹一定要区分调试版和发布版，别搞混了。
​

总的来说，用 uni-app 适配鸿蒙 NEXT 的流程不算复杂，只要把 Vue3 迁移、证书配置、华为登录这几个关键点搞定，后续上架就顺理成章了。中间虽然踩了不少坑，但解决问题的过程也是技术成长的过程。希望这篇记录能帮到大家，也欢迎大家在评论区分享自己的适配经验，一起交流进步！

uView Pro 开源近三个月以来，收到了良好的反馈和迭代。目前 uView Pro 已经迭代了 40+ 个版本，平均每两天就会发布版本，主要是优化性能、新增\增强组件功能、bug修复、兼容性完善等。

所以目前 uView Pro 在稳定性、功能性与跨平台兼容性方面已经有了良好的表现。主要实现了 APP、鸿蒙、微信、支付宝、头条等小程序平台的兼容，后续也会继续进行迭代。

本文基于最近的 changelog 汇总，面向开发者与项目贡献者，系统介绍新增组件、关键修复、工具能力以及如何在项目中快速体验这些特性，并提供示例代码与资源链接，方便你在实际工程中落地使用。

一、总体概览

目前最新版本（0.3.15 及此前若干小版本）覆盖三大方向：

• 平台兼容与 bug 修复：适配更多小程序平台（包括鸿蒙/各小程序支持的完善），修复了 canvas 渲染、表单响应、picker 初始化、组件兼容性等若干跨端问题。
• 新组件与用户体验优化：推出并增强若干特色组件，如 u-fab（悬浮按钮）、u-text、u-loading-popup、u-textarea、u-safe-bottom、u-status-bar、u-root-portal，以满足常见 UI 场景需求。
• 工具链与框架能力：增强 http 插件与 useCompRelation（组件关系管理 Hooks），使业务层网络请求与复杂组件协作更便捷。

接下来我们把重点放在新增与优化的功能、示例使用以及工程实践建议上。

详情可查看官网及近期更新日志：https://uviewpro.cn/

二、亮点功能与新增组件（逐个拆解）

1) u-fab（悬浮按钮）

简介：u-fab 是面向移动端常见的悬浮操作入口，支持多种预设定位、拖动吸边（autoStick）以及 gap 属性的精细化配置。该组件在交互与无障碍体验上进行了增强，能兼容多端布局差异。

主要特性：

• 预设 position（如右下、左下、右中等）便于在不同 UI 布局中快速放置。
• 支持 gap 的对象式配置（top/right/bottom/left），使 demo 与真实项目兼容性更好。
• autoStick：拖动后自动吸边，提升交互体验。

示例：

示例（Vue 3 Composition API）：

<template>  
    <u-fab position="right-bottom" :gap="gapObj" :draggable="true" :autoStick="true">  
        <template #default>  
            <u-button shape="circle" size="mini" type="primary" @click="onFabClick">  
                <u-icon name="thumb-up" size="40"></u-icon>  
            </u-button>  
        </template>  
    </u-fab>  
</template>  

<script setup lang="ts">  
import { ref } from 'vue';  
const gapObj = { top: 20, right: 16, bottom: 16, left: 16 };  
function onFabClick() {  
    uni.showToast({ title: '悬浮按钮点击' });  
}  
</script>

建议：在移动端应结合 safe area（如 u-safe-bottom）与页面常驻按钮布局谨慎使用 u-fab，避免遮挡关键内容。

更多用法请参考文档：https://uviewpro.cn/zh/components/fab.html

2) u-text

简介：u-text 提供更灵活的文字样式与插槽支持，能在长文本、富文本展示场景中替代常规标签并统一样式控制。

主要特性：

• 支持默认插槽与多种文本截断/换行策略。
• 更友好的样式穿透能力，方便主题化。

示例：

<!-- 主题颜色文字 -->  
<u-text text="主色文字" type="primary"></u-text>  

<!-- 拨打电话 -->  
<u-text mode="phone" text="15019479320"></u-text>  

<!-- 日期格式化 -->  
<u-text mode="date" text="1612959739"></u-text>  

<!-- 超链接 -->  
<u-text mode="link" text="Go to uView Pro docs" href="https://uviewpro.cn"></u-text>  

<!-- 姓名脱敏 -->  
<u-text mode="name" text="张三三" format="encrypt"></u-text>  

<!-- 显示金额 -->  
<u-text mode="price" text="728732.32"></u-text>  

<!-- 默认插槽 -->  
<u-text class="desc">这是一个示例文本，支持自定义插槽与样式</u-text>  

更多用法请参考文档：https://uviewpro.cn/zh/components/text.html

3) u-loading-popup

简介：一个可配置的加载弹窗组件，支持多种加载风格与遮罩配置，方便替代项目中散落的 loading 逻辑。

示例（最小用法）：

<!-- 默认纵向加载 -->  
<u-loading-popup v-model="loading" text="正在加载..." />  
<!-- 横向加载 -->  
<u-loading-popup v-model="loading" direction="horizontal" text="正在加载..." />

更多用法请参考文档：https://uviewpro.cn/zh/components/loadingPopup.html

4) u-textarea

简介：独立的 u-textarea 组件从 u-input 中拆分而来，增强了字数统计、伸缩、和独立样式控制能力，满足复杂表单与长文本输入场景。

示例：

<!-- 字数统计 -->  
<u-textarea v-model="content" :maxlength="500" count />  

<!-- 自动高度 -->  
<u-textarea v-model="content" placeholder="请输入内容" autoHeight></u-textarea>

更多用法请参考文档：https://uviewpro.cn/zh/components/textarea.html

5) u-safe-bottom 与 u-status-bar

用途：与设备安全区（notch/safearea）相关的布局组件，用来保证底部/状态栏的展示在不同平台上都不会被遮挡或错位。适配了多端差异（iOS、Android、不同小程序宿主）。

如果有需要，您可以在任何地方引用它，它会自动判断在并且在 IPhone X 等机型的时候，给元素加上一个适当 底部内边距，在 APP 上，即使您保留了原生安全区占位(offset设置为auto)，也不会导致底部出现双倍的空白区域，也即 APP 上 offset 设置为 auto 时。

<template>  
  <view>  
    ......  
    <u-safe-bottom></u-safe-bottom>  
  </view>  
</template>

更多用法请参考文档：https://uviewpro.cn/zh/components/safeAreaInset.html

6) u-root-portal

简介：提供将节点传送到根节点的能力（Portal 模式），适用于模态、全局浮层等需要脱离当前 dom 层级的场景，兼容多端实现细节。

根节点传送组件仅支持微信小程序、支付宝小程序、APP和H5平台，组件会自动根据平台选择合适的实现方式：

这类场景最常见的例子就是全屏的模态框。理想情况下，我们希望触发模态框的按钮和模态框本身的代码是在同一个单文件组件中，因为它们都与组件的开关状态有关。

<u-button type="primary" @click="show = true">显示弹窗</u-button>  
<u-root-portal v-if="show">  
  <view class="modal">  
    <view class="modal-content">  
      <text>这是一个全局弹窗</text>  
      <u-button @click="show = false">关闭</u-button>  
    </view>  
  </view>  
</u-root-portal>

更多用法请参考文档：https://uviewpro.cn/zh/components/rootPortal.html

7) 自定义主题

uView Pro 目前可以自定主题色，字体颜色，边框颜色等，所有组件内部的样式，都基于同一套主题，比如您修改了primary主题色，所有用到了primary颜色 的组件都会受影响。

由于 uView 官方版本，组件内部存在许多硬编码颜色配置，无法动态根据 scss 变量，现在，我们可以统一跟随主题配置了。

通过官网主题颜色配置完后，在页面底部下载文件，会得到一个名为uview-pro.theme.scss和uview-pro.theme.ts的文件。

配置 scss 变量

/* uni.scss */  
@import 'uview-pro/theme.scss';

配置 ts 变量

// main.ts  
import { createSSRApp } from 'vue'  
import App from './App.vue'  
import theme from '@/common/uview-pro.theme'  
import uViewPro from 'uview-pro'  

export function createApp() {  
  const app = createSSRApp(App)  
  // 引入uView Pro 主库，及theme主题  
  app.use(uViewPro, { theme })  
  return {  
    app  
  }  
}

以上步骤完成之后，所有颜色均跟随主题色。

更多用法请参考文档：https://uviewpro.cn/zh/guide/theme.html

8) 自定义样式

uView Pro 默认提供了一套美观且统一的组件样式，但在实际项目开发中，往往需要根据业务需求进行个性化定制。参考自定义主题。

然而，如果仅是需要覆盖组件的默认样式，或增加样式，uView Pro 则支持两种主流的自定义样式方式，灵活满足各种场景：

目前，所有组件均支持 custom-class 样式穿透和 custom-style 内联样式

<view class="my-page">  
    <!-- custom-class 样式穿透 -->  
    <u-button custom-class="my-btn"></u-button>  

    <!-- 自定义内联样式 -->  
    <u-button  
        custom-style="background: linear-gradient(90deg,#2979ff,#00c6ff);color:#fff;border-radius:8px;"  
    ></u-button>  
</view>  

<style lang="scss">  
.my-page {  
  :deep(.my-btn) {  
    background-color: #2979ff;  
    color: #fff;  
    border-radius: 8px;  
  }  
}  
</style>  

更多用法请参考文档：https://uviewpro.cn/zh/guide/style.html

三、工具链改进与新能力

1) http 插件（httpPlugin）

简介：提供统一的请求封装，支持 TypeScript、Vue3、组合式 API，插件化、全局配置、请求/响应拦截器、请求元信息类型（toast/loading 灵活控制），开箱即用，便于在项目中进行全局化网络管理。。

示例：基本请求

import { http } from 'uview-pro'  

// GET  
http.get('/api/user', { id: 1 }).then(res => {  
  /* ... */  
})  

// POST  
http.post('/api/login', { username: 'xx', password: 'xx' }).then(res => {  
  /* ... */  
})  

// PUT/DELETE  
http.put('/api/user/1', { name: 'new' })  
http.delete('/api/user/1')

高级：支持请求拦截器、全局错误处理与 meta 配置，适合接入鉴权、重试、限流等策略。

最佳实践：定义拦截器配置 => 注册拦截器 => 统一 API 管理

定义拦截器配置

import type { RequestConfig, RequestInterceptor, RequestMeta, RequestOptions } from 'uview-pro'  
import { useUserStore } from '@/store'  

// 全局请求配置  
export const httpRequestConfig: RequestConfig = {  
  baseUrl,  
  header: {  
    'content-type': 'application/json'  
  },  
  meta: {  
    originalData: true,  
    toast: true,  
    loading: true  
  }  
}  

// 全局请求/响应拦截器  
export const httpInterceptor: RequestInterceptor = {  
  request: (config: RequestOptions) => {  
    // 请求拦截  
    return config  
  },  
  response: (response: any) => {  
    // 响应拦截  
    return response.data  
  }  
}

注册拦截器：

import { createSSRApp } from 'vue'  
import uViewPro, { httpPlugin } from 'uview-pro'  
import { httpInterceptor, httpRequestConfig } from 'http.interceptor'  

export function createApp() {  
  const app = createSSRApp(App)  

  // 注册uView-pro  
  app.use(uViewPro)  

  // 注册http插件  
  app.use(httpPlugin, {  
    interceptor: httpInterceptor,  
    requestConfig: httpRequestConfig  
  })  

  return { app }  
}

统一 API 管理

// api/index.ts  
import { http } from 'uview-pro'  

export const login = data => http.post('/api/login', data,  { meta: { loading: true, toast: true } })  
export const getUser = id => http.get('/api/user', { id },  { meta: { loading: false } })

以上示例为经典最佳实践，更多用法请查看 http 插件文档：https://uviewpro.cn/zh/tools/http.html

2) useCompRelation（组件关系管理 Hooks）

目的：替代传统的 provide/inject 在多平台（尤其是一些小程序宿主）可能存在的兼容问题，提供更可靠的父子组件连接和事件广播机制。

应用场景：复杂表单、级联菜单、带有子项动态增删的组件集合等。

父组件示例（伪代码）：

import { useParent } from 'uview-pro';  

const { children, broadcast } = useParent('u-dropdown');  

// 广播调用子组件函数  
broadcast('childFunctionName', { payload });  

// 收集所有子组件指定值  
function getChildrenValues() {  
    let values: any[] = [];  
    children.forEach((child: any) => {  
        if (child.getExposed?.()?.isChecked.value) {  
            values.push(child.getExposed?.()?.name);  
        }  
    });  
}

子组件示例（伪代码）：

const { parentExposed, emitToParent } = useChildren('u-dropdown-item', 'u-dropdown');  

// 触发父组件的函数  
emitToParent('parentFunctionName');  

// 获取父组件的变量  
const activeColor = computed(() => parentExposed.value?.activeColor);

更多用法请参考组件源码：useCompRelation.ts

3) 提供 llms.txt

llms.txt的作用是什么，一般它用来告诉大模型是否允许抓取网站数据用于训练的文件，类似于 robots.txt 控制爬虫权限，因此 uView Pro 也提供了即时更新的 llms.txt 文件，便于训练大模型，更好的为我们服务，链接如下：

https://uviewpro.cn/llms.txt

https://uviewpro.cn/llms-full.txt

四、多脚手架支持

1) create-uni

create-uni 提供一键生成、模板丰富的项目引导能力，旨在增强 uni-app 系列产品的开发体验，官网：https://uni-helper.cn/create-uni/core

pnpm create uni <项目名称> --ts -m pinia -m unocss -u uview-pro -e

表示：

• 启用 TypeScript
• 集成 ESLint 代码规范
• 启用 pinia
• 集成 unocss
• 选择 uview-pro组件库

如果你想用 create-uni 交互式创建一个项目，请执行以下命令：

pnpm create uni

进入交互式选择界面，选择 uView Pro 模板或组件，其他的相关插件可按需选择：

使用 create-uni 快速创建 uView Pro Starter 启动模板，请执行以下命令：

pnpm create uni <项目名称> -t uview-pro-starter

使用 create-uni 快速创建 uView Pro 完整组件演示模板，请执行以下命令：

pnpm create uni <项目名称> -t uview-pro-demo

2) unibest

unibest 是目前最火的 uni-app 脚手架，它是菲鸽大佬联同众多 uni-app 开发者共同贡献的 uni-app 框架，集成了最新技术栈和开发工具，官网：https://unibest.tech/

如果你想用 unibest 和 uView Pro 来创建项目，请执行以下命令：

一行代码创建项目：

pnpm create unibest <项目名称> -t base-uview-pro

交互式创建项目：

pnpm create unibest

选择 base-uview-pro 模板：

3) 官方cli

第一种：创建以 javascript 开发的工程

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

第二种：创建以 typescript 开发的工程

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

引入uview—pro组件库即可，不再过多介绍，可参考快速配置：https://uviewpro.cn/zh/components/setting.html

五、近期修复若干关键问题

• u-circle-progress 的 canvas 渲染问题已修复，解决了微信小程序 canvas 2D 在不同平台上下文差异导致的绘制异常。
• u-form 相关多个修复：处理 model 替换导致校验失效、resetFields 修复、u-form-item 样式与光标问题修复，提升表单在小程序端兼容性。
• picker、index-list、popup 等组件的跨端兼容修复，减少在头条/支付宝/微信等宿主上的差异表现。

这些修复的综合效果是：在多端使用 uView‑Pro 构建页面时，出现的平台差异与边缘 bug 大幅减少，开发成本降低。

六、跨平台支持说明

当前 uView‑Pro 已兼容并在以下平台进行适配与测试：

• 鸿蒙（HarmonyOS）
• Android（原生应用及 WebView）
• iOS（原生应用及 WebView）
• 微信小程序
• 支付宝小程序
• 头条小程序

后续仍然会对多端小程序兼容性的持续投入，很多修复直接针对宿主差异展开（例如 Canvas 行为、provide/inject 实现差异、样式差异等）。

近期在鸿蒙6.0系统上运行uView Pro源码，效果还不错，如下：

七、未来计划

根据规划，未来几个方向包括：

• 持续优化现有组件，新增组件，提升用户体验
• 国际化（i18n）支持：统一组件的语言切换能力，方便多语言产品线接入。
• 暗黑模式（Dark Mode）：与运行时主题切换能力结合，提供暗色皮肤一键切换体验。
• 优化现有平台兼容性，扩展更多平台的适配测试（保持对小程序宿主的兼容修复）。
• uni-app x 支持：目前还在调研中。
• mcp 支持。

八、结语

如果你在项目中使用到以上组件或工具，并希望参与贡献，请参考仓库的贡献指南。欢迎提 issue、提交 PR，或在插件市场与社区中反馈使用体验。

• Github：https://github.com/anyup/uView-Pro
• Gitee：https://gitee.com/anyup/uView-Pro
• 快速启动仓库：https://github.com/anyup/uView-Pro-Starter
• 插件市场（DCloud）：https://ext.dcloud.net.cn/plugin?id=24633
• 官网：https://uviewpro.cn

用的uniapp 原生的底部导航栏，有四个导航，我想在某个导航的右上角加几个字，有办法实现嘛

苹果的appleid子站最近打不开，之前上传app store都是需要在appleid这个子站设置专用密码才能上传的，但是现在这个网站打不开，造成设置专用密码找不到入口。

可能，现在苹果不建议再使用专用密码上传了吧。不过可以使用香蕉云编这个工具来上传，它支持使用密钥来上传，这个密钥在app store就能设置，不需要去苹果的appleid子站设置。

https://www.yunedit.com/ipasend

上传界面如下图所示：

这个密钥，可以在app store设置，如下图：

这样，注意，点击用户与访问菜单后，需要再点击“集成”标签，才能看到密钥设置页面。

我用它在我的主力电脑和备用电脑之间同步工作文件，比用任何云盘都快，而且不用担心隐私问题，感觉就像多了个无线硬盘。
https://iris.findtruman.io/web/lan-drop?share=L

'''在移动应用开发过程中，“上架” 是项目从研发走向用户的最后一道关卡。
但不同平台的上架规范差异巨大，尤其是 iOS，上架流程相对严格复杂，因此许多团队会选择 “App 上架服务” 或内部构建 “自动化发布流程” 来降低成本。

本文从开发者视角出发，以真实开发经验为基础，讲解如何在没有专业 Mac 环境、没有全流程经验的情况下，合理利用多种工具组合完成 iOS 上架工作。
内容涵盖开发者账号、证书体系、IPA 构建、上传工具、审核流程以及自动化发布的使用方式。

一、为什么会出现 “App 上架服务”？

相比 Android，iOS 上架存在以下难点：

1. 苹果审核严格
2. 证书体系复杂（p12、描述文件、App ID）
3. 必须使用官方上传协议
4. 许多工具传统上依赖 Mac

对于缺少 iOS 经验或全部使用 Windows 开发的团队，这些门槛让上架过程变得高风险，因此出现了 “App 上架服务”以及各种云端工具、跨平台签名工具的需求。

实际上，随着跨平台框架和上传工具的演进，现在开发者完全可以自己完成整个流程。

二、App 上架的基础流程（iOS）

即便外包或使用上架服务，流程本身并没有变化，仍然包括：

1. 创建 Apple Developer 开发者账号
2. 准备应用资料（图标、截图、隐私政策）
3. 配置 App ID
4. 创建发布证书与描述文件
5. 构建 IPA 包
6. 上传至 App Store Connect
7. 填写元数据
8. 提交审核与调整版本

每一步都有相对独立的工具与替代方案，可以自由组合。

三、哪些工具可用于 iOS 上架？（组合式解决方案）

iOS 上架并不存在必须使用的单一工具，可以组合如下方式：

1. 构建 IPA（无 Mac 方案）

• HBuilderX（uni-app 云打包）
• Codemagic（Flutter）
• Bitrise（跨平台构建）
• Expo Cloud Build（React Native）
• Unity / Cocos Creator 远程构建

这些服务为没有 Mac 环境的团队解决了“如何获得 IPA”的问题。

2. 证书、描述文件管理

过去依赖钥匙串助手，现在跨平台工具更适合团队：

• 开心上架（Appuploader）证书管理
• Apple Developer 官网页面（手动）

在 Windows 或 Linux 上可以直接使用 Appuploader 生成证书：

3. IPA 上传工具

iOS 上架最重要的部分是“上传 IPA 到苹果服务器”。

可选择：

跨平台方案中，CLI 工具是最灵活稳定的方式。

上传示例命令：

appuploader_cli -u ios@team.com -p xxx-xxx-xxx-xxx -c 2 -f ./output/app.ipa

4. App Store Connect 配置（网页端）

无论什么系统，都可通过浏览器执行：

• 截图上传
• 隐私政策
• 元数据填写
• 版本说明
• 提交审核

这部分工作无法被完全自动化，需要由开发者提交。

四、App 上架服务的核心价值是什么？

即使现在工具齐全，仍有一些团队选择外包上架服务。

常见原因有：

1. 没有熟悉苹果审核规则的成员

审核被拒一次就可能耽误 2–5 天，服务人员通常经验更丰富。

2. 证书体系混乱

许多团队多次生成证书导致冲突，上架服务可以重新整理证书结构。

3. 时间紧张

项目上线周期短时，外包上架能降低风险。

4. 内部没有 Mac

虽然现在可以免 Mac 上架，但对不了解流程的人仍然有学习成本。

然而，大部分团队其实可以通过工具组合自己完成流程，既便宜又可控。

五、如何自己搭建一套 “App 上架服务流程”？（推荐）

下面是一套适合跨平台项目的高效流程：

1. 构建 IPA（云服务）

根据项目类型选择云构建服务，自动产出 IPA。

2. 本地或服务器管理证书

使用 Appuploader 生成证书，团队共享使用。

3. 使用命令行自动上传 IPA

appuploader_cli -u dev@icloud.com -p xxx-xxx-xxx-xxx -c 2 -f ./release/app.ipa

4. 审核与版本提交

通过浏览器完成 App Store Connect 元数据填写。

5. 搭建自动化（可选）

• GitHub Actions
• Jenkins
• GitLab CI

示例流水线脚本：

fastlane gym --scheme "MyApp" --output_directory "./build"  
appuploader_cli -u dev@icloud.com -p xxx -c 2 -f ./build/MyApp.ipa

这套流程成本极低，且适合没有 Mac 的团队。

六、开发者在自主上架时应注意的审核要点

即使使用上架服务，苹果审核本身也不会跳过。
以下问题最常导致审核被拒：

了解审核规则能显著提高通过率。

七、示例：团队如何从零构建自己的 “上架服务流程”

以一个使用 uni-app 的开发团队为例：

1. 开发阶段：所有成员均在 Windows
2. IPA 构建：HBuilderX 云打包
3. 证书创建：由一台 Windows 电脑使用 Appuploader CLI
4. CI 自动构建：GitLab
5. 上传 IPA：GitLab Runner 执行上传命令
6. 提交审核：产品经理通过浏览器填写信息

最终，整个上架流程无需购买 Mac，成本低且易维护。

随着跨平台工具的成熟， “App 上架服务” 不再是必须依赖外包的项目环节。
开发团队完全可以通过 云构建 + 跨平台证书管理 + 跨平台上传工具在 Windows 或 Linux 环境中完成 iOS 上架。

无论是独立开发者、外包团队还是企业项目，只要掌握正确流程，iOS 上架不再是困难点，而是流程化的工作。
上架参考链接：https://www.applicationloader.net/tutorial/zh/83/83.html'''

基于前端CSS、canvas实现的简易壁纸生成器
点击使用

关于安卓搜索蓝牙设备报错startBluetoothDevicesDiscovery:fail Location services are turned off 10016，我也遇到同样的问题，搜了很多相关问题。最后发现，开启位置权限只是其中一步，安卓手机在设置--隐私里面还有一个位置服务需要开启，我找到一段代码可以判断是否开启位置服务，希望能够给到大家帮助！

let systemType = uni.getSystemInfoSync().platform;  
                // 安卓  
                if (systemType === 'android') {  
                    var context = plus.android.importClass('android.content.Context');  
                    var locationManager = plus.android.importClass('android.location.LocationManager');  
                    var main = plus.android.runtimeMainActivity();  
                    var mainSvr = main.getSystemService(context.LOCATION_SERVICE);  
                    if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {  
                        uni.showModal({  
                            title: '提示',  
                            content: '搜索蓝牙设备需要开启定位服务功能',  
                            showCancel: false,  
                            confirmText: '去开启',  
                            success() {  
                                if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {  
                                    var Intent = plus.android.importClass('android.content.Intent');  
                                    var Settings = plus.android.importClass('android.provider.Settings');  
                                    var intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);  
                                    main.startActivity(intent); // 打开系统设置定位服务功能页面  
                                } else {  
                                    console.log('定位服务功能已开启');  
                                }  
                            }  
                        });  
                    }   
                }

分享一个免费无广、基于前端实现的局域网传输工具
无需下载，只需要在同一局域网下，创建房间、加入房间即可分享
点击使用

uView Pro 开源地址：

• GitHub：https://github.com/anyup/uview-pro
• Gitee：https://gitee.com/anyup/uview-pro
• npm：https://www.npmjs.com/package/uview-pro
• 官网文档：https://uviewpro.cn/
• 插件市场：https://ext.dcloud.net.cn/plugin?id=24633

一、项目背景

uni-app 作为一款优秀的跨平台框架，凭借其“一套代码，多端运行”的理念，受到了广大移动端开发者的青睐。

而在 uni-app 的生态中，uView UI 作为一款基于 Vue2 开发的开源组件库，凭借其丰富的组件、完善的文档和良好的社区氛围，成为了许多开发者的首选，这当中就包括我，我在 2019 年接触 uni-app，刚开始只有官方的 uni-ui，没有别的选择，后来 uView UI 发布，以其简洁的 API 设计和良好的文档，成为我后来使用 uni-app 的首选，一直到现在。

然而，随着 Vue3 的正式发布以及 TypeScript 的广泛应用，越来越多的项目开始向 Vue3 技术栈迁移，大家对于兼容 Vue3 的组件库需求日益增长。然而直至现在，uView 官方也没出 Vue3 版本，这可能是精力不足的缘故。

作为一名前端开发者，相信大家都能深刻体会到 Vue3 带来的性能提升和开发体验优化，uView UI 没有进行 Vue3 迭代，无法满足新项目基于 Vue3 的开发需求。

为此，我决定用最新的技术栈 —— Vue3 + TypeScript + <script setup>，对 uView UI 进行全面重构，打造一款真正适配 uni-app Vue3 开发者的高质量组件库，并将其命名为“uView Pro”。

目前，uView Pro 已经支持：安卓、苹果、鸿蒙等App平台，h5平台，微信、支付宝、头条、QQ、钉钉等小程序平台，未来也会持续兼容其他平台，详情可查看官网：https://uviewpro.cn/

二、为什么选择 uView 1.x

我为什么选择 uView 1.x 来进行重构？而不是选择 uView 2.0？

对比 1.x， uView2.0 与 uView1.x 最大的不同就是对 nvue 的支持，因为 2.x 立项的首要目标就是对 nvue 的兼容，目前 uView2.0 也全面实现了兼容 nvue。

然而，我在之前的项目中对 nvue 的开发需求并不高，所以这一点对我没什么吸引力。其次，uview 2.0 对一些组件有一些优化，比如：form 表单校验的加强，优化 popup 弹窗组件 等等，如下：

uView 2.0 对比 1.X 有哪些更改？

其实还好，1.0 版本已经比较稳定了，2.0 我都没用过，所以我也没有必要重构一个不熟悉的框架。

因此，我最终选择基于 uView UI 1.8.8 的版本进行的 Vue3 重构，1.8.8 是 uView UI 1.x 的一个最新的稳定版本，我在众多的项目中都用过，兼容性好，主要是我很熟悉源码。

uView UI 虽然不兼容 Vue3，但也能保持周活 2.6K+

市面上也有一些开发者将 uView UI 做了适配，使其兼容到 Vue3，但观其源码，大都还是使用的 Vue2 的 Option API 风格，而我要的是 Composition API 的 <script setup> 语法糖。

三、已完成组件重构

uView Pro 致力于覆盖 uni-app 项目开发中的各类场景，组件设计参考了 uView UI 1.8.8 的 API，确保开发者可以无缝切换。以下为已完成的 80+ 组件分类及简介：

1. 基础组件

• Color 色彩：统一色彩体系，支持主题切换。
• Icon 图标：丰富的图标库，支持自定义。
• Image 图片：图片懒加载、错误占位等功能。
• Button 按钮：多样化按钮样式，支持加载、禁用等状态。
• Layout 布局：灵活的栅格系统，适配多端。
• Cell 单元格：列表项展示，支持左滑操作。
• Badge 徽标数：数字、点状等多种徽标样式。
• Tag 标签：多样化标签样式，支持自定义颜色。

2. 表单组件

• Form 表单：表单校验、分组、布局。
• Calendar 日历：日期选择、范围选择。
• Select 列选择器：多级联动选择。
• Keyboard 键盘：自定义数字键盘。
• Picker 选择器：多类型选择器。
• Rate 评分：星级评分。
• Search 搜索：搜索框，支持联想。
• NumberBox 步进器：数字加减。
• Upload 上传：图片、文件上传。
• VerificationCode 验证码倒计时：短信验证码场景。
• Field 输入框：多类型输入框。
• Checkbox 复选框：多选项。
• Radio 单选框：单选项。
• Switch 开关选择器：状态切换。
• Slider 滑动选择器：滑块选择。

3. 数据组件

• Progress 进度条：线性、圆形进度。
• Table 表格：多功能表格。
• CountDown 倒计时：活动倒计时。
• CountTo 数字滚动：数字动画。

4. 反馈组件

• ActionSheet 操作菜单：底部弹出菜单。
• AlertTips 警告提示：警告、提示信息。
• Toast 消息提示：轻量弹窗。
• NoticeBar 滚动通知：顶部公告。
• TopTips 顶部提示：页面顶部提示。
• SwipeAction 滑动单元格：列表项滑动操作。
• Collapse 折叠面板：内容收起展开。
• Popup 弹出层：多种弹窗样式。
• Modal 模态框：确认、取消弹窗。
• FullScreen 压窗屏：全屏弹窗。

5. 布局组件

• Line 线条：分割线、装饰线。
• Card 卡片：内容卡片。
• Mask 遮罩层：遮罩效果。
• NoNetwork 无网络提示：断网提示。
• Grid 宫格布局：九宫格、自由布局。
• Swiper 轮播图：图片轮播。
• TimeLine 时间轴：事件流程展示。
• Skeleton 骨架屏：页面加载占位。
• Sticky 吸顶：元素吸顶。
• Waterfall 瀑布流：图片流式布局。
• Divider 分割线：内容分隔。

6. 导航组件

• Dropdown 下拉菜单：多级菜单。
• Tabbar 底部导航栏：多端适配。
• BackTop 返回顶部：一键回顶。
• Navbar 导航栏：页面头部导航。
• Tabs 标签：选项卡切换。
• TabsSwiper 全屏选项卡：滑动切换。
• Subsection 分段器：内容分段。
• IndexList 索引列表：字母索引。
• Steps 步骤条：流程步骤。
• Empty 内容为空：空状态展示。
• Section 查看更多：内容展开。

7. 其他组件

• MessageInput 验证码输入：短信验证码输入框。
• Loadmore 加载更多：列表加载。
• ReadMore 展开阅读更多：内容展开。
• LazyLoad 懒加载：图片、内容懒加载。
• Gap 间隔槽：布局间隔。
• Avatar 头像：用户头像。
• Link 超链接：文本链接。
• Loading 加载动画：多种加载效果。

所有组件均已通过 h5、微信小程序、Android 平台的自测，最大限度的保证了良好的兼容性和稳定性。

四、技术优势与要点

1. 最新技术栈

• Vue3 + TypeScript + <script setup>：充分利用 Vue3 的响应式、组合式 API，TypeScript 强类型保障，<script setup> 简化代码结构。
• 全量组件重构：所有组件均基于最新技术栈重写，非简单兼容，真正适配 Vue3。
• API 设计对齐 uView 1.8.8：最大程度降低迁移成本，老用户可无缝切换。

2. 多端兼容

• 支持 h5、微信小程序、Android：核心组件已在主流平台自测通过，兼容性强。
• 未来规划更多平台：后续将适配 iOS、支付宝小程序、百度小程序等。

3. 性能优化

• 按需加载：支持 tree-shaking，减少包体积。
• 响应式渲染：充分利用 Vue3 的响应式系统，提升渲染性能。
• 自定义主题：支持主题切换，满足多样化需求。

4. 开发体验

• 文档体系：同步重构文档，涵盖组件用法、API、案例。
• VSCode 代码提示：计划开发 VSCode 插件，提升开发效率。
• 社区支持：我创建了相关交流群、GitHub/Gitee Issues，及时响应反馈。

五、快速使用

安装

npm 安装

# npm 安装  
npm install uview-pro  

# yarn 安装  
yarn add uview-pro  

# pnpm 安装  
pnpm add uview-pro

插件市场下载

https://ext.dcloud.net.cn/plugin?id=24633

快速上手

1. main.ts引入 uView 库

// main.ts  
import { createSSRApp } from 'vue'  
import uViewPro from 'uview-pro'  

export function createApp() {  
  const app = createSSRApp(App)  
  app.use(uViewPro)  
  // 其他配置  
  return {  
    app  
  }  
}

1. App.vue引入基础样式(注意 style 标签需声明 scss 属性支持)

/* App.vue */  
<style lang="scss">  
@import "uview-pro/index.scss";  
</style>

1. uni.scss引入全局 scss 变量文件

/* uni.scss */  
@import 'uview-pro/theme.scss';

1. pages.json配置 easycom 规则(按需引入)

// pages.json  
{  
  "easycom": {  
    "autoscan": true,  
    "custom": {  
      // npm 方式  
      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue",  
      // uni_modules 方式  
      // "^u-(.*)": "@/uni_modules/uview-pro/components/u-$1/u-$1.vue"  
    }  
  },  
  "pages": [  
    // ...  
  ]  
}  

使用方法

配置 easycom 规则后，自动按需引入，无需import组件，直接引用即可。

<template>  
  <u-button>按钮</u-button>  
</template>

六、未来计划

uView Pro 的目标是成为 uni-app Vue3 生态的标杆组件库，根据规划，未来几个方向包括：

• 持续优化现有组件，新增组件，提升用户体验
• 国际化（i18n）支持：统一组件的语言切换能力，方便多语言产品线接入。
• 暗黑模式（Dark Mode）：与运行时主题切换能力结合，提供暗色皮肤一键切换体验。
• 优化现有平台兼容性，扩展更多平台的适配测试（保持对小程序宿主的兼容修复）。
• uni-app x 支持：目前还在调研中。
• mcp 支持。

相信这一切都不会太远，期待 ing

七、结语

uView Pro 和 uView 一样，作为一款完全开源、免费商用的组件库，离不开社区的支持与贡献。无论你是前端开发者、设计师、产品经理，还是企业用户，都欢迎加入 uView Pro 的研发，参与组件开发、文档完善、生态建设等工作。所有贡献者都将在官网、文档中鸣谢。

未来，uView Pro 将持续迭代，拥抱新技术，服务更多开发者。让我们一起为 uni-app Vue3 生态贡献力量，打造更优秀的 UI 组件库！

uView Pro 开源地址：

• GitHub：https://github.com/anyup/uview-pro
• Gitee：https://gitee.com/anyup/uview-pro
• npm：https://www.npmjs.com/package/uview-pro
• 官网文档：https://uviewpro.cn/
• 插件市场：https://ext.dcloud.net.cn/plugin?id=24633

欢迎 Star、Fork、PR、Issue，欢迎来撩！

如有问题或建议，欢迎在 Issue 区留言交流，或入群交流反馈！

作为一名刚刚踏入鸿蒙生态的个人开发者，面对HarmonyOS丰富的开放能力，既兴奋又忐忑。我选择开发一款轻量化的“智能垃圾分类助手”元服务作为我的第一个项目，它能让用户通过相机或输入快速查询垃圾类别，并通过卡片直观展示分类结果。本文将重点分享我如何集成三项关键的鸿蒙开放能力，并成功解决开发中的实际问题。

一、能力集成背景：解决“不知道是什么垃圾”的痛点

在日常生活的垃圾分类场景中，用户常常面临“不确定垃圾类别”、“查询步骤繁琐”以及“需要快速获取结果”的核心痛点
。传统的解决方案要么需要用户安装独立的APP占用存储空间，要么查询路径较长，体验不够流畅。
目标：开发一款即用即走的元服务，通过卡片直接提供服务，实现“随手拍、随手查、结果立现”。
挑战：作为新手，我需要一个低后端维护成本、能快速实现核心功能（如图像识别或智能问答）、并能提供流畅前端交互的方案。
鸿蒙能力选型：针对以上，我选择了以下三项鸿蒙开放能力，它们极大地降低了我的开发门槛：
端云一体化开发（云开发）：提供Serverless后端支持，我不必自建服务器。
元服务卡片：作为服务的直接入口，实现服务外显，减少操作层级。
AI能力（结合ArkUI）：计划整合智能识别或自然语言处理功能，用于垃圾识别。

二、集成的鸿蒙开放能力全称及核心功能

端云一体化开发（云开发）：

核心功能：允许开发者在DevEco Studio内一站式完成端侧（应用）和云侧（云函数、云数据库）的开发。云函数用于处理复杂的业务逻辑（如调用AI模型进行图像识别或智能问答），云数据库用于存储垃圾分类规则数据。这让我无需关注服务器运维，只需专注业务逻辑实现
。

元服务卡片：

核心功能：元服务是HarmonyOS的一种新型服务提供方式，以万能卡片等多种形态呈现，具有即用即走、信息外显的特性
。我的垃圾分类结果可以直接展示在卡片上，用户无需进入完整应用。

AI大模型能力（结合ArkUI框架）：

核心功能：HarmonyOS提供了丰富的AI接口。在本项目中，我探索了如何利用ArkUI声明式开发范式
构建交互界面，并初步尝试集成鸿蒙的AI能力（例如通过云函数调用大模型API），实现对用户输入的文本（如“香蕉皮”）进行智能识别和分类。

三、能力集成的核心步骤

3.1 端云一体化开发（云开发）集成

在DevEco Studio中创建新项目时，我选择了“端云一体化开发”模板。IDE自动为我创建了端侧（Application）和云侧（CloudProgram）的工程结构
。
关键步骤1：创建云函数。在CloudProgram/cloudfunctions目录下，我右键新建了一个名为classifyGarbage的云函数。这个函数的核心逻辑是接收用户上传的图片URL或文本，调用AI服务进行识别，并从云数据库中查询对应的分类结果。
关键步骤2：部署与调试。编写完云函数后，通过DevEco Studio的“Deploy Cloud Functions”功能，将其部署到AGC（AppGallery Connect）平台。利用“Cloud Functions Requestor”工具在本地进行模拟触发和调试，确保函数逻辑正确
。
关键步骤3：端侧调用。在元服务的ETS代码中，引入AGConnect的云函数SDK，并通过简单的API调用云函数。

// 示例代码片段 (基于 ArkTS)  
import agconnect from '@hw-agconnect/api-ohos';  
import "@hw-agconnect/function-ohos";  

async function classifyWaste(inputText: string) {  
  try {  
    const result = await agconnect.function().wrap("classifyGarbage").call({  
      input: inputText  
    });  
    console.log("Classification result:", result.getValue());  
    // 更新UI或卡片信息  
  } catch (error) {  
    console.error("Error calling cloud function:", error);  
  }  
}

3.2 元服务卡片开发

关键步骤1：卡片布局。在entry/src/main/ets/entryformability目录下，定义卡片的UI布局。我使用了ArkUI的组件，如Text、Image和Button，来构建一个包含输入框、查询按钮和结果展示区域的卡片界面
。
关键步骤2：动态数据更新。利用ArkUI的声明式UI和状态管理（如@State装饰器），当从云函数获取到分类结果后，自动更新卡片上显示的文本内容，实现数据的动态绑定
。

3.3 AI能力探索与ArkUI界面构建

作为新手，我首先从相对成熟的文本交互入手。我构建了一个简单的文本输入界面，并将用户输入传递给云函数。在云函数内，可以集成预训练的模型或调用第三方AI服务API来完成智能分类。
关键步骤：在UI中，使用TextInput组件接收用户输入，使用Button组件触发查询事件，并将结果显示在Text组件中
。这体现了ArkUI框架声明式开发的高效性。

四、场景落地

4.1 应用场景落地

该“智能垃圾分类助手”元服务典型的使用场景是：用户在需要丢弃垃圾时，直接桌面上滑找到服务卡片，输入垃圾名称（如“过期药品”），点击查询，卡片上即刻显示出分类结果（如“有害垃圾”）。整个过程无需下载安装大型应用，体验非常轻量化。

五、总结与展望

通过这个小小的项目，我深刻体会到HarmonyOS开放能力为个人开发者带来的强大赋能。端云一体化开发让我这个新手也能轻松拥有“云端大脑”；元服务卡片让我的应用以最优雅的方式触达用户；而ArkUI与AI能力的结合则让智能交互变得简单可行。
对于所有和我一样的个人新手开发者，我的建议是：从一个小痛点出发，勇敢地利用鸿蒙提供的强大工具箱，你会发现，创新和实现，离我们并不遥远。​ 鸿蒙广阔的生态，正等待我们共同描绘。