[Programa pequeño] Varios problemas de compatibilidad en el desarrollo front-end de las páginas de WeChat H5:

---

1. El lado ios es compatible con la altura del cursor de entrada

[Problema] El cursor del cuadro de entrada de entrada se muestra en el teléfono Android sin ningún problema, pero cuando se hace clic en la entrada en el teléfono Apple , la altura del cursor es la misma que la altura del cuadro principal. Por ejemplo, en la imagen de abajo, la imagen de la izquierda es el cursor del cuadro de entrada que normalmente se espera, y la derecha es el cursor de entrada de ios.

[Análisis] Por lo general, estamos acostumbrados a usar el atributo de altura para establecer la altura entre líneas y el atributo de altura de línea para establecer la distancia entre líneas (altura de línea). Al hacer clic en la entrada, la altura del cursor será automáticamente la misma que la altura de la caja principal. (El principio de diseño de Google Chrome, otra posibilidad es que cuando no hay contenido, la altura del cursor es igual al valor de la altura de línea de la entrada. Cuando hay contenido, la altura del cursor desde la parte superior de la entrada al final del texto [ ] y la altura
de la línea 解决办法El contenido de altura de línea alta se expande con relleno

2. Cuando la página de WeChat h5 en el lado de ios se desliza hacia arriba y hacia abajo, se congela y falta la página

[Problema] En el lado de ios, al deslizar la página hacia arriba y hacia abajo, si la altura de la página excede una pantalla, habrá bloqueos obvios y parte del contenido de la página no se muestra por completo, como la imagen a continuación, el la imagen de la derecha es una página normal, y el lado es ios. Después de deslizar hacia arriba y hacia abajo, Caton hace que se pierda la parte inferior de la imagen de la izquierda.

[Análisis] En términos generales, el kernel del navegador WeChat, Android usa el kernel WebKit incorporado e iOS usa el kernel Safari incorporado debido a las razones de Apple, y Safari usa controles nativos para implementar el desplazamiento desbordado. Para una página web con -webkit-overflow-scrolling, se creará un UIScrollView y se proporcionará una subcapa para que la utilice el módulo de representación. [Para ser verificado]
[ 解决办法] Simplemente agregue la siguiente línea de código en el estilo público

*{
    
    
	-webkit-overflow-scrolling: touch;
}

Pero este atributo tiene errores. Por ejemplo, si tiene un nodo con posicionamiento absoluto establecido en su página, la visualización del nodo se verá afectada y, por supuesto, habrá algunos otros errores.

Ampliar conocimientos: ¿Qué es -webkit-overflow-scrolling:touch?
Esto se define en MDN:
la propiedad -webkit-overflow-scrolling controla si el elemento usa el efecto de rebote de desplazamiento en los dispositivos móviles.auto: use el desplazamiento normal, cuando se quita el dedo de la pantalla táctil, el desplazamiento se detendrá inmediatamente. táctil: use el desplazamiento con efecto rebote, cuando se quita el dedo de la pantalla táctil, el contenido continuará manteniendo el efecto de desplazamiento durante un período de tiempo. La velocidad y la duración del desplazamiento continuo son proporcionales a la intensidad del gesto de desplazamiento. También crea un nuevo contexto de pila.

3. El teclado ios se activa y la página no vuelve a su posición original después de guardar el teclado.

[Problema] Después de ingresar el contenido, aparece el teclado en pantalla y el contenido de la página se mueve hacia arriba como un todo, pero cuando se guarda el teclado, el contenido de la página no se desliza hacia abajo

[Análisis] Cuando el elemento con posicionamiento fijo se enfoca en el cuadro de entrada en el elemento, el teclado virtual que aparece ocupa un lugar. Cuando se pierde el foco, el teclado virtual desaparece, pero aún ocupa el lugar, lo que hace que la entrada cuadro para no poder ingresar de nuevo Cuando se pierde el foco, se da un evento
[ 解决办法]

<div class="list-warp">
  <div class="title"><span>投·被保险人姓名</span></div>
   <div class="content">
     <input class="content-input" 
            placeholder="请输入姓名"
            v-model="peopleList.name"
           @focus="changefocus()"
           @blur.prevent="changeBlur()"/>    
   </div>
</div>

changeBlur(){
    
    
   let u = navigator.userAgent, app = navigator.appVersion;
   let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
   if(isIOS){
    
    
      setTimeout(() => {
         const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
         window.scrollTo(0, Math.max(scrollHeight - 1, 0))
       }, 200)
    }
} 

Amplíe el conocimiento: la posición: el elemento fijo está en ios, y se empujará hacia arriba cuando se guarde el teclado, especialmente el teclado de terceros

4. El teclado emergente de Android cubre el cuadro de texto

[Problema] Android WeChat H5 abre el teclado en pantalla y bloquea el cuadro de entrada de entrada. La imagen de abajo a la izquierda es la apariencia cuando se espera que se active el teclado, y la derecha es la apariencia real del teclado. 【 】Agregar eventos de enfoque

a 解决办法las etiquetas de entrada y área de texto, de la siguiente manera, primero juzgue si es correcto. La operación en el teléfono Android, por supuesto, no necesita juzgar el modelo, las propiedades y métodos del objeto del documento, setTimeout se retrasa 0.5 segundos, porque llamar al El teclado de Android es un poco lento, por lo que si el procesamiento no se retrasa, el desplazamiento no será válido

changefocus(){
    
    
  let u = navigator.userAgent, app = navigator.appVersion;
  let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
  if(isAndroid){
    
    
    setTimeout(function() {
    
    
     document.activeElement.scrollIntoViewIfNeeded();
     document.activeElement.scrollIntoView();
    }, 500);       
  }
}, 

Ampliar conocimiento:
el método Element.scrollIntoView() desplaza el elemento actual al área visible de la ventana del navegador. El método Element.scrollIntoViewIfNeeded() también se usa para desplazar elementos que no están en el área visible de la ventana del navegador al área visible de la ventana del navegador. pero si el elemento ya está dentro del área visible de la ventana del navegador, no se producirá desplazamiento

5. El enrutamiento en Vue usa el modo hash. Al desarrollar el uso compartido de la página WeChat H5, el uso compartido se configura correctamente en Android, pero el uso compartido en iOS es anormal.

[Problema] Es normal hacer clic para compartir la página actual de ios con amigos. Si se comparte dos veces, saltará a la página de inicio; cuando se usa el enrutador vue para saltar a la segunda página y compartirla, la configuración para compartir falla Los recursos compartidos de Android anteriores son todos Normalmente

[Análisis] jssdk está firmado por el backend y verificado por el frontend, pero a veces entre dominios, ios traerá automáticamente from=singlemessage&isappinstalled=0 y otros parámetros después de compartir. Los parámetros de compartir Momentos son no es lo mismo Parece que el sistema tiene diferentes parámetros Es diferente, pero no puede obtener los siguientes parámetros cada vez que obtiene la url
【解决办法】
(1) Puede usar la página this.$router.push para saltar a la ventana .ubicación.href en lugar de usar el salto de enrutamiento. De esta manera, la dirección en la barra de direcciones es la misma que la dirección de la página actual y se puede compartir con éxito (cuando no hay muchas páginas adecuadas para compartir, utilícela como una sola página, actualice la página y salte, o...) (2) Guarde la
dirección de entrada localmente, sáquela cuando necesite obtener la firma Nota: sessionStorage.setItem('href',href); ¡Solo guárdelo cuando ingrese por primera vez a la aplicación única! 【Este método no está verificado】

Fuera de tema: si puede usar la página escrita en un programa pequeño, intente usar el programa pequeño. Es posible que el desarrollo de H5 no vea el problema al mirar el efecto de página en la herramienta de desarrollo de WeChat, porque no se puede invocar el teclado virtual. Para evitar la publicación frecuente en línea, puede usar cáscaras de maní o idcfengye para penetrar en la intranet, crear una página h5 de entorno de desarrollo a la que se pueda acceder a través de un nombre de dominio y verificar el efecto en su teléfono móvil. -en el mecanismo de almacenamiento en caché del navegador. Hará que el código (especialmente js) recién enviado tarde aproximadamente media hora en surtir efecto.