Precauciones para el desarrollo de terminales cruzados de uni-app

La posibilidad de que H5 sea normal pero la aplicación sea anormal

excepción css:
Selectores no admitidos * Los selectores no se admiten en el lado que no es H5;

Cambie el selector de elementos del cuerpo a la página. Del mismo modo, cambie div, ul y li para ver, span y fuente a texto, a navegador, img a imagen ...

compatibilidad del navegador webview

En el lado de la aplicación, la vista web del sistema representa la página vue de forma predeterminada (no el navegador que viene con el teléfono móvil, sino la vista web de la rom). En teléfonos móviles más antiguos, como Android4.4, 5.0 o iOS8, muchos css no son compatibles, así que no use css demasiado nuevo, hará que la interfaz sea anormal.

Tenga en cuenta que esto no significa que no se pueda usar flex, Android 4.4 también es compatible con flex, pero no use CSS demasiado nuevo.

Puede encontrar un teléfono móvil con Android 4.4 o utilizar un emulador de PC para realizar pruebas. La mayoría de los emuladores de Android domésticos son 4.4 o 5.0.

A partir de uni-app 2.5.3, el extremo de Android admite la introducción del kernel del navegador Tencent x5, que puede suavizar los problemas de compatibilidad del navegador de Android de gama baja. Para obtener más información, consulte la guía del usuario de x5

El subprograma no tiene problemas de compatibilidad con el navegador, viene con una vista web grande. Entonces, si su H5 y la interfaz del subprograma son normales, pero la interfaz de la aplicación de la máquina de gama baja de Android es anormal, y la aplicación no usa el motor x5, entonces básicamente se puede determinar que se debe a la compatibilidad css.

La página nvue del lado de la aplicación no tiene problemas de compatibilidad con el navegador. Viene con un motor de renderizado nativo unificado y no depende de la vista web.

La vista web correspondiente a Android4.4 es chrome37. Para obtener detalles sobre los núcleos del navegador en cada extremo, consulte: Acerca de las diferencias y la compatibilidad del núcleo de vista web del teléfono móvil, el navegador predeterminado y el navegador de la capa de representación de cada subprograma.

El problema de nivel de componente nativo H5 no tiene el concepto de componentes nativos. El extremo que no es H5 tiene componentes nativos y provoca el concepto de que el nivel de componentes nativos es más alto que el de los componentes de front-end. Para bloquear componentes nativos como video y mapa, utilice componentes de vista de portada.
El uso de applets de API y App js que no son compatibles con el lado H5 se ejecuta bajo jscore en lugar del navegador. No hay objetos js específicos del navegador, como document, xmlhttp, cookie, window, location, navigator, localstorage, websql, Indexdb , webgl y otros objetos.

Si su código no los usa directamente, es probable que la biblioteca de terceros importada los use. Si es lo último, vaya al mercado de complementos para buscar alternativas. Tenga en cuenta que el js que no es H5 se ejecuta en un núcleo js o v8 separado, no en el navegador.

A partir de HBuilderX 2.6, el lado de la aplicación ha agregado renderjs, que es un js que se ejecuta en la capa de vista. Las páginas de Vue pueden manipular los objetos del navegador a través de renderjs, lo que permite que las bibliotecas basadas en el navegador se ejecuten directamente en el lado de la aplicación de uni-app. como echart, threejs, consulte: https://uniapp.dcloud.io/frame?id=renderjs

Utilice la gramática vue que no es compatible con el lado que no es H5 y está restringida por el componente personalizado del subprograma. Para obtener más información, consulte
No escriba style = "xx" directamente en las propiedades del componente donde se hace referencia al componente, sino escriba el estilo dentro del componente.
url (// alicdn.net) y otras rutas se cambian a url (https://alicdn.net), porque en el lado de la aplicación // está el protocolo de archivo
Muchas personas utilizan la dirección del servicio de prueba local (localhost o 127.0.0.1) cuando se conectan al terminal H5. No se puede acceder a dicha dirección de red en el terminal de la aplicación móvil. Utilice la IP a la que puede acceder el teléfono móvil para conectarse a la red.

La posibilidad de que H5 sea normal pero el subprograma es anormal

Lo mismo que arriba
v-html se admite tanto en h5 como en app-vue (modo de compilación v3), pero no en applets
El Mini Programa requiere que la URL a la que se conecte debe estar configurada con una lista blanca

La posibilidad de que el subprograma sea normal pero la aplicación sea anormal

El motor de renderizado predeterminado de la página vue en el lado de la aplicación es la vista web del sistema (no el navegador integrado del teléfono móvil, sino la vista web de la rom). En teléfonos móviles más antiguos, como Android4.4, 5.0 o iOS8 , no se admite alguna sintaxis CSS nueva. Tenga en cuenta que esto no significa que no se pueda usar flex, Android 4.4 también es compatible con flex, pero no use CSS demasiado nuevo. Puede encontrar un teléfono móvil con Android 4.4 o utilizar un emulador de PC para realizar pruebas. La mayoría de los emuladores de Android domésticos son 4.4 o 5.0.

No hay ningún problema de compatibilidad del navegador en el subprograma, tiene incorporadas docenas de vistas web personalizadas propias. Entonces, si su H5 y la interfaz del subprograma son normales, pero la interfaz de la aplicación es anormal, se debe principalmente a la compatibilidad con CSS.

Resuelve este tipo de problemas:

Renunciar al soporte telefónico antiguo
No use una sintaxis CSS demasiado nueva, puede consultar en caniuse
A partir de uni-app 2.5.3, el extremo de Android admite la introducción del kernel del navegador Tencent x5, que puede suavizar los problemas de compatibilidad del navegador de Android de gama baja. Para obtener más información, consulte la guía del usuario de x5

El subprograma o la aplicación es normal, pero la posibilidad de una anomalía H5

Antes de uni-app 2.4.7, el terminal H5 no admitía componentes personalizados de los subprogramas de WeChat, es decir, componentes de wxcomponets, y pueden surgir problemas de compatibilidad en este momento. A partir de 2.4.7, H5 también admite componentes personalizados de WeChat, y ya no existe un problema de compatibilidad a este respecto.
El lado de la aplicación utiliza API y funciones específicas de la aplicación, como plus, Native.js, subNVue, complementos nativos, etc.
Utilice funciones especiales para mini programas, como el volumen de la tarjeta WeChat, los complementos del mini programa y el desarrollo en la nube del mini programa WeChat. Para el desarrollo en la nube, se recomienda utilizar uniCloud, que puede ser cross-end.

La aplicación es un programa normal, pequeño, posibilidad anormal de H5

El código utiliza el plus único, Native.js, subNVue, el complemento nativo y otras funciones en el lado de la aplicación.

Nota sobre el uso de Vue.js

uni-app se implementa en base a Vue 2.0. Los desarrolladores deben prestar atención a las diferencias en el uso de Vue 1.0 -> 2.0. Para obtener más información, consulte Migración desde Vue 1.x
El atributo de datos debe declararse como una función que devuelve un objeto de datos inicial; de lo contrario, cuando la página se cierra, los datos no se destruirán automáticamente. Cuando la página se vuelva a abrir, se mostrarán los últimos datos // uso correcto, use la función para devolver el objeto data () {return {title: 'Hello'}} // Una escritura incorrecta hará que se muestren los últimos datos cuando la página se abra de nuevo data: {title: 'Hello'}
En el subprograma WeChat, uni-app confía la función de enlace de datos a Vue. Los desarrolladores deben implementar el enlace de datos de acuerdo con el método de escritura Vue 2.0. El método de escritura del enlace de datos del subprograma WeChat no es compatible, por lo que el siguiente método de escritura no es compatible : <view id = "item- { {id}}"> </view> debe modificarse a: <view v-bind: id = "'item-' + id"> </view>

Diferente del desarrollo web tradicional

Es posible que esté acostumbrado al desarrollo web gratuito antes, pero actualmente existen muchas restricciones en cada programa pequeño. Por supuesto, la limitación es optimizar mejor la experiencia del usuario en la capa del marco, por lo que la experiencia del applet es mejor que la de la web. Y estas restricciones son solo restricciones en el método de escritura y no afectan la función. Si ha desarrollado un subprograma de WeChat, ya debería estar familiarizado con estas restricciones. Si no ha realizado un mini programa, lea atentamente esta sección.

JS presta atención al lado que no es H5 y no puede usar los objetos integrados del navegador, como documentos, ventanas, almacenamiento local, cookies, etc., y no puede usar jquery y otros marcos que dependen de estos objetos del navegador. Porque cada aplicación rápida de programa pequeño no admite estos objetos. La ausencia de los objetos integrados de estos navegadores no afecta el desarrollo empresarial, y la API proporcionada por uni es suficiente para completar el negocio. Cuando la api de uni se compila y ejecuta en la plataforma web, en realidad se convertirá en la api js del navegador. Si desea utilizar la biblioteca para operar ventanas y documentos en el lado de la aplicación, debe implementarla a través de renderjs. La api de uni está disponible en varios extremos. En el área de compilación condicional, también se puede usar la API propietaria de cada plataforma, como wx., Plus. Y se pueden usar otras API en WeChat y la aplicación respectivamente. Para reducir el costo de migrar programas pequeños a uni-app, la API de wx también se puede ejecutar directamente en la aplicación. Por ejemplo, escribir wx.requst y uni.requst es lo mismo, pero aún se recomienda usar wx solamente en el área de compilación condicional de WeChat Api.
Etiqueta Tenga en cuenta que la etiqueta de uni-app no es la misma que la etiqueta del subprograma y es diferente de la etiqueta de HTML. Por ejemplo, div debe cambiarse para ver, span debe cambiarse a texto y debe ser cambiado a navegador. Para reducir el costo de migrar aplicaciones h5 a uni-app, div y span también se pueden ejecutar en aplicaciones y applets, porque el compilador uni-app compilará estas etiquetas HTML en etiquetas de applet. Pero aún se recomienda desarrollar nuevos hábitos.
Css Tenga en cuenta que aunque la mayoría de los estilos css se pueden admitir en aplicaciones y subprogramas de WeChat, se recomienda utilizar el modelo de diseño flexible, que es más flexible y eficiente y admite más plataformas (como nvue y las aplicaciones rápidas solo admiten el diseño flexible). -app tiene como valor predeterminado rpx. Esta es una unidad universal que puede ser de terminal cruzado. Ver detalles
Directorio del proyecto Tenga en cuenta que cada página que se mostrará debe colocarse en el directorio de páginas, crear un nuevo directorio donde se encuentra la página y luego colocar el archivo vue del directorio con el mismo nombre, como proyecto / páginas / lista / lista .vue y en la configuración de pages.json. Esta es la misma estrategia que el subprograma. Componentes personalizados, coloque recursos estáticos como imágenes en el directorio de componentes y colóquelos en el directorio estático. Esta es la regla de webpack y mpvue
Nota sobre el método de enlace de datos que se implementa uni-app basado en Vue 2.0. Los desarrolladores deben prestar atención a la diferencia en el uso de Vue 1.0 -> 2.0. Para obtener más información, consulte Migración desde Vue 1.x
Cada página admite el uso de títulos nativos y la página de inicio admite el uso de pestañas inferiores nativas, que deben configurarse en pages.json, que no forman parte de la página vue. Por supuesto, la api js en vue también puede modificar dinámicamente el título nativo
Aunque se usa vue, en aplicaciones y applets, no es spa sino mpa
El primer sistema de coordenadas de posición es el sistema de coordenadas gcj02 de la Oficina Nacional de Estudios y Mediciones, y este sistema de coordenadas puede ser compatible con múltiples terminales. La versión anterior de posicionamiento de 5+ Baidu y mapa de Baidu usa el sistema de coordenadas privado de Baidu bd09ll, que necesita ser convertido. El mapa de Baidu en la nueva uni-aplicación se ha cambiado a gcj02 de forma predeterminada. El mapa de Gaode no se ve afectado, siempre es gcj02

Nota de desarrollo H5

H5 se publica en el servidor Nota: Configure la ruta después de la emisión (no está configurada en el directorio raíz del sitio web), por ejemplo, la ruta del sitio web de distribución es www.xxx.com/html5, edite el nodo h5 en el archivo manifest.json y agregue el atributo base debajo del enrutador como html5 haga clic en el menú de liberación -> H5 busque los recursos en el directorio unpackage / dist / build / h5 debajo del proyecto actual, implemente el servidor (o use el servidor local para previsualizar)
La forma de referirse a js de terceros: importar a través de npm (a través de la compilación condicional, solo la plataforma h5 puede importar la biblioteca correspondiente) editar el atributo de plantilla del nodo h5 en el archivo manifest.json, completar la ruta de la plantilla html, y usar el script en la plantilla html Se introduce js tripartito. El siguiente ejemplo es parte del código de plantilla html agregado por Baidu Statistics. Para todo el código de la plantilla, consulte: plantilla personalizada ... <cuerpo> <noscript> <strong> Habilite JavaScript para continuar. </strong> </noscript> <div id = "app"> </div> <! - los archivos creados se inyectarán automáticamente -> <script> var _hmt = _hmt || []; (función () {var hm = document .createElement ("script"); hm.src = "https://hm.baidu.com/hm.js?xxxxxx"; var s = documento .getElementsByTagName ("script") [0]; s.parentNode.insertBefore (hm, s);)) (); </script> </body> ...
La versión H5 de uni-app es totalmente compatible con la sintaxis vue, por lo que parte de la redacción puede tener efecto en el lado H5, pero no en el lado del applet o la aplicación.
H5 verificó la gramática vue más estricta. Algunas escrituras no estándar emitirán una alarma, como: escribir un objeto después de que los datos se activen, y la función debe escribirse; el valor de los accesorios no se puede modificar; el nodo de plantilla más externo del componente no puede contienen varios nodos, etc.
Después de compilar a la versión H5, es una aplicación de una sola página (SPA).
Si js no puede conectarse a Internet debido a un dominio cruzado, tenga en cuenta que las solicitudes de red (solicitud, archivo de carga, archivo de descarga, etc.) tienen restricciones de dominio cruzado en el navegador. La solución se detalla en: https: // ask .dcloud.net.cn / article / 35267
La barra de navegación y la barra de pestañas de la aplicación y el subprograma son controles nativos. Las coordenadas del área del elemento no incluyen la barra de navegación y la barra de pestañas nativas. En H5, la barra de navegación y la barra de pestañas se implementan mediante simulación div, por lo que las coordenadas del elemento incluirán la barra de navegación y altura de la barra de pestañas. Para resolver elegantemente el problema del posicionamiento de altura de múltiples terminales, uni-app ha agregado 2 nuevas variables CSS: --window-top y --window-bottom, que representan la distancia entre el área de contenido de la página y la parte superior e inferior. Por ejemplo, si desea colocar el cursor sobre un menú sobre la barra de pestañas nativa, escriba bottom: 0 antes. Después de compilar de esta manera a h5, este menú se superpondrá con la barra de pestañas y se ubicará en la parte inferior de la pantalla. En su lugar, use bottom: var (- window-bottom), no importa en app o h5, este menú está flotando sobre la barra de pestañas. Esto evita escribir código de compilación condicional. Por supuesto, aún puede usar la compilación condicional de H5 para manejar la diferencia en la interfaz.
Cuando use la unidad vh en CSS, tenga en cuenta que 100vh incluye la barra de navegación. Debe restar la altura de la barra de navegación y la barra de pestañas cuando la usa. Algunos navegadores también incluyen la altura de la barra de operación del navegador. Preste atención al usarla. .
Normalmente admite rpx, px es el píxel físico real. Actualmente no se admite establecer "transformPx" en manifest.json: true para usar px como una unidad dinámica.
El uso de brújula, ubicación geográfica, acelerómetro y otras interfaces relacionadas deben usar el protocolo https, y la vista previa local (localhost) puede usar el protocolo http.
Al probar el dispositivo emulador del navegador Chrome en el lado de la PC, el acceso a la API de ubicación debe conectarse al servidor de Google.
Los ciclos de vida de las páginas, como onLoad y onShow, no son compatibles con los componentes (excepto las páginas).
Para evitar conflictos con los componentes integrados, agregue un prefijo a los componentes personalizados (pero no u ni uni). Por ejemplo, los nombres de componentes personalizados utilizables: my-view, m-input, we-icon, por ejemplo, los nombres de componentes personalizados inutilizables: u-view, uni-input, si un proyecto existente usa un nombre que puede causar conflictos, Modifique el nombre. Además, el nombre del componente personalizado en el subprograma WeChat no puede comenzar con wx.

Atención al desarrollo del mini programa WeChat

Lista de errores actuales en los mini programas de WeChat
Registro de actualización del subprograma WeChat

Preste atención al desarrollo del subprograma Alipay

Registro de actualización del subprograma Alipay
Mini herramienta de desarrollo del programa Alipay: https://docs.alipay.com/mini/ide/download
Actualmente no existe una configuración de subcontratación y el tamaño del paquete está limitado a 3M.
showLoading no es transparente, lo que significa que no se puede hacer clic en el contenido de la página cuando se muestra la carga.
El símbolo @ no está permitido en el nombre de archivo o carpeta.
Los datos devueltos por la solicitud de red se procesarán estrictamente de acuerdo con el tipo de datos. Si no cumple con la especificación, se lanzará un error en lugar de devolverse en el formato original.
La identidad del componente de lienzo es id, no canvas-id. Aún no se ha procesado, por lo que debe agregar activamente el atributo id.
Como resultado de la prueba actual, la barra de navegación solo se convertirá en texto negro cuando el color de fondo se establezca en #FFF (FFF).
La barra de navegación del subprograma Alipay admite efectos de degradado transparente, y las configuraciones relacionadas se proporcionarán más adelante.
Cuando se utilizan pseudoelementos como bordes, el valor de altura no puede ser 1rpx y se debe utilizar 1px directamente.
ECharts no es compatible.
La función de pago no se puede simular y debe probarse en una máquina real.

Atención al desarrollo del mini programa Baidu

Registro de actualización del subprograma Baidu
Mini herramienta de desarrollo del programa Baidu: https://smartprogram.baidu.com/docs/introduction/tool/ .
El selector de atributos no es compatible.
No es compatible con scoped.
Funciones como login / getUserInfo / payment no se pueden simular en el simulador (herramienta de desarrollo).
El efecto de vista previa del componente de mapa en la herramienta de desarrollo es incorrecto, pero es correcto en el teléfono móvil.
El valor de windowHeight obtenido por getSystemInfo es incorrecto en el simulador y la vista previa real es correcta.
v-if y v-for no se pueden usar al mismo tiempo bajo la misma etiqueta.
Cuando se introduce un componente personalizado en la página, habrá una etiqueta de plantilla en la capa exterior del resultado renderizado, lo que hará que los estilos de algunos selectores no coincidan.

El kernel del navegador de cada subprograma es diferente, lo que provocará problemas de compatibilidad con CSS

Para obtener más información, consulte: https://ask.dcloud.net.cn/article/1318

Tratar con un vendor.js demasiado grande

La herramienta de subprograma indica que vendor.js es demasiado grande y se ha omitido la conversión de es6 a es5. Este problema de conversión en sí mismo no necesita ser molestado, porque vendor.js ya es es5.

Con respecto al control de volumen, consulte lo siguiente:

Use código en tiempo de ejecución para comprimir el proyecto creado por HBuilderX y marque Ejecutar -> Ejecutar en Mini Program Simulator -> Si comprimir el código en tiempo de ejecución. El proyecto creado por cli puede agregar el parámetro --minimize en pacakge.json, ejemplo : "dev: mp-weixin": "cross-env NODE_ENV = desarrollo UNI_PLATFORM = mp-weixin vue-cli-service uni-build --watch --minimize"
Utilice la optimización de la subcontratación, instrucciones sobre la optimización de la subcontratación.