Cómo crear un Mini Programa de WeChat con WorkBuddy: Guía para principiantes

Si quieres crear un Mini Programa de WeChat, lo primero que te va a frenar es un montón de cosas: las Herramientas de desarrollo de WeChat, los directorios del proyecto, el AppID, los entornos de desarrollo en la nube, las bases de datos, la carga y la gestión de versiones del backend.

¿Y todo esto qué es? Aún no has escrito ni una línea de código y ya estás atascado con estos tecnicismos.

No importa. Aunque nunca hayas escrito código, nunca hayas creado un Mini Programa o ni siquiera sepas qué es un AppID, este artículo está escrito para ti.

Cómo se siente crear uno en una sola tarde

Después de leer esto, sabrás cómo:

• Importar código a las Herramientas de desarrollo de WeChat (sin necesidad de registrar un AppID primero)
• Abrirlo en tu propio celular
• Generar un código QR para enviarlo a tus amigos y que lo prueben
• Enviarlo a revisión, publicarlo y hacer que sea buscable

Primero, mira mi producto terminado.

Se ve decente, ¿verdad? Empecemos.

I. Diez minutos antes de empezar

Abre WorkBuddy, busca al experto "WeChat Mini Program Developer" en la columna de expertos, habilidades o conectores, e invócalo.

Después, no le digas solo "Ayúdame a hacer un Mini Programa".

1Quiero hacer un Mini Programa de seguimiento de hábitos diarios para mi uso personal.
2Primer paso: ¿qué necesito comunicarte? Aún no escribas código; primero hablemos.

Reemplaza "seguimiento de hábitos diarios" por tu propia idea.

Luego te preguntará cómo quieres almacenar los datos, qué tan completa debe ser la primera versión, qué método de desarrollo planeas usar, si necesitas recordatorios diarios, cuáles son los tipos de hábitos, la granularidad de tiempo de los recordatorios, tus preferencias de estilo visual y, finalmente, te pedirá ajustar las dimensiones de clasificación, el archivado/eliminación y los ciclos de estadísticas.

Te ayuda a pensar en todas esas preguntas que no habías considerado y define el rumbo.

No busques la perfección desde el inicio; deja que cree la versión 1.0 primero. Una vez que tengas la estructura básica, puedes ajustarla y modificarla poco a poco. Cuando la dirección esté definida, deja que empiece a trabajar.

Mientras escribe el código, puedes instalar las Herramientas de desarrollo de WeChat.

Esta es la herramienta oficial de WeChat, porque tu Mini Programa eventualmente se ejecutará, previsualizará y subirá desde aquí. Busca "WeChat Developer Tools" en la página oficial de descargas, selecciona la Versión Estable, sigue las instrucciones para instalarla y escanea el código para iniciar sesión. Una vez adentro, se ve así:

Algunos puntos a tener en cuenta:

💡 Para tu primera vez, limítate a una o dos funciones. Cuantas más funciones, más páginas que generar y más errores que pueden aparecer. Primero arregla lo esencial.

💡 Cambia el modelo a HY3; no lo dejes en automático. Actualmente es gratis por tiempo limitado con uso ilimitado. (Revisa el backend para ver si la promoción sigue activa cuando leas esto).

⚠️ Es normal que los nombres de los menús difieran de lo que yo digo. Estas herramientas de software se actualizan con frecuencia. Si tienes un problema, solo mándale una captura de pantalla a WorkBuddy y te dirá dónde hacer clic.

Cuando el código esté terminado, te dará la ruta de la carpeta del proyecto. Guarda esa ruta; la necesitarás para el siguiente paso. Generalmente incluye instrucciones de importación; si no, solo pregunta: "El código está listo, ¿cómo lo importo a las Herramientas de desarrollo de WeChat?"

Ahora tienes: un conjunto completo de código del Mini Programa y las Herramientas de desarrollo de WeChat instaladas.

Todo está listo. Es hora de previsualizar el producto semiacabado.

II. Cómo ver el producto semiacabado

Abre las Herramientas de desarrollo de WeChat que acabas de descargar, escanea para iniciar sesión y haz clic en el botón +.

Luego llena estos tres campos:

1. Nombre del proyecto: El que quieras, siempre que lo reconozcas.
2. Directorio: Pega la dirección del paso anterior.
3. AppID: Puede aparecer en rojo; no pasa nada. Haz clic en "Cuenta de prueba" para continuar sin problemas.

Para el servicio de backend, selecciona "No usar servicios en la nube". Haz clic en Crear y luego en "Confiar y ejecutar". La herramienta empezará a compilar automáticamente.

⚠️ Cuando debas cambiarte a un AppID formal: si quieres usar el desarrollo en la nube de WeChat, subirlo o dejar que otros lo prueben, registra uno gratis con un correo electrónico. El capítulo 6 lo explica en detalle.

⚠️ Además, piensa bien la categoría antes de registrarte. Tienes que elegir entre Mini Juegos y otras opciones, y no se puede cambiar después.

Si todo sale bien, verás tu Mini Programa en la herramienta: el simulador a la izquierda y el código a la derecha.

Ahora tienes: un Mini Programa funcionando en tu computadora.

O quizás veas una pantalla llena de texto rojo de errores. No entres en pánico; es fácil de arreglar.

III. ¿Texto rojo por todas partes? Deja que el autor lo arregle

Es normal que haya errores durante la primera compilación.

La solución es simple: deja que quien lo escribió lo arregle. 😂

En concreto:

1. Busca el panel Depurador en las Herramientas de desarrollo de WeChat; todos los errores rojos están ahí.
2. Copia el mensaje de error completo —no tomes una captura parcial ni lo parafrasees.
3. Envíalo a WorkBuddy. Ni siquiera necesitas decir nada; lo arreglará por ti.

Después de analizarlo, o arregla el código directamente o te guía por los ajustes necesarios.

Dos cosas a tener en cuenta:

⚠️ Un tipo de "error" no es realmente un error: los Mini Programas no admiten algunos estilos de codificación web (como ciertos selectores o efectos hover). Si se ve raro en la computadora, es porque el Mini Programa no lo admite. Solo dile a la IA: "Este efecto no es compatible con los Mini Programas, usa otra forma".

⚠️ Otra cosa es un "falso" error: los cambios no surten efecto. No dudes de la IA todavía; haz clic en el botón de actualizar "Compilar" que está junto a "Compilación normal" en la esquina superior derecha. Eso normalmente lo arregla.

Ahora tienes: un Mini Programa fluido, sin pantallas en blanco ni problemas.

Se ve genial en el simulador de la computadora, pero puede que no sea igual en un celular real.

IV. Se ve bien en la PC, pero quizás no en el celular

Es común que los estilos se descuadren o que los botones no se puedan tocar en un celular real aunque funcionen en el simulador. Los tamaños de pantalla y el tacto vs. el mouse son diferentes.

Para llevarlo a tu celular, haz clic en un botón: Previsualizar.

La herramienta genera un código QR. Escanéalo con WeChat y tu Mini Programa se abrirá en tu celular.

Aquí es donde la gente se confunde: Previsualizar, Prueba en dispositivo real y Depuración remota generan códigos QR. ¿Cuál es la diferencia?

⚠️ No uses Previsualizar como prueba final. Previsualizar es solo para un vistazo rápido; no significa que todo funcione. Usa Prueba en dispositivo real para confirmar.

⚠️ Una cosa más: para facilitar el desarrollo, algunas verificaciones están desactivadas en la herramienta, pero siguen activas en los dispositivos reales. A veces funciona en la PC pero falla en el celular.

Ahora tienes: un Mini Programa que se abre en tu propio celular.

Seguramente ya quieres enviarle el código a un amigo. Espera, primero haz estas cinco verificaciones, ¡o estará lleno de errores! 😂

V. No dejes que tus amigos prueben tus errores

Solo toma cinco minutos. Haz estas cinco cosas tú mismo:

1. Agregar: agrega una entrada nueva; ¿aparece en la lista?
2. Estado: alterna entre completado e incompleto; ¿funciona?
3. Reingreso: sal del Mini Programa y vuelve a abrirlo; ¿los datos que acabas de agregar siguen ahí?
4. Eliminar: borra una entrada; ¿sigue eliminada después de actualizar?
5. Valores vacíos: haz clic en agregar sin llenar nada; debería mostrar un aviso y no crear un registro vacío.

Los puntos 3 y 5 suelen pasarse por alto si no los pruebas específicamente.

Después de arreglar cualquier punto, vuelve a ejecutar los cinco. Arreglar A a menudo rompe B.

⚠️ Pasar los cinco solo significa que no se va a estrellar de inmediato. Esto es un proceso de pulido donde encontrarás problemas raros o tendrás ideas nuevas. Eventualmente, tendrás una versión con la que estés satisfecho.

Ahora tienes: un Mini Programa pulido que te hace feliz.

Ahora solo necesitas una última cosa para enviárselo a tus amigos: una identidad formal.

VI. Envía un código para que tus amigos lo escaneen

Para que otros puedan escanearlo, necesitas un AppID formal. Cómo registrarlo:

1. Abre la plataforma de cuentas oficiales de WeChat y sigue el proceso de registro. Hay varios tipos: Cuentas Oficiales, Mini Programas, Mini Juegos. Elige Mini Programa. ⚠️ Si eliges el equivocado no se puede cambiar; tendrías que borrarlo y empezar de nuevo.
2. Usa un correo electrónico que no esté registrado. Ingresa el correo, haz clic en activar, escribe el código de verificación que llegó a tu bandeja de entrada y establece una contraseña.

1. Selecciona el tipo de sujeto. Para uso personal, elige "Individual". Requiere verificación de identidad y un escaneo con WeChat; es gratis.
2. Entra al backend y busca el AppID en Gestión de desarrollo. Empieza con "wx"; cópialo.

Una vez que tengas el AppID, envíale esto a tu WorkBuddy:

1Cambia el AppID del proyecto por mi AppID: [tu cadena wx...]

Luego vuelve a las Herramientas de desarrollo de WeChat y haz clic en "Subir" en la esquina superior derecha.

Te pedirá un número de versión y notas. Usa 0.0.1 la primera vez. Después de subirlo, ve a la página de Gestión de versiones en el backend de WeChat. Verás la versión; haz clic en la flecha hacia abajo para encontrar la "Versión de prueba". Una vez configurada, te da un código QR de prueba.

¡Ahora puedes presumir tu Mini Programa con tus amigos! Pueden usarlo escaneando el código sin que necesites publicarlo ni pasar una revisión formal.

Dos cosas a tener en cuenta:

Primero, subir no es publicar. Subir solo coloca la versión de desarrollo en el backend. Todavía no es buscable; solo las personas con el código pueden entrar.

Segundo, las Versiones de prueba tienen vencimiento. Generalmente siete días. Solo vuelve a subirlo para obtener un código nuevo. Es perfecto para demostraciones o para compartirlo con algunos amigos.

⚠️ Para muchos, esto es suficiente. Si es solo para uso personal o para amigos, la Versión de prueba funciona perfectamente. Explicaré la certificación y el registro en capítulos posteriores.

Ahora tienes: un código QR de prueba para enviar a tus amigos.

Has creado un Mini Programa real. Pero si un amigo agrega datos y cierra la aplicación, desaparecen. ¿Cómo guardamos los datos?

VII. No pierdas datos al cerrar

Todavía no hemos resuelto dónde se almacenan tus datos.

Si los datos solo existen localmente en el celular, se pierden si cambias de celular o quieres compartirlos. Necesitas un backend. Configurar tu propio backend implica servidores, bases de datos, dominios, HTTPS y registro. Evitemos esas molestias y usemos el desarrollo en la nube. La base de datos y la lógica están en la nube; el Mini Programa las llama directamente.

1. Haz clic en "Desarrollo en la nube" en la parte superior de la herramienta → Activar → Anota el ID del entorno.

Cuando hagas clic en activar, puede mostrarte una tarifa de 19.9 RMB/mes, pero espera—debería guiarte automáticamente a un entorno de desarrollo gratuito.

1. Copia el ID del entorno y envíalo a WorkBuddy para que configure el ID de globalData.env.

1. Consola de desarrollo en la nube → Base de datos → Crea colecciones como categories / habits / checkins. Configura los permisos como "Solo el creador puede leer/escribir". WorkBuddy te dirá qué colecciones crear.

1. Haz clic derecho en cloudfunctions/login → Subir y desplegar: instalar dependencias de la nube. Esto asegura que la función en la nube pueda encontrar los paquetes que necesita.

Un consejo: si no encuentras cloudfunctions en tu proyecto, es posible que la carpeta de importación esté equivocada. Cámbiala a la carpeta principal.

Ahora que el almacenamiento de datos está listo, recarga el proyecto. Te pedirá el AppID y el ID del entorno en la nube.

⚠️ No puedes usar una cuenta de prueba para esto; necesitas un AppID formal.

⚠️ El desarrollo en la nube a veces tiene promociones para usuarios nuevos, pero son sensibles al tiempo.

Vuelve a importar la versión que guarda datos, pega tu AppID y selecciona "Desarrollo en la nube de WeChat" para el servicio de backend. Ahora, los datos están conectados.

El almacenamiento de datos está listo. Si quieres que extraños te encuentren o usarlo comercialmente, el verdadero desafío comienza.

VIII. Deja que los extraños te encuentren

Pasar una Versión de prueba es diferente de pasar una revisión oficial.

Primero haz estas seis autoverificaciones:

1. ¿El AppID es formal? Las cuentas de prueba no pueden publicarse.
2. Haz clic en todas las páginas. Sin pantallas en blanco ni cierres inesperados.
3. Configura los dominios del servidor. Si tu aplicación obtiene datos externos, esos dominios deben configurarse en el backend (Desarrollo → Configuración de desarrollo). Solo se permiten HTTPS y WSS, y el dominio debe tener registro (ICP). Las IP no están permitidas.
4. Desmarca "No verificar el dominio de solicitud..." en las herramientas de desarrollo. Eso solo funciona en la herramienta; los dispositivos reales igual lo verifican. Desactívalo y prueba de nuevo.
5. Completa la Guía de protección de privacidad del usuario. Si tu aplicación lee avatares, ubicación o contactos, debes declararlo. De lo contrario, esas API se desactivarán. Omite esto si no tocas información del usuario.
6. Completa el nombre, avatar, introducción y categoría en el backend. Elegir mal la categoría es un motivo común de rechazo.

💡 Si usas el desarrollo en la nube o no usas internet, omite los pasos 3 y 4.

🔴 Preparé esto para ti; solo envíalo a WorkBuddy:

1Voy a enviar un Mini Programa de WeChat a revisión. Ayúdame a revisar este proyecto según estos puntos.
2Arregla lo que puedas y dime qué necesito completar manualmente.
3Verifica si el appid en project.config.json es una cuenta de prueba.
4Enumera todas las rutas de páginas en app.json para que pueda revisar si hay pantallas en blanco.
5Busca en el proyecto wx.request, wx.uploadFile, wx.downloadFile y wx.connectSocket.
6Extrae todos los dominios y agrúpalos en estas cuatro categorías.
7Marca los que no empiecen con https/wss o los que usen IPs para que pueda configurarlos en el backend.
8Cambia urlCheck en project.config.json a true si está en false.
9Busca API de información del usuario (avatar, ubicación, contactos, etc.) y enumera qué archivos/líneas las usan.
10Lo usaré para la Guía de protección de privacidad.
11Revisa si quedó código de depuración console.log.
12Finalmente, dame una tabla resumen con: Elemento de verificación, Estado actual y Siguiente paso.

⚠️ No te saltes el paso 2. Las revisiones oficiales requieren un producto completo. El rechazo por "funcionalidad incompleta" es común.

Luego hay 4 obstáculos antes de enviarlo:

1️⃣ Información del Mini Programa

• Nombre: Algo reconocible (por ejemplo, "Seguimiento de hábitos"). Las cuentas personales no pueden usar "Oficial" o "WeChat".
• Ícono: PNG de 1024x1024.
• Introducción: Una frase que explique la función.
• Alcance del servicio: Elige "Herramientas > Eficiencia" o "Servicios de vida".

2️⃣ Categoría

Las cuentas personales son limitadas. Recomendado: Herramientas > Eficiencia o Notas. La categoría determina qué API puedes usar.

3️⃣ Registro (ICP)

A partir de 2024, todos los Mini Programas deben tener registro ICP. Necesitas una foto de identificación y verificación facial. Tarda de 1 a 3 días hábiles.

4️⃣ Certificación de WeChat (Opcional pero recomendada)

Las cuentas personales pueden certificarse por 300 RMB/año. Si no quieres pagar, puedes omitirlo—no te impedirá publicar, pero no serás buscable.

Motivos comunes de rechazo: falta de calificaciones médicas/financieras, falta de permisos de transmisión en vivo o funcionalidad incompleta. La revisión suele tardar de 1 a 7 días.

¿Ves? Lo lograste

Le hablaste a la IA y el código apareció.

Llenaste una ruta y la página apareció.

Le enviaste el texto rojo y se arregló solo.

Escaneaste un código y se ejecutó en tu celular.

Hiciste clic en subir y tus amigos pudieron escanearlo.

De principio a fin, sin necesidad de conocimientos de programación.

Solo haz una cosa esta noche: instala las Herramientas de desarrollo de WeChat. Toma diez minutos.

Una vez instaladas, te van a dar ganas de tirar algo ahí y ejecutarlo. Para entonces, ya empezaste.

Si conoces a alguien que quiera hacer un Mini Programa pero no ha empezado, envíale esto. Le ahorrará un fin de semana.

Soy Song Song. Seguiré compartiendo contenido útil.