Problemas comunes y soluciones para el desarrollo rápido de aplicaciones [Actualización continua]

He estado en contacto con las aplicaciones por un tiempo, pisé los pozos grandes y pequeños y me permití vivir hasta el día de hoy. Prepárese para publicar actualizaciones continuas aquí, registre los problemas encontrados y las soluciones para beneficio del público.

aspecto css

1. El texto vertical no es compatible

Actualmente, el oficial no admite el modo de escritura. Además de esperar el soporte oficial de esta API, también puede usar un truco: establezca un ancho relativamente pequeño para el elemento.

2. alineación de texto: centro; centro no válido

Dado que la aplicación rápida por defecto es el diseño flexible, justify-content: center debe usarse cuando está centrado;

aspecto plantilla

1. Después de usar el componente de lista, no se puede desplazar toda la página

El componente de la lista debe agregar "scrollpage = true". https: //doc.quickapp.cn/widge ...

2. El componente de la lista se desliza hacia adelante y hacia atrás sin ningún motivo. Lo sentimos, "Aplicación rápida" ha dejado de ejecutarse.

Lo más probable es que sea causado por una estructura de archivo diferente en su elemento de lista

<list-item>
 <div if={{item.img}}>
   <image src='{{item.img}}'>
 </div>
 <div else>
   <text>{{item.text}}</text>
 </div>
</list-item>

El mismo tipo de elemento de lista debe tener una estructura DOM completamente consistente . La estructura dom del elemento de lista en el ejemplo anterior cambiará, y debería ser posible utilizar dos tipos diferentes de elemento de lista.

<list-item type="img" if={{item.img}}>
 <div>
   <image src='{{item.img}}'>
 </div>
</list-item>
<list type="text" else>
 <div>
   <text>{{item.text}}</text>
 </div>
</list-item>

3. ¿No puedo cambiar el estilo del fragmento HTML insertado por richtext? A veces la imagen está más allá del borde de la pantalla.

Dado que no hay una interfaz oficial para modificar el estilo de texto enriquecido, un método que se puede utilizar actualmente es utilizar la búsqueda regular para que coincida, y luego agregar el estilo donde sea necesario

4. El componente de la lista a veces no se procesa

Me tomó mucho tiempo resolver este problema. Este es un error conocido de la aplicación Kuai.
Este problema no se puede representar cuando la lista se usa en la tercera capa.

<template>
<div>
  <div>
    <list>
    ...
    </list>
  </div>
</div>
</template>

Solución: cambie a div o no lo coloque en la tercera capa.

aspecto js

1, storage.get establece la variable en el éxito sin respuesta

var a;
storage.get({
  key: 'a',
  success: function (data) {
    a = data;
  }
})
console.log(a) //undefined 

La razón es que el almacenamiento es asíncrono.

Otros

1. Cómo lograr el efecto de pantalla completa

Establezca la visualización en el archivo de configuración manifest.json, "fullScreen": false, para ocultar la barra de estado de la batería de la señal de la batería; "titleBar": false; para ocultar el titleBar. Esto lo hará a pantalla completa.

2. Después de actualizar el proyecto, la imagen de fondo se convierte en un fondo blanco.

La imagen de fondo usa una ruta relativa, y el proyecto maneja la ruta relativa con un error pequeño; cámbielo temporalmente a una ruta absoluta.

3. El comando hap no se puede encontrar después de la instalación de Windows

Esto probablemente se deba a que el directorio de instalación de npm no tiene variables de entorno configuradas.

npm prefix -g 
// 会打印一个出一个路径，将它添加进系统变量中
// 再次运行
npm install -g hap-toolkit

Referencia:
aplicación rápida de pozos de minería y diseño flexible para explicar
documentos de desarrollo