OpenHarmony基于BearPi-HM Micro开发板，App常用组件使用 -- 上篇

OpenHarmony App开发：BearPi-HM Micro上的UI组件实战
已于 2023-03-24 20:50:58 修改
阅读量825 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 入门实战OpenHarmony物联网 文章标签： 前端 harmonyos 物联网 javascript OpenHarmony
于 2023-03-23 21:36:53 首次发布
本文为博主原创文章，未经博主允许禁止转载。如有问题，欢迎指正。
本文链接：https://blog.youkuaiyun.com/logicsboy/article/details/129738094
本文详细介绍了在OpenHarmony系统中，针对BearPi-HM Micro开发板进行App开发时，如何使用常见的UI组件，包括text、image、progress、marquee、canvas、button、checkbox、radio、slider和switch。这些组件对于构建具有可视化交互界面的应用至关重要。

一、前言

BearPi-HM Micro开发板，目前只能使用JS开发北向App应用，我们核心应该关注的是系统源码C/C++

因为BearPi-HM Micro开发板是有可视化交互界面的，所以我们需要知道常用的UI组件方便我们编写UI界面。

建议先学习下面2篇文章：

1、OpenHarmony 快速上手 BearPi-HM Micro 一个带显示屏的开发板

2、OpenHarmony开发一个App，安装到BearPi-HM Micro开发板

有了上面的知识储备，我们来看看如何常用的UI组件有哪些。

二、目录介绍

基于JS扩展的类Web开发范式，类似vue或者微信小程序的模式

<
了解本专栏 订阅专栏 解锁全文
OpenHarmony 快速上手 BearPi-HM Micro 一个带显示屏的开发板
Halifax
01-05 961
快速入门并掌握如何使用BearPi-HM Micro显示屏开发板，并成功烧录系统源码，并教大家如何安装一个Hap包
OpenHarmony基于BearPi-HM Micro开发板，App常用组件使用 -- 下篇
Halifax
03-24 497
我们在文章中介绍了10种常用的组件，本篇我们把剩余的常用组件全部介绍完。
BearPi-HM Micro 鸿蒙应用开发体验
switch_love_case
02-10 6103
这是在去年小熊派开发的一款开发板（核心STM32MP157），我之前也花了一些时间来学习开发了一个应用。包含南向各种外设驱动的开发和北向hap APP的开发，最终实现了自己的构想。（之前没有时间记录，今天简单记录总结） 南向开发功能如下： 板载陀螺仪驱动（实现开发板倾斜角检测） E53IA1 温湿度传感器驱动 E53IA1 光照传感器驱动 E53IA1 电机控制 北向开发Hap应用实现的功能： 动画实现、温湿度数据显示，传感器状态实时更新，包含了动画、定时器、布局的使用以及触摸对应传感器实现手
鸿蒙设备学习|初识BearPi-HM Micro开发板
君莫笑的博客
02-07 2030
BearPi-HM Micro开发板是一块高度集成并可运行Openharmony系统的开发板，板载高性能的工业级处理器STM32MP157芯片，搭配4.3寸LCD电容式触摸屏，并板载wifi电路及标准的E53接口，标准的E53接口可扩展智能加湿器、智能台灯、智能安防、智能烟感等案例。
在小熊派BearPi-HM_Micro_small开发板上安装HAP
随遇而安的dandelion的博客
09-02 1467
本文介绍如何在小熊派BearPi-HM_Micro_small开发板上安装HAP。
OpenHarmony APP开发基础
随遇而安的dandelion的博客
08-31 2898
本文从OpenHarmony应用包的结构、Ability开发、UI开发、OpenHarmony应用工程的目录结构和编程语言这五个方面对从事OpenHarmony应用开发所需要具备的基础知识进行了梳理。
小熊派·叔BearPi-HM Micro环境搭建（双系统）
secret125的博客
04-04 3850
强烈建议用Ubuntu搭建，少很多事（3，4，5） 1.资源下载：
BearPi-HM Micro开发板：高性能OpenHarmony系统开发板介绍
在文件名称列表中，'bearpi-hm_micro_app-master'可能指代了与BearPi-HM Micro开发板相关的应用程序或项目源代码的主目录，这可能包含用于开发和测试OpenHarmony应用程序的源代码、文档、示例以及构建脚本等。...
BearPi-HM Micro App showCase全部示例
03-24
【标题】：“BearPi-HM Micro App showCase全部示例”是针对BearPi-HM开发板上运行的OpenHarmony操作系统的一系列JavaScript应用实例。这些示例旨在帮助开发者理解和掌握如何利用JavaScript语言在HarmonyOS平台上...
OpenHarmony（鸿蒙南向开发）——小型系统STM32MP1芯片移植案例
maniuT的博客
08-01 1259
本文章基于意法半导体STM32MP157芯片的小熊派BearPi-HM Micro开发板，进行小型带屏开发板的移植，实现了ace_engine_lite、arkui_ui_lite、aafwk_lite、appexecfwk_lite、HDF等部件基于OpenHarmony LiteOS-A内核的适配。移植架构上采用Board与SoC分离的方案。
OpenHarmony轻量系统--BearPi-Nano开发板网络程序测试
91创客学堂
05-14 1049
本文介绍RISC-V架构海思Hi3861开发板，通过Linux开发环境运行OpenHarmony轻量化系统，下载测试网络例程的过程与步骤。
【小熊派bearpi】HarmonyOS设备开发上手
weixin_43810563的博客
04-13 1679
  本文主要是记录基于小熊派的openHarmonyOS的组件包开发hi3861的过程，板子还没到，开发环境已经搭建好，先总结一部分，后面板子到了再补充测试部分。华为官网快速入门入口。小熊派的工作人员已经将linux的环境搭建好，提供了一个linux镜像，可以为开发者减少linux开发环境的负担，参考小熊派十分钟快速入门 一、Hi3861LV100介绍   Hi3861LV100是一款高度集成的2.4GHz 低功耗SoC WiFi芯片，集成IEEE 802.11b/g/n基带和RF电路，RF电路包括功率放大
（OpenHarmony）小熊派BearPi开发板北向添加JS自定义接口流程（以点亮LED为例）
weixin_51914472的博客
02-18 1005
【FFH】小熊派北向添加JS自定义接口流程（以点亮LED为例）引言相关概念1.创建工程文件2.添加接口定义3.编写页面代码4.编辑JS代码导入系统接口文件编写相关功能函数5.打包成hap包并部署到开发板上最终成果展示 引言 ​ 通常我们做鸿蒙北向应用开发的时候是没法调用开发环境中未提供的接口的，而我们也知道鸿蒙开发是分北向和南向的，那么我们如何才能调用南向写好的设备驱动呢？ ​ 这里我们就用一个小熊派开发板控制LED的案例来了解一下，南向那边写好LED驱动后，他们还会自定义一个JS的API接口去调用他们开发
ruoyi集成camunda实现bpmn在线设计器
xrl2012的专栏
12-03 322
摘要： 本文介绍了如何在RuoYi-Vue2前端集成Camunda BPMN在线设计器，实现流程建模功能。通过npm安装bpmn-js等依赖包，配置vue.config.js解决转译和别名问题，并提供了测试页面代码示例。页面包含导入/导出XML/SVG、流程检查、部署等功能，支持BPMN流程设计器的初始化和基本操作。环境要求包括JDK 1.8+、MySQL 5.7+、Node 23+等。完整方案可参考若依工作流。
【前端知识】从前端请求到后端返回：Gzip压缩全链路配置指南
wendao76的专栏
12-03 617
本文详细介绍了Gzip压缩的全链路配置流程，从前端请求到后端返回的完整实现方案。前端需通过Accept-Encoding: gzip声明支持压缩，后端根据请求头、响应类型和大小判断是否压缩，并返回Content-Encoding: gzip响应头。文章提供了浏览器、JavaScript、命令行工具等多种前端场景的配置示例，以及Nginx、Apache、Node.js和Spring Boot等主流后端技术的Gzip配置方法。通过合理配置Gzip压缩，可显著减少网络传输数据量，提升Web应用性能。
openEuler + Nginx 高性能 Web 服务深度评测
最新发布
笃行其道的博客
12-03 773
本文介绍了在openEuler操作系统上部署Nginx集群的性能测试方案。通过优化内核参数、资源限制和系统调优，在32核64GB环境的华为云实例上进行八大维度的压测：静态文件服务测试显示小文件QPS达23万+，大文件传输速率13.97GB/s；反向代理性能测试QPS23万；HTTPS测试降幅仅16%；长连接测试QPS8.6万；压缩测试显示99%压缩率；极限测试支撑10万+并发。测试结果表明，openEuler的网络/I/O优化与Nginx事件驱动架构完美结合，CPU利用率96%且内存占用<10%，延迟
如何在Vue3中使用组合式API？
只会写bug
12-02 948
Vue3组合式API通过<script setup>语法糖简化开发流程，无需手动导出组件。核心特性包括：使用ref处理基本类型响应式数据，reactive处理对象/数组，toRefs保持解构响应式。生命周期钩子如onMounted需按需导入，计算属性computed用于派生值，方法直接定义即可在模板调用。这些特性使代码更集中、复用更灵活，适合现代前端开发需求。
WebRTC 核心技术:P2P 打洞原理
yk_18的博客
12-03 581
P2P打洞技术是WebRTC实现点对点直连的关键，它通过巧妙利用STUN服务器"欺骗"NAT设备。当两台设备处于不同内网时，首先通过公网服务器交换地址信息，然后互相发送UDP包建立NAT映射关系。虽然UDP打洞在锥型NAT下效果良好，但对称型NAT需要降级使用TURN服务器中转。保持连接需要定期发送心跳包防止NAT映射过期。理解这一底层原理有助于解决WebRTC连接中的各类异常问题。
【技术分享】前端跨窗口/标签页面通信：掌握以下几种方法，提升用户体验（附带常用场景以及典例）
qq_45796592的博客
11-29 997
本文介绍了前端跨标签页通信的7种实现方法及其适用场景。文章通过具体代码示例以及典例，帮助开发者根据实际需求选择最适合的跨标签通信方案，提升应用性能和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Halifax ‎

交个朋友

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值