uniapp-x的HarmonyOS鸿蒙应用开发：tabbar底部导航栏的实现

优质文章学习记录

— 8 min read
uniapp-x的HarmonyOS鸿蒙应用开发：tabbar底部导航栏的实现
假期期间，百无聊赖。空闲时间够多了吧？有时候感觉特别的百无聊赖。不睡懒觉，电影不看，手机不刷，游戏不玩，也无处可去。那么做什么呢? 于是翻出来之前做过的“爱影家”影视app项目，找个跨多端的技术栈实战学习一把。我先后尝试了kuikly、flutter 、arkui-x等框架，结果。。。，额，这几个没少踩坑做不动了。真想向天问一下，跨平台框架开发哪家强？最后尝试了下uni-app x，被惊艳到了。果然dcloud很给力啊。且uni-app-x的性能很给力。还停留在uniapp只擅长小程序吗？唯独被诟病的是：uniapp-x的uts语法很难受啊，写法跟ts差异很大，且大模型不认识uts语法。

可以体验打包后的hello uni-app x这个demo项目，地址是：https://hellouniappx.dcloud.net.cn/

可以看到组件很全面啊，我先后体验了android端，鸿蒙端和小程序端，界面UI效果一致，且鸿蒙端运行相当流畅。可以看到组件还是很丰富的。浏览器端的体检们可以直接访问：https://hellouniappx.dcloud.net.cn/web#/pages/component/view/view

UTS语法介绍：https://doc.dcloud.net.cn/uni-app-x/uts/

鸿蒙next手机端的体验：

使用鸿蒙next手机的应用商店，搜索“DCloud开发者中心系统”可以下载安装体验。据说渲染速度超过了原生写法，你说牛不牛吧？

HBuilderX 5.0先推出了鸿蒙版的蒸汽模式介绍：https://doc.dcloud.net.cn/uni-app-x/app-harmony/harmony-vapor.html

这个无名的渲染系统，实现了跨平台App框架的历史突破，即：基于原生渲染管线，但超越了原生的渲染速度。

• vue蒸气模式（Vapor），免除vnode的创建耗时，渲染速度更快。
• 新版App渲染系统，依然是基于原生渲染管线，但渲染速度超过原生写法。

项目概述

本文基于爱影家（imovie）项目，介绍如何使用uni-app x技术栈在鸿蒙平台上实现tabBar底部导航栏。uni-app x是DCloud推出的新一代跨平台开发框架，支持将代码编译为多个平台的原生代码，包括：

  • Android平台：编译为Kotlin
  • iOS平台：编译为Swift
  • 鸿蒙Next平台：编译为ArkTS
  • Web和小程序平台：编译为JS

在Android平台，uni-app x的工程被整体编译为Kotlin代码，本质上是换了Vue写法的原生Kotlin应用，在性能上与原生Kotlin一致。

在这里插入图片描述

实现步骤

环境准备：

下载安装hbuilderx的当前最新版本4.87,下载链接：https://www.dcloud.io/hbuilderx.html
下载安装devStudio当前最新版本6.0.2，下载链接：https://developer.huawei.com/consumer/cn/develop/

1. 目录结构准备

打开hbuilderx的IDE,新建项目，选择第一个默认模板即可。注意一定要勾选下面的uniapp-x，这样生成的才是uniapp-x的项目工程。

在这里插入图片描述

以下是几个关键目录和文件：

  • pages/：存放应用页面
  • static/：存放静态资源，包括tabBar图标
  • pages.json：配置应用页面和tabBar
  • theme.json：配置主题变量

在本项目中，我们创建了以下目录结构：

pages/ └── tabBar/ ├── home.uvue # 首页 ├── zhihu.uvue # 日报页 └── mine.uvue # 我的页面 static/ ├── ic_tab_home.png # 首页默认图标 ├── ic_tab_active_home.png # 首页选中图标 ├── ic_tab_ribao.png # 日报默认图标 ├── ic_tab_ribao_active.png # 日报选中图标 ├── ic_tab_me.png # 我的默认图标 └── ic_tab_active_me.png # 我的选中图标

2. 配置pages.json

在pages.json文件中，我们需要配置应用页面和tabBar。uni-app x支持条件编译，可以为不同平台配置不同的tabBar参数。

页面配置

首先，在pages数组中定义应用的页面：

{"pages":[{"path":"pages/tabBar/home","style":{"navigationBarTitleText":"首页","backgroundColorContent":"@tabBarPagebackgroundColorContent"}},// #ifdef APP-ANDROID || APP-IOS || WEB || MP-WEIXIN || APP-HARMONY{"path":"pages/tabBar/zhihu","style":{"navigationBarTitleText":"日报","backgroundColorContent":"@tabBarPagebackgroundColorContent"}},// #endif// #ifdef APP-ANDROID || APP-IOS || WEB || MP-WEIXIN || APP-HARMONY{"path":"pages/tabBar/mine","style":{"navigationBarTitleText":"我的","backgroundColorContent":"@tabBarPagebackgroundColorContent"}}// #endif]}
tabBar配置

然后，在tabBar对象中配置底部导航栏。由于鸿蒙平台的特殊性，我们使用条件编译为鸿蒙平台单独配置：

// #ifndef APP-HARMONY"tabBar":{"color":"@tabBarColor","selectedColor":"@tabBarSelectedColor","borderStyle":"@tabBarBorderStyle","backgroundColor":"@tabBarBackgroundColor","list":[{"pagePath":"pages/tabBar/home","iconPath":"@tabBarHomeIconPath","selectedIconPath":"@tabBarHomeSelectedIconPath","text":"首页"},{"pagePath":"pages/tabBar/zhihu","iconPath":"@tabBarZhiHuIconPath","selectedIconPath":"@tabBarZhiHuSelectedIconPath","text":"日报"},{"pagePath":"pages/tabBar/mine","iconPath":"@tabBarMineIconPath","selectedIconPath":"@tabBarMineSelectedIconPath","text":"我的"}]},// #endif// #ifdef APP-HARMONY"tabBar":{"color":"@tabBarColor","selectedColor":"@tabBarSelectedColor","borderStyle":"@tabBarBorderStyle","backgroundColor":"@tabBarBackgroundColor","list":[{"pagePath":"pages/tabBar/home","iconPath":"static/ic_tab_home.png","selectedIconPath":"static/ic_tab_active_home.png","text":"首页"},{"pagePath":"pages/tabBar/zhihu","iconPath":"static/ic_tab_ribao.png","selectedIconPath":"static/ic_tab_ribao_active.png","text":"日报"},{"pagePath":"pages/tabBar/mine","iconPath":"static/ic_tab_me.png","selectedIconPath":"static/ic_tab_active_me.png","text":"我的"}]},// #endif

3. 配置theme.json

在theme.json文件中，我们定义了tabBar相关的主题变量，包括颜色、图标路径等：

{"light":{"navigationBarTextStyle":"white","navigationBarBackgroundColor":"#007AFF","backgroundColorContent":"#efeff4","tabBarPagebackgroundColorContent":"#efeff4","backgroundColor":"#efeff4","backgroundTextStyle":"dark","tabBarColor":"#7A7E83","tabBarSelectedColor":"#007AFF","tabBarBorderStyle":"black","tabBarBackgroundColor":"#F8F8F8","tabBarHomeIconPath":"static/ic_tab_home.png","tabBarHomeSelectedIconPath":"static/ic_tab_active_home.png","tabBarZhiHuIconPath":"static/ic_tab_ribao.png","tabBarZhiHuSelectedIconPath":"static/ic_tab_ribao_active.png","tabBarMineIconPath":"static/ic_tab_me.png","tabBarMineSelectedIconPath":"static/ic_tab_active_me.png"},"dark":{"navigationBarTextStyle":"white","navigationBarBackgroundColor":"#1F1F1F","backgroundColor":"#1F1F1F","backgroundColorContent":"#646464","tabBarPagebackgroundColorContent":"#1F1F1F","backgroundTextStyle":"light","tabBarColor":"#cacaca","tabBarSelectedColor":"#007AFF","tabBarBorderStyle":"white","tabBarBackgroundColor":"#1F1F1F","tabBarHomeIconPath":"static/ic_tab_home.png","tabBarHomeSelectedIconPath":"static/ic_tab_active_home.png","tabBarZhiHuIconPath":"static/ic_tab_ribao.png","tabBarZhiHuSelectedIconPath":"static/ic_tab_ribao_active.png","tabBarMineIconPath":"static/ic_tab_me.png","tabBarMineSelectedIconPath":"static/ic_tab_active_me.png"}}

这样，我们就可以在pages.json中使用@tabBarColor等变量来引用这些配置。

4. 创建页面文件

在pages/tabBar/目录下创建三个页面文件：

  • home.uvue：首页
  • zhihu.uvue：日报页
  • mine.uvue：我的页面

这些页面文件使用.uvue后缀，这是uni-app x的特有文件格式，支持Vue语法和原生能力。

技术要点

1. 条件编译

uni-app x支持条件编译，可以为不同平台编写不同的代码。在本项目中，我们使用条件编译为鸿蒙平台配置了专门的tabBar：

// #ifdef APP-HARMONY"tabBar":{// 鸿蒙平台特有的配置},// #endif

2. 主题变量

通过在theme.json中定义主题变量，我们可以实现统一的主题管理，并且支持浅色和深色模式：

  • tabBarColor：tabBar文字默认颜色
  • tabBarSelectedColor：tabBar文字选中颜色
  • tabBarBackgroundColor：tabBar背景颜色
  • tabBarBorderStyle：tabBar边框样式

3. 图标资源

tabBar图标资源放在static文件夹下，包括默认状态和选中状态的图标：

  • 默认图标：ic_tab_home.png、ic_tab_ribao.png、ic_tab_me.png
  • 选中图标：ic_tab_active_home.png、ic_tab_ribao_active.png、ic_tab_active_me.png

平台差异处理

鸿蒙平台

在鸿蒙平台上，uni-app x将代码编译为ArkTS，实现原生性能。我们为鸿蒙平台单独配置了tabBar，使用了直接的图标路径引用。

其他平台

在其他平台（Android、iOS、Web、小程序）上，我们使用了主题变量来引用图标路径，这样可以更方便地管理主题。

优势分析

使用uni-app x实现tabBar底部导航栏相比原生ArkUI开发有以下优势：

  1. 跨平台：一套代码可以在多个平台运行，包括鸿蒙、Android、iOS、Web和小程序
  2. 开发效率高：使用Vue语法，开发速度快，学习成本低
  3. 原生性能：编译为各平台的原生代码，性能与原生应用一致
  4. 配置简单：通过pages.json配置即可实现tabBar，无需编写复杂的原生代码
  5. 主题管理：支持通过theme.json统一管理主题，方便实现浅色/深色模式

体验与测试

不得不说，如今的uni-app x打包编译鸿蒙应用太方便了，竟不用再打开鸿蒙原生开发IDE工具devstudio来配置签名了，全部在HbuilerX的IDE中完成。且可以自动申请调试证书和自动签名，省去了其他繁琐的操作，很快可以运行在模拟器或者真机上。

本案例项目地址：https://gitcode.com/qq8864/uniappx_imovie

在这里插入图片描述


在这里插入图片描述


真机上运行效果截图：

在这里插入图片描述

总结

通过本文的介绍，我们了解了如何使用uni-app x在鸿蒙平台上实现tabBar底部导航栏。uni-app x提供了简洁的配置方式，通过pages.json和theme.json即可完成tabBar的配置，相比原生ArkUI开发更加简单高效。同时，uni-app x支持跨平台开发，一套代码可以在多个平台运行，大大提高了开发效率。

Read more

机器人坐标系详解

机器人坐标系详解

笔者虽然从事自动化工作十几年，但是对于机器人坐标系的理解始终是一知半解，最近认为吃透了坐标系的事，和广大同仁分享一下。 工业机器人的坐标系的五个坐标系：1、世界坐标系；2、机器人足部坐标系；3、基坐标系；4、法兰坐标系；5、工具坐标系 这五个坐标系是工业机器人空间位置和姿态的数学基础。可以把它们想象成一套从宏观到微观的定位系统。 为了让你更直观地理解，可以把整个机器人工作站想象成一个房间，把机器人想象成人的手臂。以下是详细的解释： 1. 世界坐标系 —— 房间的地标 * 定义：这是一个固定不变的绝对坐标系，通常定义在整个工作站（房间）的某个角落。 * 用途：用来描述房间里所有东西的绝对位置。比如：机器人站在哪里、传送带放在哪里、工件放在哪里，都是相对于世界坐标系的。 * 理解：它相当于你房间里的经纬度或者墙角。无论你怎么移动，这个点的位置是固定不变的。 2. 机器人足部坐标系 —— 机器人脚下的地 * 定义：这是一个位于机器人安装底座正下方的坐标系。通常Z轴垂直向上，指向机器人的身体。 * 用途：在安装机器人时，我们需要把机器人足部坐标系校准到世界坐标系中去。

Qwen-Turbo-BF16文旅融合应用：AR导览配图/非遗技艺步骤图/数字藏品底图生成

Qwen-Turbo-BF16文旅融合应用：AR导览配图/非遗技艺步骤图/数字藏品底图生成 1. 系统概述与核心优势 Qwen-Turbo-BF16是一款专为现代高性能显卡优化的图像生成系统，基于Qwen-Image-2512底座模型和Wuli-Art Turbo LoRA技术构建。该系统通过BFloat16（BF16）全链路推理技术，彻底解决了传统FP16精度在图像生成过程中常见的"黑图"和"色彩溢出"问题。 在文旅融合应用场景中，这个系统展现出独特价值。无论是AR导览所需的场景配图、非遗技艺的步骤分解图，还是数字藏品的底图创作，都能在保持高质量输出的同时，实现秒级生成速度。系统专门针对RTX 4090等现代显卡优化，在16位精度下提供媲美32位精度的色彩表现范围。 2. 文旅场景应用实践 2.1 AR导览配图生成 AR导览应用需要大量场景配图来增强用户体验。传统方式需要摄影师实地拍摄，成本高且效率低。使用Qwen-Turbo-BF16，只需输入场景描述，就能快速生成高质量的导览配图。 实际操作示例： # AR导览配图生成提示词示例" 古代建筑内部场景，宏伟的宫殿
RS485收发器在FPGA中的应用及注意事项

RS485收发器在FPGA中的应用及注意事项

1 前言 明确设计思路，精准定位问题，对于我们后期理解迭代工程有很大的帮助。 这就是我们常说的40%设计，20%编写和剩下的40%时间进行调试优化。 今天为大家带来的是如何解决RS485收发器使能转变引起的毛刺。 2 问题 Q1：什么时候需要用到RS485收发器？ Q2：为何RS485收发器使能转变会引起毛刺？ Q3：如何处理毛刺规避FPGA时序判断？ 3 RS485收发器 3.1 硬件基础 3.1.1 标准收发器 RS485收发器是一类集成电路芯片，它的核心作用是在微控制器（如FPGA、MCU）的逻辑电平（如TTL电平，通常是0V/3.3V或0V/5V）与RS485差分信号之间进行双向转换。大多数RS485收发器还具备使能控制引脚（DE或RE），允许主控芯片灵活地切换其工作模式——发送或接收，从而支持半双工通信架构。 在实际应用中，微控制器输出的信号属于低电压、低电流的逻辑电平，适合短距离、高精度的内部电路通信，但无法直接用于长距离传输，

米家API完全指南：轻松掌控智能家居生态系统

米家API完全指南：轻松掌控智能家居生态系统 【免费下载链接】mijia-api米家API 项目地址: https://gitcode.com/gh_mirrors/mi/mijia-api 米家API是一个功能强大的Python工具库，让开发者和普通用户都能轻松控制小米智能设备。通过封装复杂的网络通信协议，您只需几行代码即可实现设备远程操控、状态监测和场景自动化，打造专属的智能家居体验。 🌟 米家API的核心优势 简单易用：无需深入了解底层技术细节，初学者也能快速上手 功能全面：支持设备发现、属性设置、动作执行等核心操作 兼容性强：适配米家生态链中的各类智能设备 扩展灵活：提供丰富的API接口，满足个性化开发需求 🚀 三分钟快速上手 第一步：安装米家API 推荐方式：通过PyPI安装 pip install mijiaAPI 备选方案：从源码构建 git clone https://gitcode.com/gh_mirrors/mi/mijia-api