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能力的结合则让智能交互变得简单可行。
对于所有和我一样的个人新手开发者，我的建议是：从一个小痛点出发，勇敢地利用鸿蒙提供的强大工具箱，你会发现，创新和实现，离我们并不遥远。​ 鸿蒙广阔的生态，正等待我们共同描绘。

星光不负，码向未来。本文记录了一个习惯养成类应用从零开始，基于 uni-app 开发并成功上架华为应用市场的完整历程，希望能为正在探索鸿蒙开发的开发者提供一些参考。

一、缘起：为什么选择 uni-app + 鸿蒙

鸿蒙生态快速发展，HarmonyOS NEXT 的发布让原生应用开发成为趋势。作为一个独立开发者，我面临一个选择：是学习全新的 ArkTS 开发，还是利用现有的技术栈快速进入鸿蒙生态？

最终，我选择了 uni-app。原因很简单：

开发效率：我已经熟悉 Vue3 和前端开发，uni-app 让我可以复用现有技能，快速上手
跨平台能力：一套代码可以同时覆盖 iOS、Android 和鸿蒙，降低维护成本
生态成熟：uni-app 对鸿蒙的支持已经相对完善，官方文档和社区资源丰富
快速迭代：对于个人开发者来说，时间就是成本，uni-app 能让我更快地验证产品想法

于是，我决定用 uni-app 开发一款名为"习惯修仙"的习惯养成应用，并将其作为进入鸿蒙生态的敲门砖。

二、项目概述：习惯修仙

"习惯修仙"是一款将游戏化机制与习惯养成结合的应用。用户可以将早起、运动、阅读等日常行为映射为"功法"，通过完成习惯获得"修为"，提升"境界"，让枯燥的习惯养成变得有趣。

核心功能

功法管理：支持计时、计数、打卡三种类型的习惯任务
修为系统：完成任务获得修为，积累到一定程度可以"破境"
数据统计：记录每日、每周、每月的完成情况
华为账号登录：支持华为账号一键登录，数据云端同步

技术栈

框架：uni-app（Vue3）
状态管理：Pinia
样式：SCSS + 自定义主题系统
工具库：dayjs（时间处理）、echarts（数据可视化）
目标平台：HarmonyOS

三、开发实践：从零到一

3.1 项目初始化

使用 HBuilderX 创建 uni-app 项目后，第一件事就是配置鸿蒙相关设置。在 manifest.json 中，需要配置：

包名（bundleName）：这是应用的唯一标识，需要与华为开发者后台保持一致
图标和启动页：准备符合鸿蒙规范的图标和启动画面
签名配置：配置 Release 证书，用于正式打包

这里有一个小坑：包名一旦确定，后续修改会比较麻烦，建议在项目初期就规划好。

3.2 状态管理架构

习惯养成类应用的核心是数据管理。我使用 Pinia 构建了全局状态管理，主要包括：

用户数据：修为、境界、属性等游戏化数据
任务数据：功法列表、打卡记录、统计数据
应用配置：主题、设置、登录状态等

Pinia 的持久化插件让我可以轻松实现本地数据存储，这对于离线使用场景很重要。同时，我也预留了云端同步的接口，为后续的账号登录功能做准备。

3.3 页面开发与路由

uni-app 的页面路由系统与小程序类似，通过 pages.json 配置页面路径和导航栏样式。我设计了以下主要页面：

启动页：应用介绍和引导
首页：今日任务概览和快速操作
功法列表：展示所有习惯任务
功法详情：查看任务详情和历史记录
计时页面：专注计时功能
个人中心：用户信息和设置

在开发过程中，我发现 uni-app 的条件编译功能非常实用，因为开发的时候是在浏览器上调试，最后再在鸿蒙真机运行测试。通过 #ifdef APP-HARMONY 可以针对鸿蒙平台做特殊处理，比如使用鸿蒙原生的某些能力。

3.4 样式与主题系统

为了保持多端一致性，我建立了一套自定义主题系统。通过 SCSS 变量定义颜色、字体、间距等，然后在各个页面中统一使用。这样不仅保证了视觉一致性，也方便后续的主题切换功能。

四、华为能力集成：登录功能实战

4.1 为什么选择华为账号登录

最初我计划同时支持微信登录和华为账号登录，但考虑到开发成本和维护复杂度，最终只保留了华为账号登录。实际上，在审核过程中发现，华为应用市场并不会硬性要求必须有华为账号登录，只要应用功能完整、符合规范即可通过审核。

4.2 集成过程

华为账号登录的集成主要分为几个步骤：

开发者后台配置
在华为开发者联盟注册账号并创建应用
获取 Client ID
配置公钥指纹（与签名证书绑定）
申请 OAuth 权限（openid、profile 等）

manifest.json 配置
在 app-harmony.distribute.modules 中添加 uni-oauth 模块
配置华为的 client_id

代码实现
使用 uni.login({ provider: 'huawei' }) 获取授权码
通过 uni.getUserInfo({ provider: 'huawei' }) 获取用户信息
将授权码发送到后端验证，获取用户 token
更新本地登录状态

4.3 登录流程优化

为了提升用户体验，我做了以下优化：

登录状态持久化：用户登录后，下次打开应用自动保持登录状态

数据同步机制：登录后自动同步本地数据到云端，避免数据丢失

优雅降级：如果登录失败，应用仍可以以游客模式使用核心功能

五、上架准备：审核与发布

5.1 华为应用市场审核要点

华为应用市场的审核相对严格，我总结了几个关键点：

隐私政策与用户协议

必须提供完整的《用户协议》和《隐私政策》文档。我在登录页面底部添加了相关链接，并在首次启动时引导用户阅读。

权限申请规范

应用申请的权限必须在功能说明中明确用途，且不能强制申请。我的应用只在需要时才动态申请权限，并在申请时说明用途。

应用描述与截图

应用描述要清晰、真实，不能夸大功能。截图要展示应用的核心功能，不能使用误导性的图片。

5.2 审核经历

我的应用审核了两次才通过。第一次提交审核时，审核驳回原因是"功能交互简单，影响用户的总体体验"。确实，第一版本是有点简单。修复后重新提交，大约 3 个工作日就通过了审核。

5.3 上架后的数据与反馈

应用上架后，我持续关注用户反馈和数据表现：

下载量：初期增长较慢，但随着应用市场推荐和用户口碑传播，逐渐提升
用户反馈：通过应用内反馈功能收集用户意见，持续优化

六、经验总结与建议

6.1 开发过程中的关键决策

选择 uni-app 而非原生开发

这个决策让我节省了大量学习成本，能够快速将产品推向市场。虽然在某些性能敏感的场景下，原生开发可能更有优势，但对于大多数应用来说，uni-app 的性能已经足够。

使用 Pinia 而非 Vuex

Pinia 是 Vue3 官方推荐的状态管理方案，API 更简洁，TypeScript 支持更好。对于新项目，建议直接使用 Pinia。

本地数据优先，云端同步补充

考虑到网络环境和用户体验，我采用了本地数据优先的策略。用户即使不登录，也能正常使用所有功能。登录后，数据会自动同步到云端，实现多设备数据共享。

6.2 常见问题与解决方案

问题一：鸿蒙平台样式差异

不同平台的样式渲染可能有细微差异，解决方案是使用条件编译。也发现了 tabBar 配置 borderStyle 不生效的问题，已经反馈了 Bug：https://ask.dcloud.net.cn/question/215475

问题二：echarts 在鸿蒙平台不显示

应用使用了 echarts 进行数据可视化，在 web 端运行正常，但在鸿蒙平台上，图表完全不显示。排查后发现，echarts 在鸿蒙平台需要通过特殊方式引入。解决方案是 renderjs, 在页面中通过 script 标签引入 echarts 的 JS 文件。

6.3 给其他开发者的建议

提前规划，避免返工

在项目初期，就要规划好包名、证书、权限等关键配置。这些配置一旦确定，后续修改成本较高。

重视测试，特别是真机测试

模拟器测试只能发现部分问题，真机测试才能发现真实的性能和兼容性问题。建议在开发过程中定期进行真机测试。

关注审核规范，提前准备

华为应用市场的审核规范相对严格，建议在开发过程中就按照规范要求实现，避免上架时被退回。

持续优化，关注用户反馈

上架只是开始，不是结束。要持续关注用户反馈，优化产品功能和用户体验。

七、结语

从零开始到成功上架，这个过程充满了挑战，但也收获满满。uni-app 让我能够用熟悉的技术栈快速进入鸿蒙生态，而鸿蒙生态的快速发展也为开发者提供了新的机遇。

对于想要进入鸿蒙生态的开发者，我的建议是：不要犹豫，现在就是最好的时机。uni-app 已经为鸿蒙开发铺好了路，你只需要迈出第一步。

习惯修仙应用已在华为应用市场上架，欢迎体验和反馈。未来，我会继续优化"习惯修仙"应用，探索更多鸿蒙原生能力，比如推送通知、健康数据接入等。同时，我也会关注 HarmonyOS NEXT 的发展，为应用的长期发展做好准备。

希望这篇文章能为正在探索鸿蒙开发的开发者提供一些帮助，也期待在鸿蒙生态中看到更多优秀的应用。

最近苹果设置专用密码的功能打不开了，appleid.apple.com访问跳account.apple.com，但是account.apple.com打开后，只有一个转圈界面，无法打开。

如下图：

然而很多上传工具都是通过专用密码上传的，比如Transporter也是通过专用密码上传。像xcode不是通过专用密码上传的不一样，但是使用hbuilderx开发的IOS应用是打成ipa包的，不能通过xcode上传。

可以使用香蕉云编上传，香蕉云编支持使用app store密钥上传和专用密码上传两种方式。如图：

这个密钥很容易设置，不需要跑去appleid.apple.com设置，在app store的界面就可以使用，添加密钥后，就可以下载p8密钥，注意这个p8密钥只能下载一次，在下图标注的地方下载：

上面的参数中，Issuser ID和密钥ID可以直接从界面获得，p8密钥是将密钥下载下来后，用文本编辑器打开，即可获得。