prefacio
Recientemente, estoy trabajando en un requisito relacionado con Cordova. El trabajo principal es encapsular Cordova, proporcionar algunas devoluciones de llamada y monitoreo de eventos, y convertirlo en un componente para que lo usen los desarrolladores.
Solo sabía que antes estaba Cordova, pero en realidad no lo he usado. Por lo tanto, fui al sitio web oficial para verificar la documentación y usé toda la demostración.
Cordova encapsula localmente la vista web. El punto central es proporcionar una gran cantidad de complementos para permitir que H5 se comunique con Native, y es muy conveniente darse cuenta de la interacción entre los dos.
Si es un proyecto híbrido puro basado en Cordova, es decir, las páginas están todas desarrolladas en H5, es muy cómodo de usar y no hay ningún problema. Pero si es un proyecto mixto, solo algunas de las páginas usan H5, entonces Cordova todavía tiene algunas restricciones en el desarrollo de Android, el resumen es el siguiente
- CordovaActivity debe ser heredada . Este es el lugar más criticado en mi opinión. Cualquier sdk de tres partes que deba obligarlo a heredar su Actividad es un mal diseño, porque Java es de herencia única. Generalmente, nuestro proyecto tendrá su propio unificado BaseActivity, y no heredará otras actividades como último recurso.
- Flexibilidad insuficiente , cuando se encuentra con una interfaz de usuario ligeramente personalizada, como mi página tiene una barra de título, íconos flotantes y otra interfaz de usuario relacionada con el negocio además de la vista web, CordovaActivity predeterminado no puede manejarlo. Debe heredar CordovaActivity usted mismo y luego modificar el código fuente, por lo que el costo de desarrollo es relativamente alto y la reutilización es muy pobre.
- La Api predeterminada es suficiente para el uso diario, pero no hay monitoreo para algunos eventos.Si necesita monitorear estos tiempos, debe escribir su propio código, lo cual es muy problemático. Este no es un gran problema, después de todo, aún se pueden lograr problemas.
Después del análisis, la causa raíz del problema de la flexibilidad insuficiente es CordovaActivity. Si no hay un requisito personalizado, heredar CordovaActivity es realmente simple y fácil de usar, pero los requisitos de nuestro proyecto son extraños y definitivamente encontraremos alguna interfaz de usuario personalizada. La acción de heredar la actividad es la mayor limitación, por lo que el objetivo final de encapsular componentes es el siguiente
- Mantenga el uso predeterminado heredado de CordovaActivity
- Extraiga las capacidades principales de Cordova de CordovaActivity y encapsúlelas en una Vista, de modo que pueda deshacerse de la restricción de tener que heredar Actividad, y puede usar Cordova como un control Webview, que es adecuado para algunos escenarios muy personalizados.
- Proporciona encapsulación basada en Actividad y Fragmento, lo que permite a los usuarios usar rápidamente las funciones de Cordova bajo la premisa de flexibilidad, y es adecuado para la mayoría de los escenarios de interfaz de usuario personalizados.
- Ya sea que se trate de la forma de personalizar Ver o heredar Actividad o Fragmento, es necesario proporcionar API y devoluciones de llamada fáciles de usar a los usuarios para que puedan satisfacer rápidamente las necesidades comerciales.
Para lograr los objetivos anteriores, primero debe estar familiarizado con Cordova, y luego se debe resolver el código central de Cordova para evitar problemas en la extracción posterior.
Todo es difícil al principio, el camino hay que hacerlo paso a paso, y la comida hay que comerla bocado a bocado.Vamos a familiarizarnos con el uso de Cordova primero.
Uso básico de Córdoba
El uso básico de Cordova también es muy simple, solo siga la documentación oficial , es relativamente simple, así que lo agregaré en detalle, los pasos principales son los siguientes
- Para instalar nodejs, primero debe tener un entorno npm
- Instalar Córdoba
npm install -g cordova - Crear
cordova create <path>
uncordova create 目录名 包名 项目名
ejemplo de comando específico del proyectocordova create cordovademo com.yzq.cordovademo CordovaDemo
En este punto , se crea un proyecto Cordova - Agregue una plataforma, preste atención para cortar al directorio raíz del proyecto recién creado en este momento, puede especificar la versión usted mismo, la última es 11.0.0.
cordova platform add android@^11.0.0
En este punto, se crea un proyecto Cordova para la plataforma Android.
Primero mire la estructura del directorio
. Puede ver que en realidad es un proyecto front-end. Como desarrollador de Android, nos enfocamos principalmente en el directorio de plataformas/android . Este directorio es esencialmente un proyecto de Android y se puede usar directamente cuando se abre Android Studio. y corre
Después de ejecutarse, es una interfaz de este tipo por defecto.
Otro directorio importante es el directorio www , que se ocupa principalmente de los estudiantes front-end, y principalmente operan este directorio cuando codifican.
En realidad, hay un directorio www en el directorio de Android, que es exactamente el mismo que el contenido en el directorio exterior www. El h5 que finalmente se cargó cuando se ejecutaba ahora es el h5 en el directorio www. En el desarrollo real, generalmente cargamos una url en línea, por lo tanto, este directorio se usa principalmente para almacenar algunos recursos que deben cargarse localmente y se pueden usar durante la depuración.
Otro archivo importante es que config.xmleste archivo contiene principalmente algunas configuraciones relacionadas con Cordova, como la URL cargada por defecto, la declaración del complemento, etc.
A continuación, cambiemos un poco el código. Por ejemplo, cargue la página de inicio de mi blog y eche un vistazo. Es muy simple. Simplemente cambie el src de la etiqueta de contenido config.xmlen .
En este punto, se completa la creación y operación de un proyecto cordova muy simple.
El siguiente artículo analizará cómo usar el complemento de Cordova y cómo personalizar el complemento.
Si crees que este artículo es útil para ti, por favor dale me gusta. Puede ayudar a más desarrolladores. Si hay algún error en el artículo, corrígeme. Para volver a imprimir, indica que estás reenviando desde el blog de Yu Zhiqiang, ¡ gracias !