开发跨设备的鸿蒙（HarmonyOS） App

以你之姓@ 2022-11-20 05:56 276阅读 0赞

为了让更多的人看到本文，请各位读者动动小手，点击右上角【...】，将本文分享到朋友圈，thanks！

现在的智能设备种类越来越多，而且这些智能设备的屏幕尺寸、分辨率都不同，例如，比较常见的智能设备有手机、平板电脑、车载电脑、智能电视、智能手表等。尽管这些设备都有屏幕，但它们的屏幕千差万别，有的屏幕尺寸小，有的屏幕尺寸大，有的是纵向的屏幕，有的是横向的屏幕，有的带触摸功能，有的不带触摸功能，甚至有的设备的屏幕是圆形（如智能手表），这就给开发App带来了麻烦。现在几乎每一个智能设备厂商，如Apple、华为都面临这个问题。这就要求我们开发的App尽可能适合更多的智能设备。

当然，最简单，最直接的方式是为每一类智能设备单独开发App。例如，为手机开发一款App，为智能电视开发一款App，为智能手表开发一款App。这么做尽管从技术上是可行的，但由于这些不同设备的App，尽管在UI展现上不同，但大多数逻辑代码是相同的。如果单独为不同的设备开发App，将会造成大量的代码冗余。所以我推荐的方案是让一个App同时适用于不同的智能设备。基本的原理是在App运行时会自动检测当前的设备，然后会执行与特定设备相关的代码，使用与特定设备相关的布局和资源。

这里的关键点是检测当前的设备类型。在创建HarmonyOS工程时，要么创建TV（华为智慧屏）工程，要么创建Wearable（智能手表）工程，所以使用模板创建的HarmonyOS工程只能在一类设备（TV或Wearable）中运行。读者可以通过config.json文件的deviceType属性查看当前工程可以运行的设备类型，如果创建的是TV工程，deviceType属性的值如下：

"deviceType": [
    "tv"
        ]

如果创建的是Wearable工程，deviceType属性的值如下：

"deviceType": [
    "wearable"
        ]

如果deviceType属性的值是tv，当前工程是不能在智能手表上运行的，反之亦然。要想让当前工程同时在TV和Wearable上运行，需要同时指定tv和wearable（要手动修改config.json文件），配置代码如下：

"deviceType": [
    "tv",
    "wearable"
        ]

当完成deviceType属性的设置后，当前工程就可以同时在TV和Wearable上运行了。不过由于TV和Wearable的屏幕尺寸相差太多，所以布局通常会采用完全不同的样式。在HarmonyOS中，可以使用Java语言动态创建组件的方式实现布局，也可以使用布局文件。关于布局文件的使用，在后面的文章中会详细介绍。本文主要讨论使用Java代码动态创建组件的布局方式。

在创建的HarmonyOS工程中会自动生成一个样例代码，这些代码主要集中在MainAbilitySlice.java文件中的onStart方法中，代码如下：

读者并不需要对这段代码的每一行都了解，只需要知道这段代码将背景设为白色，并且在创建了一个用于显示文本的Text组件，并且在屏幕中心显示Hello World。如果在TV设备上运行，效果如图1所示。不过这样以来，在所有的设备中的UI都一样，但我们的目的是让不同的设备显示不同的UI，所以就需要通过下面的代码判断当前设备的类型。

if(DeviceInfo.getDeviceType().equals("tv")) { 
        ... ...
    } else if(DeviceInfo.getDeviceType().equals("wearable")) {
        ... ...
    }

![format_png][]

图1

其中getDeviceType方法返回的值就是App当前运行设备的类型。如果运行在TV上，值为tv，如果运行在智能手表上，值为wearable。所以可以用下面的代码来替换onStart方法中的代码。

public void onStart(Intent intent) {
            super.onStart(intent);
            LayoutConfig config = new LayoutConfig(LayoutConfig.MATCH_PARENT,
                                                           LayoutConfig.MATCH_PARENT);
            myLayout.setLayoutConfig(config);
            ShapeElement element = new ShapeElement();
            element.setRgbColor(new RgbColor(255, 255, 255));
            myLayout.setBackground(element);
            Text text = new Text(this);
            text.setLayoutConfig(config);
    if(DeviceInfo.getDeviceType().equals("tv")) { 
    // 运行在TV上执行的代码
                text.setText("华为智慧屏");
                text.setTextColor(new Color(0xFFFF0000));
                text.setTextSize(200);
            } else if(DeviceInfo.getDeviceType().equals("wearable")) {
    // 运行在Wearable上执行的代码
                text.setText("华为智能手表");
                text.setTextColor(new Color(0xFF0000FF));
                text.setTextSize(50);
            }
            text.setTextAlignment(TextAlignment.CENTER);
            myLayout.addComponent(text);
            super.setUIContent(myLayout);
        }

在这段代码中，将TV和Wearable上显示的文本内容、文本尺寸和文本颜色做了改变，所以在TV和Wearable上显示的文本是不同的。在TV上显示的效果如图2所示。在Wearable上显示的效果如图3所示。

![format_png 1][]

图2 在TV上显示的效果

![format_png 2][]

图3 在Wearable上显示的效果

\- EOF -

推荐阅读  点击标题可跳转

[1. 比Python更牛的语言有吗？看我用元类（metaclass）花式创建Python类][1. _Python_metaclass_Python]

[2. 见鬼！导入Python模块执行了所有代码，你不知道\_\_name\_\_变量是什么意思吗？][2. _Python_name]

[3. 连Python产生器（Generator）的原理都解释不了，还敢说Python用了5年？][3. _Python_Generator_Python_5]

[4. 牛掰了！鸿蒙与Android完美融合，将鸿蒙设备当Android设备用][4. _Android_Android]

[5. 【鸿蒙学院】鸿蒙App开发直播学员提问与回答][5. _App]

[6. 【鸿蒙学院】鸿蒙IDE：下载、安装DevEco Studio][6. _IDE_DevEco Studio]

7.  [Python高效编程之88条军规（2）：你真的会格式化字符串吗？][Python_88_2]

关注「极客起源」公众号，加星标，不错过精彩技术干货

[format_png]: /images/20221120/9e034711a39e4c09bdd44d15b1afde44.png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9VT2ljQmljZDl4dG4wcWdMY2hLSWtYNVRaUTJVand1RGVseWljd2NOQVc2bnhiVjJYYVdOc28ySGtPS0JoY000aWNlNnZWM1BIaWFKWVB2OHYwSTZ5Z2VRRVlBLzY0MA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9VT2ljQmljZDl4dG4wcWdMY2hLSWtYNVRaUTJVand1RGVsOFhNalFiaFE3eWVpYnc0MTl2eUFWM1Bsd3V3Q3lrcUt4SkFoejNMS0NKSFFMb2RXTWx6emRWQS82NDA?x-oss-process=image/format,png
[1. _Python_metaclass_Python]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd693e518a1eb747ba5bfb1c95b7734ba6f003a3629c904e929265a28e2b7379064e05f4a59b&idx=1&mid=2651365543&scene=21&sn=49d128105f9cf0e60e6f29d37f4042db#wechat_redirect
[2. _Python_name]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd693e6d8a1eb77b7ea2c3dd5bc34365f6f16a9e311b171777275faf91ed355e73e4ce080580&idx=1&mid=2651365531&scene=21&sn=b13ae5e0b8b6513eb2b9ea37d7941643#wechat_redirect
[3. _Python_Generator_Python_5]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd693e748a1eb762e07dcf354ac469e727e305d62b33647c833480ca09e407fec913ef4820c7&idx=1&mid=2651365506&scene=21&sn=7a8f298b48bec412b279188e9033853e#wechat_redirect
[4. _Android_Android]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd693e8f8a1eb799d77e411add171481359cdf3ec2f42cb3fcb15bb19c6ab8d6a7fbb52068c3&idx=1&mid=2651365497&scene=21&sn=c4e5512c6d74918b605afad698191c7e#wechat_redirect
[5. _App]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd693eae8a1eb7b829d9415d8063ad5828715f62a117eaa5b642cca6d4fe6d49ee73d0d97e0f&idx=1&mid=2651365464&scene=21&sn=e2445bc0769951f9fcf10241e04be99f#wechat_redirect
[6. _IDE_DevEco Studio]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd693eb98a1eb7afd6d2d04e0bc48e34a833c5edaa5241882608e4c35bde0820a26a46ca7300&idx=1&mid=2651365455&scene=21&sn=273f24c9964b3718e56c3004dbac38c0#wechat_redirect
[Python_88_2]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd693ec58a1eb7d351b447b59a6f9d055fc48dc4ff5df0cae43826106616123980bbf5b32fe7&idx=1&mid=2651365427&scene=21&sn=bbcdc94eab76ef3bae0eaa752a7eb0aa#wechat_redirect