HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uniapp 原生底部导航栏怎么加角标

导航栏

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

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

appleid打不开无法设置专用密码,上传app store最新上传方法

Appstore上传

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

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

https://www.yunedit.com/ipasend

上传界面如下图所示:

这个密钥,可以在app store设置,如下图:

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

继续阅读 »

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

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

https://www.yunedit.com/ipasend

上传界面如下图所示:

这个密钥,可以在app store设置,如下图:

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

收起阅读 »

局域网文件传输

HTML5

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

继续阅读 »

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

收起阅读 »

App 上架服务详解,独立开发者与团队如何高效完成 iOS 发布流程

iOS

'''在移动应用开发过程中,“上架” 是项目从研发走向用户的最后一道关卡。
但不同平台的上架规范差异巨大,尤其是 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 到苹果服务器”。

可选择:

工具 平台 特点
Xcode macOS 官方工具,但依赖 Mac
Transporter macOS 操作简单,只有 GUI
Fastlane deliver macOS/Linux 自动化强,但仍需 Mac 构建
开心上架(Appuploader CLI) Win/Linux/Mac 全平台可用,支持命令行上传

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

上传示例命令:

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

4. App Store Connect 配置(网页端)

无论什么系统,都可通过浏览器执行:

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

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


四、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 的团队。


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

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

问题 原因 建议
隐私权限不符合规定 缺少用途描述 Info.plist 补充字段
截图不合规 与实际功能不一致 使用真实 UI
Bug 或闪退 测试不充分 真机测试
登录机制错误 第三方登录未规范 检查 Apple 登录要求
商业模式违规 外链支付 使用 IAP

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


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

以一个使用 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'''

继续阅读 »

'''在移动应用开发过程中,“上架” 是项目从研发走向用户的最后一道关卡。
但不同平台的上架规范差异巨大,尤其是 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 到苹果服务器”。

可选择:

工具 平台 特点
Xcode macOS 官方工具,但依赖 Mac
Transporter macOS 操作简单,只有 GUI
Fastlane deliver macOS/Linux 自动化强,但仍需 Mac 构建
开心上架(Appuploader CLI) Win/Linux/Mac 全平台可用,支持命令行上传

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

上传示例命令:

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

4. App Store Connect 配置(网页端)

无论什么系统,都可通过浏览器执行:

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

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


四、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 的团队。


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

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

问题 原因 建议
隐私权限不符合规定 缺少用途描述 Info.plist 补充字段
截图不合规 与实际功能不一致 使用真实 UI
Bug 或闪退 测试不充分 真机测试
登录机制错误 第三方登录未规范 检查 Apple 登录要求
商业模式违规 外链支付 使用 IAP

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


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

以一个使用 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'''

收起阅读 »

关于安卓搜索蓝牙设备报错startBluetoothDevicesDiscovery:fail Location services are turned off 10016

uniapp 蓝牙

关于安卓搜索蓝牙设备报错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('定位服务功能已开启');  
                                }  
                            }  
                        });  
                    }   
                }
继续阅读 »

关于安卓搜索蓝牙设备报错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('定位服务功能已开启');  
                                }  
                            }  
                        });  
                    }   
                }
收起阅读 »

基于前端实现的局域网传输工具

HTML5+

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

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

【鸿蒙征文】uView Pro 开源组件库!80+ Vue3 组件,uni-app 组件库新晋之星

鸿蒙征文

uView Pro 开源地址:

一、项目背景

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.xuView2.0uView1.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.8uView UI 1.x 的一个最新的稳定版本,我在众多的项目中都用过,兼容性好,主要是我很熟悉源码。

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

市面上也有一些开发者将 uView UI 做了适配,使其兼容到 Vue3,但观其源码,大都还是使用的 Vue2Option 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 开源地址:

欢迎 Star、Fork、PR、Issue,欢迎来撩!

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

继续阅读 »

uView Pro 开源地址:

一、项目背景

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.xuView2.0uView1.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.8uView UI 1.x 的一个最新的稳定版本,我在众多的项目中都用过,兼容性好,主要是我很熟悉源码。

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

市面上也有一些开发者将 uView UI 做了适配,使其兼容到 Vue3,但观其源码,大都还是使用的 Vue2Option 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 开源地址:

欢迎 Star、Fork、PR、Issue,欢迎来撩!

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

收起阅读 »

【鸿蒙征文】当新手遇上HarmonyOS:打造一款“垃圾分类助手”元服务

鸿蒙征文

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

继续阅读 »

作为一名刚刚踏入鸿蒙生态的个人开发者,面对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 开发鸿蒙习惯养成应用习惯修仙的全流程实践

uniapp 鸿蒙next 鸿蒙征文

星光不负,码向未来。本文记录了一个习惯养成类应用从零开始,基于 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 的发展,为应用的长期发展做好准备。

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

继续阅读 »

星光不负,码向未来。本文记录了一个习惯养成类应用从零开始,基于 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 的发展,为应用的长期发展做好准备。

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

收起阅读 »

上传app store无法设置专用密码可以使用香蕉云编密钥上传代替

Appstore上传

最近苹果设置专用密码的功能打不开了,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密钥是将密钥下载下来后,用文本编辑器打开,即可获得。

继续阅读 »

最近苹果设置专用密码的功能打不开了,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密钥是将密钥下载下来后,用文本编辑器打开,即可获得。

收起阅读 »

? NanoBanana AI 图像工作室:一键开启你的视觉魔法!

图像处理 ai

厌倦了普通的AI绘图?想要拥有超高一致性清晰度的创意图像?

NanoBanana 提供的 “AI 图像工作室”,基于 Gemini-2.5-Flash-Image(也称为 Nano Banana)模型,为您带来超越传统的绘图体验!

🎯 是什么?

NanoBanana AI 图像工作室是一款集图片上传、风格转换和文生图功能于一体的专业级AI视觉创作工具。它专注于提供高品质、高一致性的图像生成服务。

核心功能亮点:

  • 风格多样: 3D手办模型、二次元周边、乐高风格等一键切换。
  • 卓越一致性: 图像细节和风格的连贯性出色,告别“AI手残”!
  • 4K高清图像: 承诺提供高分辨率的输出,满足专业用途需求。
  • 无水印下载: 创作成果纯净交付,可直接用于商业或个人项目。

💡 原理?

技术革新,定义下一代AI绘图标准!

“NanoBanana AI 图像工作室” 的核心是 Gemini-2.5-Flash-Image 模型(或称 Nano Banana 模型)。

  1. 突破传统: 官方宣称这款模型超越了 Flux Kontext 绘图模型,意味着它在图像的细节处理、主题理解和风格保持上具备更高的水平。
  2. “闪电”速度: Flash模型代表它具备极快的生成速度,让你的创意无需等待。
  3. 精确控制: 用户可以上传图片进行“图转图”(如将普通照片转为3D手办模型),或使用“自然语言”描述生成图像,模型都能精准把握需求,生成出色的作品。

⚙️ 如何用?

你的创意,只需三步实现!

  1. 第一步: 【点击链接】 进入NanoBanana图像工作室。
  2. 第二步: 【选择模式】 选择一种预设风格(如3D手办)或选择“自由输入”
    • 图转图:拖拽或点击上传你的图片。
    • 文生图:在输入框中写下你想要的画面描述。
  3. 第三步: 【生成并定制】 点击按钮,AI立即为你呈现4K高清、无水印的定制图像。

新用户有免费生成次数,立即试用!

🔗 链接 (Link)

从灵感到作品,只差一个点击的距离。

🔗 https://iris.findtruman.io/web/nano?share=L

继续阅读 »

厌倦了普通的AI绘图?想要拥有超高一致性清晰度的创意图像?

NanoBanana 提供的 “AI 图像工作室”,基于 Gemini-2.5-Flash-Image(也称为 Nano Banana)模型,为您带来超越传统的绘图体验!

🎯 是什么?

NanoBanana AI 图像工作室是一款集图片上传、风格转换和文生图功能于一体的专业级AI视觉创作工具。它专注于提供高品质、高一致性的图像生成服务。

核心功能亮点:

  • 风格多样: 3D手办模型、二次元周边、乐高风格等一键切换。
  • 卓越一致性: 图像细节和风格的连贯性出色,告别“AI手残”!
  • 4K高清图像: 承诺提供高分辨率的输出,满足专业用途需求。
  • 无水印下载: 创作成果纯净交付,可直接用于商业或个人项目。

💡 原理?

技术革新,定义下一代AI绘图标准!

“NanoBanana AI 图像工作室” 的核心是 Gemini-2.5-Flash-Image 模型(或称 Nano Banana 模型)。

  1. 突破传统: 官方宣称这款模型超越了 Flux Kontext 绘图模型,意味着它在图像的细节处理、主题理解和风格保持上具备更高的水平。
  2. “闪电”速度: Flash模型代表它具备极快的生成速度,让你的创意无需等待。
  3. 精确控制: 用户可以上传图片进行“图转图”(如将普通照片转为3D手办模型),或使用“自然语言”描述生成图像,模型都能精准把握需求,生成出色的作品。

⚙️ 如何用?

你的创意,只需三步实现!

  1. 第一步: 【点击链接】 进入NanoBanana图像工作室。
  2. 第二步: 【选择模式】 选择一种预设风格(如3D手办)或选择“自由输入”
    • 图转图:拖拽或点击上传你的图片。
    • 文生图:在输入框中写下你想要的画面描述。
  3. 第三步: 【生成并定制】 点击按钮,AI立即为你呈现4K高清、无水印的定制图像。

新用户有免费生成次数,立即试用!

🔗 链接 (Link)

从灵感到作品,只差一个点击的距离。

🔗 https://iris.findtruman.io/web/nano?share=L

收起阅读 »