一次开发，多端部署-HarmonyOS应用开发快速入门-Codelabs-华为开发者联盟

一次开发，多端部署

Codelabs HarmonyOS应用开发快速入门

介绍

在本篇内容中，您将会让您的应用可以在不同尺寸的设备上美观地运行，而无需另外开发多套代码，这就是“一次开发，多端部署”。

根据本教程学习，您可以选择从上一教程结束时构建完成的项目开始，也可以直接运行QS11_StartingPoint文件夹中的项目。

根据教程中的提示使用QS11_Resources文件夹中的文件。

如果您想要自行探索，可以直接打开QS11_Complete文件夹中的项目并浏览代码。

项目文件下载

下载项目文件开始构建本项目，请根据以下步骤操作:

11_DevelopOnceDeployAnywhere.zip

快速入门案例整体界面效果与实现方案分析

快速入门案例中主要有四个界面，依次分别为：快速入门页、课程学习页、知识地图页、技术文章详情页。接下来将会依次讨论各个页面如何在不同设备上呈现不一样的效果。

Step 1

快速入门页界面效果与实现方案分析。快速入门页作为整个快速入门案例的第一个界面，涉及到了许多的一多能力，界面设计图如右图所示，我们将快速入门页分为了四个部分，此处以手机效果为示例。

折叠屏效果：

平板效果：

实现方案可以参考下表：

区域编号	简介	实现方案
1	底部/侧边页签	结合断点变化修改Tabs的参数与属性，主要涉及Tabs的barPosition参数与vertical属性。barPosition参数可以控制Tabs的页签位置，vertical属性可以控制Tabs页签的横纵显示。
2	快速入门Banner轮播图	结合断点使用Swiper组件的displayCount属性来控制一页内的元素显示数量，使用nextMargin属性控制未完全显示的部分的宽度，使用indicator控制导航点指示器是否显示与显示效果。
3	赋能套件	使用Grid组件的一多能力结合断点实现。
4	入门教程	结合断点使用List组件的lanes属性控制列表组件的显示列数以及列间距。

Step 2

快速入门的第二个页签“课程学习”页签，其在Web页面内实现了一多，不涉及HarmonyOS侧的一多能力，故此不在这里讨论

Step 3

第三个页签“知识地图”主要涉及到Navigation的分栏显示与List组件的内容在不同设备尺寸上呈现不同的列数显示，手机设备效果图：

平板效果：

Step 4

技术文章详情界面设计与实现方案分析。技术文章详情页主要为加载在线的Web资源来实现界面的效果展示。不涉及到一多相关的内容，故此不在此处讨论。

Step 5

根据以上分析，在快速入门案例中的一多中涉及到的组件主要包括：List、Tabs、Swiper、Grid、Navigation。

断点

要进入一多的开发，首先需要我们了解一下断点的概念。断点本质上就是将不同的应用窗口宽度划分为不同的范围，这样既能减少在进行界面设计时考虑的因素，也简化了一多的开发。

Step 1

理解断点。断点以应用窗口宽度为切入点，将应用窗口在宽度维度上分成了几个不同的区间即不同的断点，在不同的区间下，开发者可根据需要实现不同的页面布局效果。具体的断点与应用窗口宽度对应关系如下所示。

断点名称	取值范围（vp）
xs	[0, 320）
sm	[320, 600)
md	[600, 840)
lg	[840, +∞)

Step 2

开发者可以自行根据需要改变取值范围，或者添加断点，例如我们希望区分出平板设备与更大尺寸设备，仅有一个lg断点是不够的，需要再加入一个xl断点，开发者也可以根据实际需要在后面再新增xxl断点等，但如无必要不建议额外增加断点。

断点名称	取值范围（vp）
xs	[0, 320）
sm	[320, 600)
md	[600, 840)
lg	[840, 1500)
xl	[1500, +∞)

vp是virtual pixel（虚拟像素）的缩写，是常用的长度单位。

Step 3

获取当前断点以及监听断点变化。将本章节对应工程目录下载包里的QS11_Resources目录下的BreakpointSystem.ets文件复制到commons/utils/src/main/ets/utils目录下，然后在commons/utils/Index.ets文件中进行导出，由于在之前的文章中已经进行过模块依赖的配置，只需要导出，其他模块就能引用到对应的工具类。

该文件使用了媒体查询实现了断点变化的监听，将断点值设置到了全局的AppStorage中，方便各个组件进行使用，只需要使用@StorageProp或者@StorageLink关联即可自动更新断点值，之后的内容中会有写法示例，同时实现了根据断点进行选值的方法。该方法需要创建一个BreakpointType实例，然后调用getValue方法并传入当前的断点值。实例如代码所示，注改代码不需要书写，只做帮助理解文件作用之用：

底层实现为根据传入的断点值返回对应的配置的值，例如上面的代码效果是当传入的breakpoint为sm时，返回值为1，当传入的breakpoint为md时，返回值为2。这在进行一多开发中是非常有用的，很多时候我们需要根据断点不同，设置不同的参数值来达到不同的效果，都可以考虑采用这个方式。

Step 4

注册监听与解除监听。在导出该文件后，我们需要在界面的入口文件中使用注册监听功能，在该案例中为products/default/src/main/ets/pages/Index.ets文件，在该文件中首先需要我们导入BreakpointSystem, BreakpointTypeEnum，然后在组件中创建出BreakpointSystem的实例，在之后需要我们在aboutToAppear回调中注册媒体事件的监听，在aboutToDisappear时解除监听。这样就能满足当应用启动时，媒体查询监听生效，界面可以正常使用断点，当应用退出，会销毁掉对应的事件监听。

// commons/utils/Index.ets
export { BreakpointSystem, BreakpointTypeEnum, BreakpointType } from './src/main/ets/utils/BreakpointSystem';

Tabs组件的一多适配

首先让我们看一下Tabs组件如何进行一多的适配。在“组件路由导航”文章中，我们实现了在手机设备上的TabBar样式，也就是当前文章中的sm断点，接下来我们会实现md与lg断点下的Tab栏效果。

Step 1

实现Tabs一多的适配，首先需要使用@StorageProp装饰器获取到全局的断点值。然后就可以使用断点值来进行一多适配了。

Tabs组件主要依靠以下两个值来实现一多的适配：

barPosition参数，可以控制Tabs的页签位置，该属性有两个可选值，分别为BarPosition.Start和BarPosition.End。
vertical属性，可以控制Tabs页签的横纵显示，当该值为false时为横向Tabs，设置为true时为纵向Tabs。

两者结合的效果为：

barPosition为BarPosition.End，vertical属性为false时，页签位于容器底部，即此处设计图中的sm与md段断点的情况。
barPosition为BarPosition.Start，vertical属性为true时，页签位于容器左侧，即此处的lg断点的情况。
barPosition为BarPosition.End，vertical属性为true时，页签位于容器右侧，在该应用中不涉及。
barPosition为BarPosition.Start，vertical属性为false时，页签位于容器顶部。在该应用中不涉及。

在快速入门案例中的Tabs手机效果：

折叠屏效果：

平板效果：

Step 2

根据以上的分析，我们只需要设置barPosition参数在lg断点时为BarPosition.start，在sm、md断点时为BarPosition.end，同时设置vertical属性在lg断点时为true，在sm、md断点时为false即可实现设计图中的效果。

Swiper组件的一多适配

接下来我们会适配快速入门页中的顶部Banner，在之前的内容中我们已经实现了在sm断点下的效果，接下来我们需要实现在md与lg断点下的效果。效果图如下：

在快速入门案例中，Swiper组件在手机设备上的效果：

折叠屏效果：

平板效果：

Step 1

快速入门案例中Swiper组件的一多适配主要依靠以下属性：

displayCount属性。该属性用于设置Swiper视窗内元素显示个数，例如根据此处的设计图需要分别设置displayCount属性在sm、md、lg断点下分别为1、2、2。
indicator属性。该属性用于控制导航点指示器的效果，支持圆点、数字、以及不启用，根据设计图需要设置在sm断点下indicator属性Indicator.dot()表示使用圆形的导航点指示效果，并配置选中颜色selectColor与一般颜色color，在md，lg断点下设置为false，表示关闭导航点指示器效果，这样就能满足设计要求。
nextMargin属性。该属性可以控制后一项的漏出部分的长度，在sm、md、lg断点下对应的值分别为0、12vp、266vp。注意该值需要设置SwiperDisplayMode为STRETCH模式时才会生效。

Grid组件适配

在“网格和列表组件的使用”文章中我们完成了在手机设备上的Grid组件的效果，接下来需要我们完成在md、lg断点下的适配。

在快速入门案例中，Grid组件在手机设备上的效果：

折叠屏运行效果：

平板运行效果：

Step 1

控制GridItem在不同设备上具有不同的宽度。首先由于网格的每一个网格项在不同设备上的宽度不尽相同，在sm、md、lg断点下分别呈现160、164、180的尺寸，于是我们可以使用断点选值的方式来设置GridItem的宽度属性。

Step 2

控制列间距。其次，网格组件的列间距在不同设备上也不一致，在sm、md、lg断点尺寸下分别列间距分别为8、12、16，可以使用columnsGap属性配合断点选值来实现。

列表的一多适配

然后让我们看一下List组件如何进行一多的适配。

Step 1

“快速入门”页签列表效果展示主要包含手机、折叠屏、平板设备，效果图分别展示如下。

“快速入门”页签列表在手机设备上的效果图如下：

“快速入门”页签列表在折叠屏设备上的效果图如下：

“快速入门”页签列表在平板设备上的效果图如下：

Step 2

在快速入门页面中入门教程部分使用了List组件来实现，以上设计图中需要我们实现不同断点情况下，List组件呈不同的列数进行显示。

开发者可以在之前的features/quickstart/src/main/ets/view/TutorialView.ets文件中，对List组件使用lanes属性，该属性有两个参数。第一个参数为纵轴方向的列数，第二个参数为列间距。此处根据设计图，我们需要分别在sm、md、lg断点下使得lanes属性的第一个参数分别为1、2、3，第二个参数分别为0、12、16。