鸿蒙OS开发：【一次开发，多端部署】（多设备自适应能力）实例

最新推荐文章于 2024-06-02 21:50:52 发布
最新推荐文章于 2024-06-02 21:50:52 发布
阅读量614 收藏 8
点赞数 22
分类专栏： 鸿蒙开发 文章标签： harmonyos openharmony 移动开发 鸿蒙 鸿蒙系统 鸿蒙开发 一多
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70748845/article/details/139049117
版权

多设备自适应能力

介绍

此Demo展示在JS中的多设备自适应能力，包括资源限定词、原子布局和响应式布局。

效果预览

image.png

使用说明

1.本示例中的资源限定词和响应式布局针对常见设备类型做了适配，可以在预览器中开启"Multi-profile preview"进行多设备预览。

2.本示例中的原子布局提供了滑动条（slider），通过拖动滑动条更改父容器尺寸可以更直观的查看原子布局的效果。为了突出重点以及易于理解，此部分的代码做了一定精简，建议通过IDE预置的MatePadPro预览器查看此部分效果。

3.启动应用，首页展示了资源限定词、原子布局和响应式布局三个按钮。

4.点击资源限定词进入新界面，展示字符串和图片资源的使用。

5.点击原子布局进入新界面，分别展示原子布局的拉伸能力、缩放能力、隐藏能力、折行能力、均分能力、占比能力、延伸能力。

6.点击响应式布局进入新界面，展示媒体查询、栅格布局、典型场景三类响应式布局能力。

开发前请熟悉鸿蒙开发指导文档：gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

相关概念

资源限定与访问：资源限定词可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括屏幕密度等维度，限定词之间通过中划线（-）连接，开发者在resources目录下创建限定词文件。
原子布局：在屏幕形态和规格不同等情况下，布局效果需要实现自适应，因此系统提供了面向不同屏幕尺寸界面自适应适配的布局能力，称为原子布局。
响应式布局：通过使用响应式布局能力开发新应用或者改造已有应用，可以使应用在手机、平板、智慧屏等各种尺寸的设备都有良好的展示效果。

工程目录

code/SuperFeature/MultiDeviceAppDev/JsAdaptiveCapabilities
└─src
    └─main
        ├─js
        │  └─MainAbility
        │      ├─common                            //公共资源包
        │      ├─i18n                              //国际化语言包
        │      ├─pages
        │      │  ├─atomicLayoutCapability         //原子布局
        │      │  │  ├─equipartitionCapability     //均分能力
        │      │  │  ├─extensionCapability
        │      │  │  │  ├─extensionCapability1     //延伸能力1
        │      │  │  │  └─extensionCapability2     //延伸能力2
        │      │  │  ├─flexibleCapability         
        │      │  │  │  ├─flexibleCapability1      //拉伸能力1
        │      │  │  │  └─flexibleCapability2      //拉伸能力2
        │      │  │  ├─hiddenCapability            //隐藏能力
        │      │  │  ├─index                       //原子布局首页
        │      │  │  ├─proportionCapability        //均分能力
        │      │  │  ├─scaleCapability             //均分能力
        │      │  │  └─wrapCapability              //折行能力
        │      │  ├─index                          //主页
        │      │  └─resourceQualifier              //资源限定注入
        │      │      └─responsiveLayout           //响应式布局
        │      │          ├─gridContainer          //网格容器
        │      │          ├─index                  //响应布局首页
        │      │          ├─mediaQuery             //媒体查询
        │      │          └─typicalScene           //典型布局
        │      └─resources                         //限定词资源
        └─resources                                //公共资源     
        

`HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿`

搜狗高速浏览器截图20240326151450.png

具体实现

1、index下定义三个box，分别资源限定词resourceQualifier、原子布局atomicLayoutCapability、响应式布局responsiveLayout，并通过onclick路由到各自的组件。
2、资源限定词组件： 在MainAbility.resource下定义需要访问的资源，在资源限定词resourceQualifier组件中，使用$r(‘’)即可实现不同形态和规格访问到不同的资源。
3、原子布局atomicLayoutCapability组件：该布局下，通过slide滑动控制样式的展示比率rate,例如下面这个样例，[源码参考]。

<!--

 Copyright (c) 2022 Huawei Device Co., Ltd.

 Licensed under the Apache License, Version 2.0 (the "License");

 you may not use this file except in compliance with the License.

 You may obtain a copy of the License at



     http://www.apache.org/licenses/LICENSE-2.0



 Unless required by applicable law or agreed to in writing, software

 distributed under the License is distributed on an "AS IS" BASIS,

 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 See the License for the specific language governing permissions and

 limitations under the License.

 -->



<element name="NavigationBar" src="common/components/navigationBar/navigationBar"></element>

<div class="container">

  <Navigationbar title="{{ title }}"></Navigationbar>

  <div class="box" style="width : {{ rate }};">

    <div class="box-mid" style="width : {{ rate }};">

      <div for="list" class="box-small">

        <image src="common/image/icon.png"></image>

        <text>App name</text>

      </div>

    </div>

  </div>

  <slider class="slider" min="40" max="75" value="{{ value }}" onchange="setValue"></slider>

</div>

4、响应式布局responsiveLayout ：该布局下需要相对应的媒体资源，比如sm、md、lg，然后监听媒体的变化，从而对资源进行响应式的调整。 例如栅格布局，[源码参考]

<!--

 Copyright (c) 2022 Huawei Device Co., Ltd.

 Licensed under the Apache License, Version 2.0 (the "License");

 you may not use this file except in compliance with the License.

 You may obtain a copy of the License at



     http://www.apache.org/licenses/LICENSE-2.0



 Unless required by applicable law or agreed to in writing, software

 distributed under the License is distributed on an "AS IS" BASIS,

 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 See the License for the specific language governing permissions and

 limitations under the License.

 -->



<element name="NavigationBar" src="common/components/navigationBar/navigationBar"></element>

<div class="container">

  <Navigationbar title="{{ title }}"></Navigationbar>

  <grid-container style="background-color : #F1F3F5; margin-top : 10vp;">

    <grid-row style="height : 200px; justify-content : space-around; width : 100%;">

      <grid-col xs="1" sm="1" md="1" lg="2" style="background-color : #66BBB2CB;">

        <div style="align-items : center; height : 100%;">

          <text>{{ $t("strings.left") }}</text>

        </div>

      </grid-col>

      <grid-col xs="1" sm="2" md="5" lg="7" style="background-color : #66B6C5D1;">

        <div style="align-items : center; height : 100%;">

          <text>{{ $t("strings.center") }}</text>

        </div>

      </grid-col>

      <grid-col xs="1" sm="1" md="2" lg="3" style="background-color : #66BBB2CB;">

        <div style="align-items : center; height : 100%;">

          <text>{{ $t("strings.right") }}</text>

        </div>

      </grid-col>

    </grid-row>

  </grid-container>

</div>

本案例定义了xs、sm、md、lg下的栅格宽度，根据系统的规格自动选择相应的属性。
5、使用mediaQuery对规格进行监听，判断当前系统的横竖屏，从而加载相应的资源，[源码参考]。

<!--

 Copyright (c) 2022 Huawei Device Co., Ltd.

 Licensed under the Apache License, Version 2.0 (the "License");

 you may not use this file except in compliance with the License.

 You may obtain a copy of the License at



     http://www.apache.org/licenses/LICENSE-2.0



 Unless required by applicable law or agreed to in writing, software

 distributed under the License is distributed on an "AS IS" BASIS,

 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 See the License for the specific language governing permissions and

 limitations under the License.

 -->



<element name="NavigationBar" src="common/components/navigationBar/navigationBar"></element>

<div class="container-big">

  <Navigationbar title="{{ title }}"></Navigationbar>

  <div class="container1">

    <image if="{{ isLandscape }}" style="height : 100vp; width : 100vp" src="common/image/tablet.png"></image>

    <image else style="height : 100vp; width : 100vp" src="common/image/phone.png"></image>

    <text class="text" style="font-size : 24vp;">{{ text }}</text>

  </div>

</div>
移动开发技术栈
关注
  • 22
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MANFIS_S:一种新的多自适应神经模糊推理系统-matlab开发
06-01
实现MANFIS-S MANFIS的新升级，具有代表性的5个数据集学生学业成绩预测集
微信小程序图片自适应支持多图实例详解
08-30
主要介绍了微信小程序图片自适应支持多图实例详解的相关资料,需要的朋友可以参考下
鸿蒙一次开发，多端部署（二）从一个例子开始
1
03-21 895
本章通过一个天气应用，介绍一多应用的整体开发过程，包括UX设计、工程管理及调试、页面开发等。
鸿蒙一次开发，多端部署（九）应用市场首页
1
03-22 1161
本小节将以应用市场首页为例，介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。
鸿蒙OS开发：【一次开发，多端部署】（app市场首页）
m0_70748845的博客
05-23 595
本小节将以应用市场首页为例，介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。
鸿蒙OS开发：典型页面场景【一次开发，多端部署】（常见问题）
m0_70748845的博客
05-28 754
设备类型分为default（默认设备）、tablet、tv、wearable、2in1等，有多种查询设备类型的方式。通过命令行的方式查询设备类型。通过命令行查询指定系统参数（const.product.devicetype）进而确定设备类型。在应用开发过程中查询设备类型。通过deviceInfo查询设备类型。
鸿蒙OS开发：典型页面场景【一次开发，多端部署】（短信）案例介绍
m0_70748845的博客
05-28 1267
本章从系统预置的应用中，选择短信应用作为典型的案例，从页面开发和工程结构的角度，介绍"一多"的具体实践。系统的产品形态在不断丰富中，当前主要有默认设备和平板两种产品形态，本章的具体实践也将围绕这两种产品形态展开。
浅析：HarmonyOS 一次开发多端部署
m0_62167422的博客
01-21 1425
万物互联时代，应用的设备底座将从几十亿手机扩展到数百亿设备。全新的全场景设备体验，正深入改变消费者的使用习惯， 同时应用开发者也面临设备底座从手机单设备到全场景多设备的转变，通过全场景多设备作为全新的底座，为消费者带来万物互联时代更为高效澝便捷的体验。新的场景同时也带来了新的挑战澞开发者不仅要支持更加多样化的设备，还要支持跨设备的协作。不同设备类型意味着不同的传感器能力、硬件能力、屏幕尺寸、操作系统和开发语言，还意味着差异化的交互方式。
HarmonyOS开发案例：【一次开发，多端部署（视频应用）】
m0_70748845的博客
05-11 629
随着智能设备类型的不断丰富，用户可以在不同的设备上享受同样的服务，但由于设备形态不尽相同，开发者往往需要针对具体设备修改或重构代码，以实现功能完整性和界面美观性的统一。OpenHarmony为开发者提供了“一次开发，多端部署”的系统能力，让开发者可以基于一次开发，快速构建不同类型终端上的应用，降低开发成本，提高开发效率。本篇Codelab基于“一次开发，多端部署”提供的自适应布局和响应式布局能力，实现了常见的视频播放应用的主界面。
鸿蒙一次开发，多端部署（十四）一多开发实例（短信）
1
03-23 922
本章从系统预置的应用中，选择短信应用作为典型的案例，从页面开发和工程结构的角度，介绍"一多"的具体实践。系统的产品形态在不断丰富中，当前主要有默认设备和平板两种产品形态，本章的具体实践也将围绕这两种产品形态展开。
《自适应软件开发》
02-04
现代科学的软件管理让软件开发变成“软件工厂”，其中的人就像一个被催眠了的机器人，我被定义成一个部件，一个资源，任凭别人的调度和摆布。没有想法，机械地在一个生产线上执行着已被他人安排好的流程和工作，我的...
(自适应手机端)响应式网站建设软件开发小程序开发类网站pbootcms模板
07-14
(自适应手机端)响应式网站建设软件开发小程序开发类网站pbootcms模板
【HarmonyOS】View点击穿透，层叠View点击事件控制
我的小窝
05-28 482
harmonyos 层叠view 点击事件处理
鸿蒙OS 路由跳转
程序员—威廉
05-22 383
2. **调用`Router`对象的`replace`或`push`方法**：在需要执行跳转的地方，调用`Router`对象的`replace`或`push`方法，并传入目标页面的路由路径。3. **使用`AbilitySlice`的`start`方法**：在自定义组件中，可以使用`AbilitySlice`的`start`方法来启动一个新的页面。1. **使用`@Route`装饰器**：在需要跳转的页面上添加`@Route`装饰器，并指定一个唯一的路由路径。）中定义路由路径，并指定参数。
HarmonyOS-9(stage模式)
xueyoubangbang的博客
05-29 250
【代码】HarmonyOS-9(stage模式)
装饰器，状态管理和if判断（HarmonyOS学习第六课）
最新发布
qq_58213084的博客
06-02 785
语法的定义使用方法全局的自定义构建函数可以被整个应用获取，不允许使用this和bind方法。如果不涉及组件状态变化，建议使用全局的自定义构建方法在前文的描述中，我们构建的页面多为静态界面。如果希望构建一个动态的、有交互的界面，就需要引入“状态”的概念在本章节开始的案例中，用户与应用程序的交互触发了文本状态变更，状态变更引起了UI 渲染，UI 从“Hello world”变更为“Hello rkUI”，这个过程就用到了状态。
市场巨变，移动开发行业即将迎来“第二春”?
maniuT的博客
05-29 1035
随着鸿蒙生态的不断壮大，越来越多的企业开始加入其中，对鸿蒙OS开发工程师的需求也越来越迫切。年初时还只有200个APP宣布加入鸿蒙生态，而最近华为也已经官宣，已经有4000+多个应用加入鸿蒙，短短三个月就增加了20倍。对于那些有志于从事鸿蒙开发的人来说，这是一个难得的机会。随着越来越多的互联网企业加入到鸿蒙生态当中，随着鸿蒙强势崛起是不是暗示着。
vue3一个页面引入多个echarts 自适应失灵
07-23
### 回答1： 在Vue3中，当一个页面引入多个echarts时，由于每个echart实例都具有自己的Dom元素，并且每个实例都需要根据父容器的大小进行自适应，可能会出现自适应失灵的问题。 为了解决这个问题，可以采取以下几个步骤： 1.确保每个echart实例的Dom元素都有唯一的id，在页面的template中设置不同的id。 2.在Vue3中，可以通过使用refs来获取echart实例，然后对每个实例进行相应的操作。 3.在生命周期的mounted钩子函数中，对每个echart实例进行初始化，并设置其自适应。可以使用window的resize事件监听父容器的大小变化，然后调用echart实例的resize方法。 4.在数据更新后，可以通过watch来监听数据的改变，并调用相应的echart实例的setOption方法进行更新。 综上所述，通过以上步骤，可以使得多个echarts实例在同一个页面中进行自适应，并且随着父容器的大小变化而更新。这样就可以解决多个echarts实例自适应失灵的问题。 ### 回答2： 当一个页面引入了多个echarts图表时，使用Vue3进行自适应可能会导致失灵的情况发生。这是因为Vue3中的组件渲染和数据响应机制发生了变化，可能会导致echarts图表无法正确地根据父容器的大小进行自适应。 要解决这个问题，我们可以采取以下步骤： 1. 在Vue3中，使用`nextTick`方法来确保DOM已经完全渲染后再进行echarts图表的初始化。在组件的`mounted`钩子函数中，使用`nextTick`来确保初始化的echarts图表能够正确获取父容器的大小。 2. 在需要自适应的echarts图表中，使用`window.onresize`事件来监听窗口大小的变化，并在事件回调函数中重新绘制图表。这样可以确保图表能够根据父容器的大小进行自适应。 3. 如果有多个echarts图表需要进行自适应，可以为每个图表添加一个专属的`resize`事件，并在事件回调函数中根据当前图表的父容器大小重新绘制图表。 总结来说，要解决Vue3中多个echarts图表自适应失灵的问题，我们需要确保图表的初始化在DOM渲染完成后进行，并通过监听窗口大小变化的事件来实现图表的自适应。这样可以确保多个图表能够正确地根据父容器的大小进行自适应。 ### 回答3： 在Vue3中，当一个页面引入多个echarts图表并且要实现自适应的时候，可能会出现自适应失灵的情况。这是因为echarts图表默认是根据其容器的大小来自适应的，而在Vue3中，由于组件的加载顺序以及页面的渲染顺序可能存在差异，导致echarts在计算容器大小时获取到的是不准确的数值。 解决这个问题的方法有以下几种： 首先，可以使用Vue3的生命周期钩子函数来手动触发echarts的自适应计算。在mounted钩子函数中，使用ref获取到页面上echarts容器的DOM元素，然后调用echarts的resize()方法，强制图表重新计算自适应大小。这样即使组件加载顺序有变化，也能确保每个图表都能正确地计算自适应大小。 其次，可以使用Vue3的watch特性来监听页面容器的大小变化。通过监听容器的width和height属性，当属性发生变化时，调用echarts的resize()方法进行自适应计算。这样无论页面中有多少个echarts图表，只要有容器大小变化，都能触发echarts的自适应计算。 最后，可以考虑使用Vue3提供的第三方插件或者封装自定义指令来处理echarts的自适应。这些插件或者指令会在页面渲染完毕后自动触发echarts的resize()方法，保证图表大小的正确计算。通过使用这些插件或者指令，可以简化代码，提高开发效率。 综上所述，通过合理运用生命周期钩子函数、watch特性以及第三方插件或自定义指令，可以解决在Vue3中多个echarts图表自适应失灵的问题。这样能够确保页面中的每个图表都能正确计算适应大小，提供良好的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值