Desarrollo del subprograma WeChat
Preparación ambiental
Primero, debe preparar una cuenta de desarrollador de WeChat.
Si aún no tiene una cuenta de desarrollador, debe solicitar una cuenta en la plataforma pública de WeChat. Sitio web: plataforma pública WeChat
Registre una cuenta de desarrollador para un programa pequeño
Complete la dirección de correo electrónico que no se ha registrado con la cuenta oficial de WeChat.
El buzón completado recibirá un correo electrónico de activación, seguirá la activación del subprograma WeChat indicado en el correo electrónico y regresará a la plataforma oficial de WeChat.
Registro de información: para elegir el cuerpo principal del mini programa, si es una empresa u otro cuerpo principal, se debe proporcionar otra información. Así que aquí estoy eligiendo individuos. Luego, complete la información del tema y la información del administrador.
Después de completar estos, se registra una cuenta de desarrollador.
Después del registro, debe escanear el código de WeChat para iniciar sesión en este subprograma de WeChat y obtener una ID de desarrollador. Esta es muy importante y la necesitará para un desarrollo posterior.
En segundo lugar, instale las herramientas para desarrolladores de WeChat. (Software desarrollado por WeChat Mini Program)
La URL es: documento abierto de WeChat
En tercer lugar, descargue una herramienta de desarrollo de front-end (HBuilderX, VSCode, Webstorm).
(Opcional o no) Porque aunque también puedes escribir código en WeChat Developer Tools, no es conveniente, por lo que lo mejor es descargar un software para escribir programas pequeños. Aquí se utiliza HBuilderX. A continuación se muestran los pasos de descarga.
Descargue e instale los pasos aquí sin tomar capturas de pantalla. Simplemente descomprímalo y ábralo Tenga en cuenta que la primera vez que abra HBuilderX debe conectarse a Internet. Necesita descargar algunos complementos para que haya indicaciones al escribir código más adelante. Solo la primera vez que lo abra se descargará automáticamente. Si lo olvidas, simplemente bórralo y descomprímelo nuevamente.
Crea un pequeño programa
1) Cree un nuevo proyecto
Abra HBuilderX, seleccione Archivo-> Nuevo-> Proyecto.
Seleccione el subprograma y complete el nombre del proyecto. Puede generar una plantilla predeterminada.
2) Para modificar la ID de desarrollador
en la plantilla predeterminada, primero debe modificar el "appid" en las siguientes 15 líneas en el archivo "project.config.json". Esta es la ID de desarrollador en el desarrollador de WeChat.
El subprograma escrito debe ejecutarse en la herramienta de desarrollo WeChat del subprograma WeChat. Como se muestra abajo.
Si la conexión es exitosa, se abrirá la herramienta de desarrollo de WeChat y podrá escanear e iniciar sesión con el WeChat en el que inició sesión originalmente en la plataforma pública de WeChat.
Después de escanear, ingresará a la herramienta de desarrollo WeChat. A la izquierda está el simulador, que simula el efecto de visualización en WeChat, la parte superior derecha es el editor para escribir código y la parte inferior derecha es el depurador.
Página de inicio del mini programa
El conocimiento gramatical de la escritura de pequeños programas se puede ver abriendo el documento abierto de WeChat .
La estructura del applet.
El idioma del subprograma es similar al de la página web, pero las palabras son diferentes.
La composición de cada página del
subprograma : archivo xxx.json: configure el título de la página y otra información.archivo
xxx.wxml: html (la vista reemplaza a div, el texto reemplaza el intervalo, la imagen reemplaza a img)
archivo xxx.wxss: css (diseño, el subprograma recomienda diseño flexible, la unidad px se cambia a rpx 100rpx = 50px)
archivo xxx.js: js (formato json, idea de vuejs)
Tres archivos de configuración global para el
subprograma : app.json (configure el título global, la barra de menú inferior)
app.js (archivo js global)
app.wxss (archivo de estilo global)
La siguiente es la producción de la barra de menú en la parte inferior de WeChat:
página: lista de rutas de página, utilizada para especificar en qué páginas consta el subprograma, cada elemento corresponde a la información de ruta (incluido el nombre del archivo) de una página.
ventana: se utiliza para configurar la barra de estado, la barra de navegación, el título y el color de fondo de la ventana del subprograma.
tabBar: si el subprograma es una aplicación de varias pestañas (hay una barra de pestañas en la parte inferior o superior de la ventana del cliente para cambiar de página), puede especificar el rendimiento de la barra de pestañas a través del elemento de configuración de tabBar y la página correspondiente se muestra cuando se cambia la pestaña.
Para funciones específicas, consulte los documentos abiertos de WeChat
El siguiente código se puede copiar y modificar.
{
"pages": [
"pages/ai/ai",
"pages/yq/yq"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "实训",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#ff8124",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/ai/ai",
"text": "人脸识别",
"selectedIconPath": "image/ai-active.png",
"iconPath": "image/ai.png"
},
{
"pagePath": "pages/yq/yq",
"text": "疫情地图",
"selectedIconPath": "image/map-active.png",
"iconPath": "image/map.png"
}
]
}
}