Cordova系列之化繁为简:打造全场景适用的Cordova组件

前言

在我之前的文章 Cordova初探 的开篇中说到了Cordova在Android应用开发中的一个显著的局限性就是我们的Activity必须继承其提供的CordovaActivity。这种设计对于那些追求个性化UI设计的项目而言,显得尤为受限。
其实也可以理解,Cordova主要旨在为前端开发者提供一个方便的框架,让他们可以专注于编写HTML、CSS和JS代码,以满足业务需求,并确保这些代码能够在iOS和Android平台上运行。
这对于纯H5的开发方式来说是非常合适的,其中Cordova充当的是H5内容的容器。但是,在我遇到的项目中,纯H5开发方式实际上并不常见。
H5在理论上能够实现优雅的跨平台功能,但在实践中,我们需要考虑到多个关键因素,如兼容性、性能以及与原生应用交互的成熟度。
所以,本片文章主要是为Android开发的同学们提供一个基于Cordova封装的全场景适用的组件,使得我们在Cordova原有功能的基础上,能够突破必须继承CordovaActivity限制,能够随心所欲的自定义我们的ui,并提供更加丰富的功能以更好的支撑我们的业务需求。

目标 & 思路

目标
  • 保持Cordova的原有功能和使用方式。
  • 摆脱继承Activity的限制,使其像Webview控件一样灵活使用。
  • 提供基于Activity和Fragment的封装,简化开发,同时支持UI个性化。
  • 提供关键节点的回调,以满足更广泛的业务需求。
思路

以CordovaActivity这个入口源码为切入点,我们会发现,CordovaActivity代码量并不大,其核心功能集中在几个关键节点上,例如处理SplashScreen、加载配置、初始化变量、创建CordovaInterface等。所以,一个思路就是将CordovaActivity中关于CordovaWebView和CordovaWebViewEngine的核心代码提取出来,封装成一个更小粒度的自定义view供外部使用,同时提供Activity和Fragment的模版类,暴露出自定义ui的接口。这样一来,就可以实现核心目标了。

具体的代码实现已经上传到github上了,欢迎感兴趣的读者前往查看。下面主要详细介绍组件的使用方法。

组件使用

添加依赖
implementation("com.xeonyu:cordova-webcontainer:1.0.5")
继承CordovaWebContainerActivity使用

该方式适用于绝大部分业务场景,集成简单且保持UI灵活。

布局示例


<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.yzq.demo.activity.WebContainerActivity">

    
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/purple_200"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:titleTextColor="@color/white" />

    
    <ProgressBar
        android:id="@+id/progressbar"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/toolbar" />

    
                    

你可能感兴趣的:(混合开发,Android,cordova,Cordova插件,Cordova自定义)