断点鸿蒙提供断点以应用窗口宽度为切入点，将应用窗口在宽度维度上分成了几个不同的区间即不同的断点，不同设备会进入到不同的断点区间，在不同的区间下，我们可以可根据需要实现不同的页面布局效果。具体的断点对应的设备尺寸如下所示。 断点名称取值范围（vp）xs[0, 320）sm[320, 600)md[600, 840)lg[840, +∞)媒体查询媒体查询支持监听窗口宽度、横竖屏、深浅色、设备类型等多种媒体特征，当媒体特征发生改变时同步调整页面布局。我们可以借助媒体查询能力，监听断点的变化。栅格布局栅格组件默认提供xs、sm、md、lg四个断点，除了默认的四个断点，还支持启用 xl 和 xxl 两个...

关键词：harmonyOS 鸿蒙开发 ArkTS TabContent使用场景：类微信底部导航栏，点击/左右滑动切换页面并加载数据开发环境：ArkTS3.1 API9 Phone设备HMOS Dev官方文档：文档中心演示效果：点击并拖拽以移动​编辑目录完整Demo已提交至Gitee搭建页面自定义TabContent（往后翻有完整代码）思路开始完整自定义tabs代码页面切换后如何加载新数据介绍父子组件解释开始页面切换时可加载新数据的完整代码完整Demo已提交至Gitee，传送门：鸿蒙ArkTS tabBar页签切换Demo: HarmonyOS鸿蒙ArkTS tabBar页签切换完整项目Demo...

​  关键词：鸿蒙、ArkTs、Web组件、通讯、数据 官方文档Web组件用法介绍：文档中心 Web 组件加载沙箱中页面可参考我的另一篇文章：【HarmonyOS NEXT】 如何将rawfile中文件复制到沙箱中_鸿蒙rawfile 复制到沙箱-CSDN博客 目录 如何在鸿蒙应用中加载一个Web页面 一、加载网络地址页面 二、加载本地H5页面 实现Web组件H5层与应用层进行相互通讯 一、鸿蒙应用向H5页面发送数据 鸿蒙侧 H5侧 案例效果 二、H5页面向鸿蒙应用发送数据（附代码） H5侧 （附代码） 鸿蒙侧（附代码） 案例效果 如何在鸿蒙应用中加载一个Web页面 一、加载网络地址页面...

​  关键词：受限开放权限、ACL、鸿蒙 在鸿蒙应用开发过程中，部分权限被受到限制（如悬浮窗开发、读取联系人数据、读取公共目录音频文件等权限），但是在我们的应用开发过程中又不得不使用该权限时可向华为申请受限权限，本期将介绍如何申请受限权限并完成开发配置。 需要注意的是：应用/元服务在上架华为应用市场时，华为应用市场会严格审核包含ACL（受限）权限的应用/元服务，不符合要求的应用/元服务将无法上架应用市场。因此，建议优先使用系统提供的替代技术方案，如系统Picker或安全控件。 目录 第一步：AGC 平台创建项目 第二步：AGC 平台创建 APP ID 第三步：生成应用证书 p12 与签名文件 ...

​  关键词：一多、响应式、媒体查询、栅格布局、断点、UI 随着设备形态的逐渐增多，应用界面适配也面临着很大问题，在以往的安卓应用开发过程中，往往需要重新开发一套适用于大屏展示的应用，耗时又耗力，而鸿蒙提供响应式开发的解决方案，提供系统级的接口供开发者调用，从而使得一款应用一套代码能同时运行在不同形态的设备上，也能给用户带来很好的交互体验。 ​编辑 本期文章以轮播图、Tab栏、列表为例，配合栅格布局与媒体查询，进行 UI 的一多开发。 本期完整代码已提交至gitee：one2More: 【HarmonyOS NEXT】一次开发多端部署（以轮播图、Tab栏、列表为例，配合栅格布局与媒体查询，进...

​ 关键词：嵌套对象、类型、递归、未知类型 目录 使用 Record 与 ESObject 定义未知对象类型 递归打印未知类型对象的key 在鸿蒙应用开发中，所有的数据都必须定义类型，且不存在 any 类型，那么我们当遇到 key 值可能随时变化的情况时，如何获取该 object 中每一个 key 对应的数据呢？ 本期以如下 object 为例，下方对象报文可能会根据使用时间或服务商的变化，"153" 字段可能会变成 "278" 等未知字符串、"5G" 字段可能会变成 "4G"，那么当 key 值不断变化的同时应...

​  关键词：折叠屏、navigation、router、路由、分栏、UI 随着科技的发展，手机设备形态也由一面屏向多面屏进行发展，那么软件的UI适配也面临着问题，本篇文章主要解决大屏设备的页面 UI 适配问题，如折叠屏，平板，若不想单独对页面 UI 进行大屏设备的响应式布局的开发，那么可使用官方提供的 navigation 跳转方式，对页面进行分栏展示，从而确保应用能给用户提供良好的 UI 交互，避免出现 “大号APP” 的问题。 本期文章以双折叠屏设备为例，使用 navigation 对页面进行动态分栏跳转及自定义 router 的封装与开发改造。需要注意的是，使用 Navigation ...

​  关键词：鸿蒙、程序访问控制、定位、应用详情页、startability、want 在app开发过程中，常进行系统权限的申请以提供设备访问或个性化功能（如扫一扫、城市定位、剪贴板等），从而保障应用功能的完整性，那么本期文章将以获取定位信息为例从①用户首次拒绝授权，②用户使用期间取消定位授权，③系统定位未开启 3 个方面介绍应用如何申请系统权限与引导用户授权，结尾附其他常用设置页跳转 URI 。 本期完整Demo已提交至Gitee：https://gitee.com/luvi/request-permission 目录 拉起授权弹窗 拒绝权限或途中取消授权 打开应用设置 系统功能未开启 ...

​ 关键词：鸿蒙、水印、Watermark、页面、触摸问题 注：本期文章同样适用 OpenHarmony 的开发 在app开发过程中时常会出现敏感信息页面，为保护信息安全和及时的数据追踪，通常会采用给页面加水印的形式，那么本期文章会介绍如何在鸿蒙应用中实现页面水印的功能。 本期文章代码比较简单，核心逻辑为 ①对触摸事件的穿透控制，②组件 .overlay() 浮层的使用，可自行修改 Watermark() 构建函数代码调整至自己业务所适合的样式。 触摸测试控制可参考官方文档：文档中心 效果如下： 完整代码： 如下代码使用 Canvas 画布绘制水印，计算当前屏幕展示水印个体个数进行渲染。当...

关键词：CuntomDialog自定义弹窗、SubWindow子窗口、页面级、弹窗层级控制、鸿蒙、弹窗展示层级异常 注：本期文章同样适用 OpenHarmony 的开发 问题存在API版本：API10 - API12（该问题已反馈，期望后续官方能增加页面级控制能力） 在正常的鸿蒙app开发过程中，时常会加载一些弹窗内容，比如隐私政策弹窗、新手引导弹窗、营销广告弹窗等。那么我们会选择使用 CuntomDialog 或创建 SubWindow 的形式去展示出我们的弹窗，但是目前鸿蒙的弹窗存在 2 个问题： ①弹窗无法保持在目标页面的问题：鸿蒙中自定义弹窗或子窗口由于展示优先级高于其他组件，则会出现...

关键词：audio、音频录制、音频播放、权限申请、文件管理 注：本期文章同样适用 OpenHarmony 的开发 在app的开发过程中时常会遇见一些需要播放一段音频或进行语音录制的场景，那么本期将介绍如何利用鸿蒙 audio 模块实现音频写入和播放的功能。本次依赖的是 ohos.multimedia.audio 音频管理模块，核心逻辑为利用 AudioCapturer  创建音频采集器收集音频并写入文件至沙箱，利用 AudioRenderer 播放沙箱中写入的音频文件，确定目标那么开始。 本期文章的完整demo代码已经提交至Gitee：​​https://gitee.com/luvi/sou...

关键词：h5离线包加载、h5离线包更新、沙箱 注：本期文章同样适用 OpenHarmony 的开发 在上一篇文章中，我们已经介绍了如何将 rawfile 资源文件中的文件数据拷贝到沙箱下，那么该篇文章将介绍如何加载该沙箱目录下的文件资源（此处以打包后的web资源为例），用webview加载出页面，并实现在线获取新包更新web页面的效果。 如何将rawfile中文件拷贝到沙箱中，可参考我的上一篇文章：​​HarmonyOS/OpenHarmony 如何将rawfile中文件复制到沙箱中​​ 该片文章首先需要介绍我这边准备的 ohosInteractive.zip 离线包，该离线包中仅存放了一...

目录 常用布局 线性布局（Row/Column） 层叠布局（Stack） 弹性布局（Flex） 相对布局（RelativeContainer） 栅格布局（GridRow/GridCol） 列表（List） 创建网格（Grid/GridItem） 轮播（Swiper） 常用组件 按钮（Button） 单选框（Radio） 切换按钮（Toggle） 进度条（Progress） 文本组件（Text/Span） 文本输入（TextInput/TextArea） 自定义弹窗（CustomDialog） 图片（Image） Web组件 常用布局 官方文档：​​文档中心​​ 线性布局（Row/Colu...

关键词：HarmonyOS、鸿蒙、ArkTs、JSEncrypt、加密、第三方库 harmonyOS因起步问题支持的第三方库文件较少。使用npm install 安装的插件无法正常使用，导致无法使用更多的第三方库完成自己的需求，当然我们也可以使用一些另类的方法去强行使用这些第三方库。 JSEncrypt_3.3.2工具类已提交至Gitee：​​luvi/jsencrypt3.3.2​​ 开始 将下载的JSEncrypt node_moudules代码拷贝出来，翻阅作者的代码，找出导出了我们所需要用到的依赖文件，打开代码很容易就找到了我们所需的东西  或 如何使用在项目里 在项目中新建uti...