Cómo promocionar una aplicación web front-end orientada a dispositivos móviles
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 configurar lo relevante en las propiedades de la meta ventana gráfica.
se requieren 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 .
lt;meta name="viewport" content="ancho=ancho-dispositivo, escala-inicial=1, escala-máxima=1, escalable-usuario=no"gt;
1.1 Móvil primero:
El concepto de desarrollo de Amaze UI es móvil primero y es necesario configurar las propiedades de la ventana gráfica relevantes en meta. 2 Usando HTML5
Amaze UI se desarrolla usando HTML5
Amaze UI se desarrolla usando HTML5, por lo que si no ha probado otros DOCTYPE, asegúrese de que HTML sea el primero antes de usarlo. es lt;!DOCTYPE htmlgt;.
lt;!DOCTYPE htmlgt;
lt;htmlgt;
...
lt;/htmlgt;
2. JavaScript de Amaze UI
Basado en Zepto.js
El componente JavaScript de Amaze UI está basado en Zepto.js, así que asegúrese de presentar Zepto.js antes del Script de interfaz de usuario de Amaze (1.1.3).
Debido a que $ = window.Zepto se especifica internamente en el módulo, actualmente no se admite reemplazar Zepto.js con jQuery y se agregará compatibilidad con jQuery como parte del trabajo posterior.
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. Ahora hay tantos marcos de aplicaciones para el usuario, ¿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 las pantallas cruzadas se han convertido en las tecnologías más populares en Internet. Al desarrollar páginas web, los desarrolladores front-end a menudo caen en un círculo vicioso de resolver repetidamente problemas complejos de adaptación y pantallas cruzadas, lo que consume energía y. afecta la eficiencia del trabajo y el progreso del desarrollo del producto es lento. 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. En comparación con otros frameworks front-end, ¿cuáles son las ventajas de Amaze UI?
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. Más liviano, no solo adecuado para escritorio, sino también para dispositivos móviles;
3. Incluye algunos widgets encapsulados que otros marcos no tienen.
3. -end Web ¿Cuál es el concepto de promoción de soluciones?
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 el sitio web desde dispositivos móviles primero y expandirlo gradualmente a pantallas más grandes. Podemos comenzar a desarrollar el sitio web desde dispositivos móviles primero y expandir gradualmente el sitio web a pantallas más grandes. pantallas Concéntrese en el contenido y las interacciones más importantes en una pantalla más grande y adáptese a la tendencia 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 navegadores modernos (compatibles con HTML5) y ya no consume los recursos de navegadores obsoletos, brindando 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 composición tipográfica china, ajustando las fuentes según el sistema operativo para lograr el mejor efecto de composición tipográfica china. Es compatible con los principales navegadores nacionales; y los navegadores integrados de aplicaciones brindan un mejor soporte de compatibilidad, lo que le ahorra mucho tiempo de depuración de compatibilidad.
Posdata:
Amaze UI se encuentra actualmente en el período 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.