Cómo avanzar en soluciones de red front-end que prioricen los dispositivos móviles

Antecedentes: Al comienzo de la adaptación a la nube, comenzamos a acumular nuestro propio marco de front-end y también aprovechamos las ventajas de marcos extranjeros como Bootstrap. En el proceso de uso interno, todos respondieron bien. Queremos abrir este producto y esperamos compartirlo con más personas. También esperamos que más personas contribuyan con código para construir completamente el entorno ecológico del código abierto front-end de China.

Dado que Amaze UI se encuentra actualmente en el período beta cerrado, esperamos recopilar tantos comentarios, sugerencias y opiniones excelentes y constructivos como sea posible, y trabajar con la gran cantidad de desarrolladores front-end destacados*** para mejorar la función Amaze UI para promover el desarrollo de la tecnología front-end de pantalla cruzada de China Mobile.

La siguiente es una solución web front-end orientada a dispositivos móviles que queremos compartir con usted con anticipación.

1. CSS de Amaze UI

1.1 Móvil primero:

Amaze UI se desarrolla basándose en el concepto de móvil primero, es necesario establecer lo relevante en el Propiedades de la meta ventana gráfica.

se requiere ancho = ancho del dispositivo, escala inicial = 1. Creemos que un buen diseño no requiere que el usuario opere la escala de la ventana, por lo que agregamos escala máxima = 1, escalable por el usuario = no.

1.2 Uso de HTML5

La interfaz de usuario de Amaze se desarrolló utilizando HTML5 y no se ha probado con otros DOCTYPE. Asegúrese de que la primera línea de HTML esté antes de su uso.

2. El componente JavaScript de la interfaz de usuario de Amaze

Basado en Zepto.js

El componente JavaScript de la interfaz de usuario de Amaze está basado en Zepto.js, asegúrese antes de script de la interfaz de usuario de Amaze (1.1.3) Presentamos Zepto.js.

Dado que el módulo especifica $ = window.Zepto internamente, actualmente no se admite reemplazar Zepto.js con jQuery y se agregará compatibilidad con jQuery como parte del trabajo futuro.

Llamada de componentes

El método de llamada de componentes es similar a jQuery. Para obtener más información, consulte la documentación de cada componente.

Uso avanzado

Basado en Sea.js

Amaze UI actualmente usa Sea.js para organizar y administrar módulos. Los usuarios que usan Sea.js pueden usar Sea.js. código fuente Ver interfaz.

Interfaz de eventos predeterminada

Amaze UI vincula eventos predeterminados a HTML específico, y la mayoría de los componentes JS pueden llamar a estos eventos usando etiquetas HTML. Estos eventos predeterminados se encuentran en el espacio de nombres amui y el usuario puede desactivarlos.

Desactivar todos los eventos predeterminados:

$(document).off('.amui');

Desactivar eventos de componentes específicos:

$(document).off('.modal.amui');

Eventos personalizados

La mayoría de los componentes definen algunos eventos personalizados.

Los eventos personalizados se denominan {nombre del evento}:{nombre del componente}:amui. Los usuarios pueden ver la documentación del componente para usar estos eventos personalizados.

$('#myAlert').on('close:alert:amui', function() {// hacer algo});

Captura de pantalla del componente web:

También hablamos sobre los problemas que pueden encontrar los desarrolladores de aplicaciones para el usuario:

1. Hay tantos marcos de aplicaciones para el usuario ahora, ¿por qué todavía necesitamos desarrollar Amaze UI?

Existen muchos marcos front-end nacionales, pero hay muy pocas tecnologías que puedan resolver los problemas de compatibilidad y adaptación entre pantallas del navegador. Además, en China existe una comprensión ideológica insuficiente de la tecnología de código abierto. Muchas tecnologías maduras están principalmente cerradas dentro de sus propias empresas, y es difícil que toda la cadena industrial sea técnicamente recíproca.

Al mismo tiempo, los dispositivos móviles y de pantalla cruzada se han convertido en las tecnologías más populares en Internet. Al desarrollar páginas web, los desarrolladores de aplicaciones para usuario a menudo caen en un círculo vicioso de resolver repetidamente problemas complejos de adaptación y de pantalla cruzada, lo que consume energía. afecta la eficiencia del trabajo y ralentiza el progreso del desarrollo del producto. Resolvimos estos problemas internamente usando Amaze UI, por lo que estamos abiertos con la esperanza de que sea útil para los desarrolladores de aplicaciones para el usuario.

2. ¿Cuáles son las ventajas de Amaze UI en comparación con otros frameworks front-end?

Es inevitable compararlo con Bootstrap. Creo que Amaze UI puede tener las siguientes ventajas:

0. Es muy compatible con las ventajas de los marcos front-end existentes;

p>

1. Se agregaron más elementos en línea con las características del mercado chino: un diseño chino más optimizado, compatible con los principales navegadores del mercado chino

2. Para escritorio, pero también apto para escritorio.

3. Más liviano, no solo adecuado para escritorio, sino también para dispositivos móviles

3. Incluye algunos widgets empaquetados que otros marcos no tienen; > 3. ¿Cuál es el concepto de promoción de la solución web front-end móvil Amaze UI?

Al dividir y encapsular algunos componentes web comunes, estandarizamos el sitio web móvil desarrollado a través de la plataforma de adaptación a la nube y unificamos la experiencia del usuario.

Medidas específicas:

Semántica: el desarrollo de la interfaz de usuario de Amaze sigue el principio de la semántica, con el objetivo de transmitir intuitivamente el papel funcional de los elementos a través de nombres de clases y otra información, mientras se centra en la estructura y el estilo. y el comportamiento. La separación reduce el acoplamiento entre componentes y mejora la eficiencia del desarrollo y la mantenibilidad.

El móvil primero, adaptable a varias pantallas. Siguiendo los conceptos de "Mobile First" y "Mejora progresiva", puede comenzar a desarrollar su sitio web desde dispositivos móviles primero y expandirlo gradualmente a pantallas más grandes. Podemos comenzar a desarrollar su sitio web desde dispositivos móviles primero y enfocarnos gradualmente en lo más importante. contenidos e interacciones en una pantalla más grande para adaptarse a la tendencia de desarrollo de Internet móvil. Esto facilita la creación de páginas web que se adaptan a todas las pantallas.

Modular, personalizada bajo demanda. AMUI usa MENOS para escribir estilos, que tiene una estructura razonable, es fácil de expandir y fácil de mantener. Utiliza Seajs para el desarrollo modular para organizar JavaScript, haciéndolo natural y elegante.

Céntrate en HTML5. AMUI está desarrollado en base a Zepto.js liviano, que reduce efectivamente el código inflado y es compatible con navegadores más antiguos basados ​​en efectos interactivos CSS3, es fluido y eficiente. AMUI se centra en los navegadores modernos (compatibles con HTML5), ya no consume los recursos de los navegadores obsoletos y ofrece una mejor experiencia a los usuarios más valiosos.

Soporte de localización: en comparación con los marcos front-end extranjeros, Amaze UI se centra en resolver el problema de la optimización de la tipografía china, ajustando las fuentes según el sistema operativo para lograr la mejor tipografía china que se proporciona para la corriente principal nacional; Navegadores y navegadores integrados en aplicaciones. Un mejor soporte de compatibilidad le ahorra mucho tiempo de depuración de compatibilidad.

Posdata:

Amaze UI se encuentra actualmente en la etapa de prueba interna. Esperamos recopilar tantas sugerencias y opiniones excelentes y constructivas como sea posible, y comunicarnos con la gran cantidad de destacados. Los desarrolladores de front-end juntos mejorarán las funciones de Amaze UI y promoverán el desarrollo de la tecnología de front-end de pantalla cruzada de China Mobile.