Capítulo uno
1. Introducción
Permítanme hablar de ello primero. Planeo iniciar el subprograma de WeChat. Después de todo, este subprograma ya es muy popular, por lo que no es necesario descargarlo e instalarlo. De hecho, siempre que busque el nombre, puede abrir el subprograma directamente.
La programación del desarrollo de este applet de WeChat es muy similar a la programación del desarrollo de páginas web, tales como:
Las páginas web generalmente usan HTML + CSS + JS ; y los applets de WeChat usan WXML + WXSS + JS , por lo que estos dos son muy similares. Pero en términos de detalles, todavía hay una pequeña diferencia. Por ejemplo, elijo una de las etiquetas más utilizadas: HTML, div y WXML, vista, otras etiquetas también son diferentes. Además, los applets de WeChat usan atributos como wx: if o { {}}. Estos atributos son similares a (React, Vue). Generalmente, JavaScript se usa para manipular DOM (HTML), como eventos de comportamiento de clic del usuario, eventos de monitoreo, etc. Para esto, siempre que comprenda los principios subyacentes.
css y wxss son archivos de estilo, pero la mayoría son iguales. Sin embargo, quiero inicializar los requisitos, para que sea compatible con varios navegadores, css puede admitir el comodín "*", que significa todos los elementos de la página completa. Pero wxss no admite este comodín "*", y solo se puede escribir uno por uno con los elementos de uso común.
¡No hablaré de los js restantes! Ambos son iguales.
Desde la perspectiva del subprograma WeChat, hay un archivo json adicional, lo que significa un archivo de formato de datos. En términos de uso, app.json se usa realmente como todos los archivos de configuración.
2. Explicación de la estructura del directorio del programa WeChat Mini
2.1 Directorio de la aplicación:
app.js: lógica y datos globales.
app.json: configure la información de toda la aplicación, puede agregar una barra de pestañas (barra de menú inferior) usted mismo.
app.wxss: configuración de estilo global.
2.2página de índice:
La carpeta de páginas es una carpeta de páginas, por ejemplo, el nombre es índice y la carpeta de la página incluye:
index.js: procesamiento lógico y datos.
index.wxml: interfaz de usuario de diseño, componentes, etc.
index.json: la entrada de la página de configuración.
index.css: archivo de estilo.
2.3 Cree una carpeta de página:
Si desea crear una carpeta personalizada para una página, primero configure la ruta de la página en app.json, escriba "pages / login / login" en el método de las páginas, y luego creará automáticamente una carpeta de inicio de sesión para mí, específicamente Las carpetas son todas (.wxml, .wxss, .js, .json). No es necesario crear archivos manualmente uno por uno.
3. Preparar herramientas IDE
Utilizo dos herramientas IDE: WeChat Developer Tools y Visual Studio Code.
Utilizo principalmente Visual Studio Code para escribir código. Esta herramienta IDE es muy cómoda de usar y tiene muchos complementos. Además, la herramienta de desarrollo WeChat se utiliza para mostrar la página de depuración, de todos modos sincronizarán los archivos actualizados.
4. Construcción de proyectos de combate reales
4.1 Construye la estructura del directorio
4.2 Crear la página del proyecto
4.3 Introducción a los iconos de fuentes
Paso 1: Abra el sitio web del icono de fuente de Alibaba
Paso 2: selecciona el icono
Paso 3: Agregar al elemento del directorio
Paso 4: descargue en el local (ubicado en el directorio de estilos)
Paso 5: Modifique el archivo de estilo de css a wxss (estilo de programa pequeño)
Paso 6: Introducir en el programa pequeño (style / iconfont.wxss)
4.4tabBar atributos y estructura
Esta tabBar (programa pequeño) se utiliza como barra de navegación, generalmente en la parte inferior o superior de la ventana del programa pequeño y cambia de página.
El archivo app.json en el directorio raíz del subprograma se utiliza para configurar el subprograma WeChat globalmente.
"tabBar": {
"color": "#999",
"selectedColor": "#ff2d4a",
"backgroundColor": "#fafafa",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/home-o.png"
},
{
"pagePath": "pages/category/index",
"text": "分类",
"iconPath": "icons/category.png",
"selectedIconPath": "icons/category-o.png"
},
{
"pagePath": "pages/cart/index",
"text": "购物车",
"iconPath": "icons/cart.png",
"selectedIconPath": "icons/cart-o.png"
},
{
"pagePath": "pages/user/index",
"text": "我的",
"iconPath": "icons/my.png",
"selectedIconPath": "icons/my-o.png"
}
]
},
A continuación, ¡escribe notas por cierto durante el combate real! ¡Escribe como lo haces!
Actualizando constantemente ...