Catálogo de tutoriales de desarrollo del programa Mini WeChat
Artículo principal
1 Pits actuales
2 Cómo usar WebSocket razonablemente
3 Modifique dinámicamente el color de svg de acuerdo con el color del tema
Fanwai
WeChat applet desarrollo road-map call, debe prestar atención a varios pits
"una persona , una serie "Cheng" - [Acerca de Ball en línea] Mini Programa de Selección de Tecnología y Diseño de Arquitectura
Escrito a principios del
verano de 20190729, también es el comienzo del viaje de desarrollo del subprograma WeChat.
El llamado pozo
1. Será mejor que no cambie main.js.
Cuando creamos un nuevo proyecto uniapp en HBuilder X, el main.js predeterminado se ve así:
importar Vue desde 'vue'
importar la aplicación desde './App'
Vue.config.productionTip = falso
App.mpType = 'aplicación'
aplicación const = nueva aplicación Vue ({ ... App }) . $ mount (
)
Si elimina la aplicación ... o la cambia a la aplicación ..., aunque el subprograma WeChat compilado no informará de un error, los eventos de inicio y presentación en App.vue no se ejecutarán. Todavía no sé la razón específica, así que no cambie esta oración de todos modos.
2. Creación de funciones
en la nube en uniapp En la actualidad, es muy conveniente crear funciones en la nube en la plataforma de desarrollo de subprogramas WeChat, pero parece poco amigable crear funciones en la nube en uniapp. Si crea una función en la nube en la plataforma de desarrollo de subprogramas WeChat compilada, cuando la plataforma de desarrollo está cerrada, uniapp se vuelve a compilar y se abre, la función en la nube no existirá.
Para editar y depurar funciones en la nube localmente, aquí hay un conjunto de lógica razonable, como sigue
Paso 1: en el proyecto uniapp, en la vista del código fuente de manifest.json, ingrese el siguiente código
"mp-weixin": { "cloudfunctionRoot": "static / cloudfunctions /", ... } Función: especifica la carpeta local de la función de nube. Paso 2: Cree una nueva carpeta de funciones de nube en la carpeta estática Paso 3: Cree un nuevo archivo README.md en la carpeta de funciones de nube o cualquier otro archivo. Función: asegúrese de que la carpeta de funciones en la nube exista después de compilarla en un programa pequeño. Si no hay archivos en la carpeta, la carpeta no se mostrará en la plataforma de desarrollo del subprograma WeChat de forma predeterminada. Paso 4: En la plataforma del desarrollador, haga clic con el botón derecho en la carpeta de funciones de la nube y haga clic en "Sincronizar la lista de funciones de la nube", como se muestra en la Figura 1. En este momento, se creará una nueva carpeta de lista de funciones en esta carpeta, como se muestra en la Figura 2 . Figura 1 Figura 2 Paso 5: Haga clic con el botón derecho en la carpeta de la función de nube que debe editarse, haga clic en "Descargar función de nube", los dos archivos index.js y package.json se descargarán en la carpeta y podemos editar la nube en la función index.js. Paso 6: Después de editar, recuerde hacer clic con el botón derecho en la carpeta de la función en la nube, hacer clic en "Cargar e implementar: Dependencia de instalación en la nube", cargar la función en la nube en la nube y asegurarse de que la función en la nube descargada la próxima vez esté actualizada. Cabe señalar que las funciones en la nube no se descargan en la carpeta static / cloudfunctions, sino para descomprimir / dist / dev / mp-weixin / static / cloudfunctions, por lo que no puede encontrarlas en la carpeta. Varios archivos de funciones en la nube son solo se muestra en la plataforma de desarrollo.
3. La función en la nube instala otros paquetes de dependencia de npm.
Haga clic con el botón derecho en la carpeta de la función en la nube, haga clic en "Abrir en la terminal" e instale los paquetes de dependencia necesarios con la línea de comandos.
Haga clic con el botón derecho en la carpeta de la función en la nube y haga clic en "Cargar e implementar: Todos los archivos "
4. Mini programa ¿Cuáles son las similitudes y diferencias entre la API del cliente y la API del servidor
? La API del subprograma se ejecuta en el js del subprograma. Solo puede operar con los propios datos del usuario y no tiene autoridad para operar con los datos de otros usuarios.
La API del servidor se ejecuta en una función en la nube y tiene la máxima autoridad.
La principal diferencia radica en el nivel de autoridad. Además, el subprograma puede leer hasta 20 registros de la base de datos y la API del lado del servidor puede leer 100, y la capacidad de llamar a los recursos del servidor también es diferente.
Por lo tanto, se recomienda que solo las operaciones que involucren el propio (como insertar un nuevo registro, actualizar el propio registro) puedan usar la API del programa pequeño, mientras que las operaciones que involucren atravesar la base de datos, consultas, etc., usen la API del servidor.
5. Eliminar el estilo de botón predeterminado El
subprograma WeChat proporciona a los desarrolladores dos formas de compartir (reenviar) subprogramas, una es compartir en el botón en la esquina superior derecha, la otra es agregar open-type = al botón en la página " compartir "para reenviar. En circunstancias normales, daremos un botón para compartir en la página de configuración del subprograma, pero no queremos el estilo del botón, pero queremos usar algunos estilos de la vista, entonces, ¿cómo eliminar el estilo predeterminado del botón? ?
Si agregamos directamente estilo en línea style = "border: none;" al botón, encontraremos que es inútil. . .
Escritura correcta:
<button class = "share" style = "background-color: white; border-radius: 0;"> </button>
<style>
.share :: after { border: none; } </style> De esta manera, Si se encuentra que el borde del botón ha desaparecido y el fondo se ha cambiado a blanco, entonces podemos usar este botón como otras vistas.
6. El uso de v-if en componentes no se puede usar ===
Hoy se descubrió un error, es decir, cuando v-if se usa en uni-app, no se puede usar === para juzgar la igualdad, solo == =.
7. Uso de websocket
Una de las funciones muy especiales de mi pequeño programa es que necesita enviar y recibir mensajes en tiempo real, similar a las herramientas de chat en tiempo real como QQ y WeChat, pero las funciones no son tan completas. Esto implica la implementación de websocket, que tiene su propia API de función websocket, que puede conectar, cerrar y monitorear varios eventos de conexiones largas. Esta parte no habla de la implementación de back-end. Mi back-end se implementa usando node.js para hacer referencia al paquete ws. Por supuesto, necesitas convertir ws a wss. Esto también es muy simple. Solo necesitas tener un certificado ssl, que se encuentra en el método del paquete ws. El método para convertir ws a wss es el siguiente:
Para obtener más información, consulte el subprograma de github ws
WeChat. La forma recomendada de crear websocket es
var socketTask = uni.connectSocket ({ url: 'wss: //www.example.com/socket', // Solo un ejemplo, no una dirección de interfaz real. complete: () => {} }); El objeto socketTask tiene su propio evento, una pequeña palabra de programa puede crear 10 objetos socketTask, es decir, 10 conexiones largas. Aquí principalmente quiero discutir cómo para un subprograma de varias páginas, cómo hacer que cada página responda a la información devuelta por el websocket, cómo mantener un subprograma con una sola conexión larga y dónde escribir los eventos de monitoreo. Aquí hay una breve idea, porque puede haber muchas personas que quieran entender esta parte (auto sentimiento, porque me ha preocupado por un tiempo), y escribiré un artículo especial en el futuro, pueden prestarle atención. . La siguiente es la idea:
Cree un objeto socketTask global al iniciarlo en App.vue del applet, (una variable global montada en vue.property), y luego use directamente el readyState del objeto socketTask en cada página para determinar el estado de la conexión para
crear una función global, utilizado para crear y monitorear socket, y referenciarlo directamente donde sea necesario, también montar en vue.property y
usar vuex, escuchar el mensaje en la función, para diferentes tipos de mensajes, actualizar el estado de vuex, en el sub requerido Monitorear el estado de vuex en la página.
Tenga en cuenta que las diferentes páginas del reloj no serán destruidas, por lo que para evitar la duplicación del monitoreo, y finalmente esto. $ Watch () la página del evento se oculta cuando unwatch () para cancelar el oyente
resume el
hoyo en realidad encuentra muchos encuentros, algunos quedan fuera temporalmente Escríbalo aquí.
Sé que los artículos con esta estructura son muy impopulares, porque la mayoría de la gente no los recuperará, por lo que las partes importantes se dividirán en artículos separados más adelante. El subprograma de compilación de Uniapp aún se está mejorando y se encontraron algunos errores en el proceso, pero parece que se han resuelto después de informar al personal, por lo que no los repetiré aquí. Los mini programas son una plataforma de bajo costo con mucho espacio para el desarrollo. Espero que cada vez más desarrolladores de mini programas sean más grandes y más fuertes.