La nueva compañía comienza con pequeños programas.
30 días, desde la entrada hasta el presente, no se ha rendido. . .
Aunque el mini programa se lanzó hace casi un año, la mayoría de los hermanos que subieron al pozo lo han pisado. Y me he quedado atrapado en la fase de aprendizaje de "Hello World".
Primero, no hay proyecto, solo el proyecto es la base del aprendizaje práctico;
segundo, acaba de salir, siempre hay muchos pozos. Escalar siempre es doloroso y feliz.
No importa cuántas excusas, el proyecto del producto debe entregarse en la mesa.
No aconsejes tus mangas, solo hazlo.
Applet nuevo
WeChat lanza un pequeño programa que quiere lograr una experiencia de usuario lista para usar y lista para usar. Elimine el tedioso proceso de descarga e instalación de la APLICACIÓN. Parece la PWA de Google, pero pasará un tiempo antes de que la PWA se vuelva popular en China. Con la ayuda de los grupos de usuarios de WeChat, los applets tienen bajos costos de implantación y son fácilmente aceptados por los usuarios.
El estilo de código del applet es en realidad muy similar a Vue. Para los estudiantes que están acostumbrados al modelo de desarrollo de Vue, no hay muchos problemas para comenzar.
El applet no es compatible con los marcos front-end convencionales, como Vue, Angular, React, jQuery, etc., y el applet tiene su propio conjunto de escritura de contenedor de vista (Dom), que es diferente del HTML habitual que escribimos en la web. Pero CSS3 no ha cambiado mucho. Aunque el nombre del archivo se cambió a (.wxss)
Este proyecto utiliza webpack como herramienta de empaquetado, compila el código en una especificación de catálogo de códigos que cumple con pequeños programas y utiliza el complemento wechat-mina-loader. El desarrollo real es el mismo que los hábitos de desarrollo de Vue.
Babel completó ES6 a ES5, compilación sass, compresión y transformación, etc. todo lo puso en el paquete web.
No es compatible con la operación dom
Los objetos de ventana y documento no se pueden usar en scripts de applet, por lo que no se puede operar dom. Si desea operar el nodo, disponiblewx.createSelectorQuery()
Además, el modelo de desarrollo basado en datos es el mismo que Vue, pero la escritura cambia (vue: v-if, applet: wx: if)
diseño rpx
rpx (píxel receptivo): puede adaptarse de acuerdo con el ancho de la pantalla. El ancho de la pantalla es de 750rpx. Por ejemplo, en el iPhone6, el ancho de pantalla es de 375 px y hay 750 píxeles físicos, luego 750rpx = 375px = 750 píxeles físicos y 1rpx = 0.5px = 1 píxel físico.
Los diseñadores pueden usar iPhone6 como base para el borrador del diseño. Básicamente, puede reemplazar px con rpx. Sin embargo, en algunos formularios o páginas de solicitud, el uso de rpx en el borrador del diseño hará que el teléfono móvil de pantalla pequeña se vea más pequeño. La página de solicitud puede ser Consulte weui para usar px para lograr
Jerarquía de enrutamiento
wx.navigateTo(OBJECT)
Mantenga la página actual, salte a una página en la aplicación, use wx.navigateBack para regresar a la página original
wx.redirctTo(OBJECT)
Cierra la página actual y salta a una página en la aplicación
wx.switchTab(OBJECT)
Salte a la página tabBar y cierre todas las demás páginas que no sean tabBar
wx.reLaunch(OBJECT)
Cierra todas las páginas y abre una página en la aplicación
El applet solo puede abrir y abrir 5 páginas al mismo tiempo. Cuando se abren 5 páginas, wx.navigateTo no puede abrir una página nueva normalmente. Evite múltiples niveles de interacción o use wx.redirctTo para redirigir
barra de navegación inferior tabBar
tabBar es una matriz. Configure un mínimo de 2 y un máximo de 5, las matrices de pestañas se ordenan en orden
Desplazamiento de página hacia arriba
Soporte básico de la biblioteca 1.4.0
wx.pageScrollTo({
scrollTop: 0 //滚动到页面的目标位置（单位px）
})Recursos de imagen, imágenes de fondo en CSS
El CSS no puede usar la imagen de los recursos locales (en el directorio de desarrollo) como imagen de fondo. Puede usar recursos de imagen de red, o base64, o usar la etiqueta de imagen. Los recursos del icono TabBar pueden usar recursos locales
La diferencia entre unionid y openid
Cada usuario tiene un openid único en cada applet. Si desea compartir información del usuario en múltiples cuentas públicas y applets para identificar al usuario de manera uniforme, debe usar el unionid. Para obtener uniond, debe registrar la plataforma abierta WeChat, y debe vincular el pequeño programa y la cuenta pública para vincular (no más de 10, más de 10 deben solicitar la certificación llamada la tercera plataforma de lanzamiento).
error de textarea en páginas de desplazamiento
El área de texto, el mapa y otros componentes son componentes nativos creados por el cliente, y su nivel es el más alto. Si encuentra elementos de posicionamiento. Siempre arriba, no puedo cubrirlo.
- No utilice componentes de área de texto en vista de desplazamiento, deslizador, vista de selector, vista móvil
- La animación CSS no es válida para textarea
Escenario del proyecto: un botón (posición: fijo) está fijo en la parte inferior de la página. Cuando la página se desplaza, el área de texto siempre está en el botón. Haga clic en el botón para hacer clic en el área de texto
Puede configurar el tiempo de espera para las solicitudes de red
configuración en app.js
"networkTimeout": {
"request": 10000 // 10秒
}configuración de ventana
navigationBarTextStyle el color del título de la barra de navegación solo admite la
barra de estado en blanco y negro , la barra de navegación, el título, el color de fondo de la ventana admite el color sólido, no admite el color degradado
Problema de parámetros
- Agregar parámetros en la url, como
url?a=1&b=2,onLoad(options) options.query.a, options.query.bse puede obtener - Escanee el código del applet en la página, si desea obtener los parámetros contenidos en la url del código del applet, puede hacerlo a través de options.scene, pero necesita convertir el valor de la escena en el código QR decodeURIComponent (options.scene), puede usarlo en la etapa de depuración La compilación condicional de la herramienta de desarrollo compila el parámetro personalizado escena = xxxx para la simulación. El valor del parámetro de la escena durante la simulación de la herramienta de desarrollo debe ser código urlen (parámetro de inicio: escena = n% 3D1001) La escena real = n = 1001, parámetro n = 1001
imagen etiqueta imagen
Ancho predeterminado de la imagen: 300px, altura: 225px, lazy-load solo es efectivo para las imágenes debajo de la página y la vista de desplazamiento.
Modo de zoom de modo, mode = "widthFix" se usa más comúnmente (el ancho no cambia, la altura cambia automáticamente y el ancho de la imagen original se mantiene (Alta relación sin cambios)
El applet puede monitorear después de cerrar el applet, pero no se puede bloquear.
Escenario: quiero abrir un cuadro emergente cuando se cierra el applet y evitar que se cierre (es temporalmente imposible de lograr)
Código de Applet
Hay varias formas para el código de applet (código de girasol), y el código de applet se puede mostrar normalmente solo después de que se lanza el applet
El tiempo de revisión para el primer envío del applet es más largo que el último.
La primera revisión de envío suele ser de 1 a 2 días. Entonces, para poder conectarse en línea a tiempo, se recomienda ir primero a la versión temporal (puede poner una página de solicitud), después de la primera versión de revisión. Revisión diaria, 2-3 horas es suficiente.
SetData frecuente causará problemas de rendimiento
Las operaciones frecuentes de setData pueden causar paradas, retrasos serios en la retroalimentación e incluso pueden fallar.
Escenario: originalmente planeado para usar countUp para la animación digital, el principio es cambiar el valor digital con frecuencia, establecer la operación de datos y representar la plantilla.
ES6 a ES5, el applet detecta archivos js en el directorio (muy pocos)
En el proyecto, se usó webpack para convertir ES6 a ES5, por lo que se desactivó la función ES6 a ES5 del applet WeChat. Este pozo está más oculto. Durante la prueba, se informó un error js en la máquina real 5S. Se descubrió que no se utilizó un archivo js (se utilizó ES6, no ES5). El applet WeChat detectará el archivo js en el directorio. WeChat viene con ES6 a ES5, y detecta que el archivo js en el directorio no es compatible con ES5, e informa un error. Este error solo apareció en la máquina real 5S, 5C es normal. Si activa ES6 a ES5 en la herramienta de desarrollo WeChat, automáticamente lo ayudará a completar el trabajo de conversión, y no habrá problemas similares.
Comparta algunas bibliotecas de terceros comúnmente utilizadas para el desarrollo de programas pequeños
- weui-wxss (biblioteca de estilo weui de la versión de applet) Github: https://github.com/Tencent/weui-wxss
- wepy (marco de componentes pequeños del programa) Github: https://github.com/Tencent/wepy
- skyvow / vux (pequeña biblioteca de componentes del programa) Github: https://github.com/skyvow/wux
- xiaolin3303 / wx-charts (icono pequeño del programa) Github: https://github.com/xiaolin3303/wx-charts
Autor: mezclarse con los
originales de papel, colocar indebida de bienvenida que. Por favor indique la fuente.