组件/>系列之化繁为简：打造全场景适用的组件

组件"/>

化繁为简系列：打造适合全场景的组件 前言

在我上一篇文章的开头，我提到应用程序开发的一个重要限制是我们必须继承它提供的内容。 这种设计对于追求个性化UI设计的项目来说限制尤为明显。

其实也可以理解，主要是为了给前端开发者提供一个便捷的框架，让他们可以专注于编写满足业务需求的HTML、CSS和JS代码，并保证这些代码能够在iOS和平台上运行。

这非常适合纯H5的开发方式，充当H5内容的容器。 不过，在我遇到的项目中，纯H5的开发方式其实并不常见。

H5理论上可以实现优雅的跨平台功能，但在实践中，我们需要考虑多个关键因素，例如兼容性、性能以及与原生应用交互的成熟度。

因此，本文主要是为开发者提供一个适合所有场景的封装组件，让我们可以在原有功能的基础上突破继承的限制，随心所欲地定制我们的UI，提供更丰富的功能更好地支持我们的业务需求。

目标和想法 目标和想法

以这段入门源码为起点，我们会发现代码量并不大，其核心功能都集中在几个关键节点上，比如处理、加载配置、初始化变量、创建等，因此，一种思路是提取He和Zhong的核心代码，封装成更细粒度的自定义视图供外部使用，并提供He和X的模板类来暴露自定义UI界面。 这样，核心目标就可以达到。

具体代码实现已经上传，欢迎感兴趣的读者查看。 下面主要详细介绍组件的使用。

组件使用增加了依赖关系

implementation("com.xeonyu:cordova-webcontainer:1.0.5")

继承使用

这种方式适合大多数业务场景，易于集成，保持UI的灵活性。

布局示例