从HarmonyOS sdk根本上解决TextInput(输入框)不识别飘红的问题 原创 精华

开源夏德旺
发布于 2021-12-9 16:35
浏览
8收藏

背景

在HarmonyOS中使用ets开发的时候,大家会发现没有输入框组件,并且目前官网的api介绍上也没有加入该组件,实际上该组件在本地的sdk目录下是存在的,同时大家也可以在官方的codelab上找到该组件的使用,还有我发现之前有有人已经关于如何加入输入框组件写了篇博客,我就不过多介绍了。该组件就是TextInput,但是大家在使用它的时候都会发现一个问题,就是IDE会飘红,但是能够编译通过并且可以在模拟器上正常运行,如下图
从HarmonyOS sdk根本上解决TextInput(输入框)不识别飘红的问题-鸿蒙开发者社区
那这个是为什么呢?如何能彻底解决该问题呢?
其实我之前写过一篇博客解决的问题跟这个类似,请见“[https://harmonyos.51cto.com/posts/9536](如何解决HarmonyOS sdk的bug–AlphabetIndexer组件的bug解决思路)”
要彻底解决这个问题,需要弄明白sdk目录和DevEco Studio之间的关系。

解决思路

DevEco Studio中代码为何会飘红?

根本原因是我们引用的组件在Sdk中不存在,就相比于我们在java中引入一个class,而该class根本就不在jdk中.因此我们需要分析sdk中组件对应是存在哪里?以及sdk中的组件是如何跟DevEco Studio关联上的?

Sdk目录结构分析

这里我只对跟该问题紧密相关的目录进行分析,首先我们可以在sdk下找到一个ets目录,如下图
从HarmonyOS sdk根本上解决TextInput(输入框)不识别飘红的问题-鸿蒙开发者社区

api目录: 里面存放了我们要调用的api接口的相关ts文件。比如网络请求、拨打电话等api。该目录与本问题无关。
build-tools目录: ets项目编译构建核心目录,如果编译无法通过,需要修改该目录下的文件,在我之前的一篇博客中就修改了该目录下的文件,请见“[https://harmonyos.51cto.com/posts/9536](如何解决HarmonyOS sdk的bug–AlphabetIndexer组件的bug解决思路)”。
component目录: 系统sdk自带组件存放目录,解决本问题的核心目录。

下面对component目录展开分析,打开该目录,可以看到各种UI组件对应的ts文件,但是在其中我们并没有发现TextInput组件对应的ts文件。发现了这点,就会对解决该问题有点头绪了。

既然飘红,找不到该组件,那么为何又会编译通过正常运行呢?

那么要对studio如何编译构建它有一定了解。
编译的时候首先会通过读取ets\3.0.0.0\build-tools\ets-loader下面的一个component_config.json文件,在这个里面对各个组件进行配置关联。然后会引用ets\3.0.0.0\build-tools\ets-loader\declarations目录下的相关组件对应的ts文件,该目录下也存在各类组件对应的ts文件,注意在编译的时候根本就不会引用之前的component目录下的组件,编译跟component目录没有关系。而我们会发现
ets\3.0.0.0\build-tools\ets-loader\declarations目录下存在textinput.d.ts文件及TextInput组件。
并且component_config.json文件中也配置了TextInput组件,因此可以通过编译。
至于能正常运行,那是因为模拟器中安装的操作系统下有该组件的运行环境。

最后解决飘红的问题

首先我们要想办法找一个TextInput组件对应存在的textinput.d.ts文件copy到component目录下。
注意:这个时候不要复制ets\3.0.0.0\build-tools\ets-loader\declarations目录下的textinput.d.ts文件,因为它和component目录下组件的代码还是有些区别的。
好在我们可以在OpenHarmony Sdk目录下的component目录里面找到textinput.d.ts文件,直接copy这个文件过来即可。这个时候大家会认为已经大功告成,实则不然,此时我们会发现Studio中依然飘红。
后来我反复研究各个目录下的文件,又发现了一个重要文件,即component目录下的index.d.ts文件,它相当于一个入口的清单文件,在里面配置了各种系统组件的支持。代码如下:

/*
 * Copyright (c) 2021 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.
 */

export * from './alert_dialog';
export * from './alphabet_indexer';
export * from './animator';
export * from './badge';
export * from './blank';
export * from './button';
export * from './circle';
export * from './column';
export * from './column_split';
export * from './common';
export * from './custom_dialog_controller';
export * from './datapanel';
export * from './divider';
export * from './ellipse';
export * from './flex';
export * from './forEach';
export * from './gesture';
export * from './grid';
export * from './grid_container';
export * from './gridItem';
export * from './hyperlink';
export * from './image';
export * from './image_animator';
export * from './lazyForEach';
export * from './line';
export * from './list';
export * from './listItem';
export * from './navigator';
export * from './navigatorView';
export * from './pageTransition';
export * from './panel';
export * from './path';
export * from './polygon';
export * from './polyline';
export * from './progress';
export * from './qrcode';
export * from './rating';
export * from './rect';
export * from './row';
export * from './row_split';
export * from './scroll';
export * from './shape';
export * from './slider';
export * from './span';
export * from './stack';
export * from './stateManagement';
export * from './swiper';
export * from './tab_content';
export * from './tabs';
export * from './text';
export * from './video';

此时我们会发现里面并没有配置textinput.d.ts文件进来。于是我在该文件中添加下面一条代码

export * from './textinput';

然后就大功告成了,DevEco Studio不飘红了,并且可以通过Ctrl+鼠标点击跳转代码了。
从HarmonyOS sdk根本上解决TextInput(输入框)不识别飘红的问题-鸿蒙开发者社区

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-12-15 10:49:27修改
11
收藏 8
回复
举报
4条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

夏老师已经是鸿蒙bug克星了,感谢分享。

回复
2021-12-10 10:03:27
入门大师小波哥
入门大师小波哥

过于流弊

回复
2021-12-12 22:35:18
Whyalone
Whyalone
666
回复
2021-12-13 18:17:53
jokerisme
jokerisme

ets\3.1.0.0\component 目录下改成了text_input.d.ts

回复
2022-1-13 16:42:10
回复
    相关推荐