Conocimientos básicos de WeChat Mini Program_01

1. Composición de la página

La parte principal de un pequeño programa consta de tres archivos, que deben colocarse en el directorio raíz del proyecto, de la siguiente manera:

documento	requerido	efecto
aplicación.js	Sí	lógica del subprograma
aplicación.json	Sí	Configuración pública del mini programa
app.wxss	No	Hoja de estilo pública del Mini Programa

Las páginas se colocan en la carpeta de páginas.

Cada página contiene wxml, wxss, json (archivo de configuración), js, como se muestra en la figura:

2. Realice la configuración global en app.json

2.1 Página de registro: Generalmente, después de configurar en el archivo json, el editor creará automáticamente el archivo correspondiente

Descarga del editor: dirección de descarga de la herramienta para desarrolladores de WeChat y registro de actualización | Documento abierto de WeChat

"pages": [
    "pages/home/home",
    "pages/cate/cate",
    "pages/discont/discont",
    "pages/cart/cart",
    "pages/mine/mine",
    "unpackage/good_detail/good_detail"
  ],

2.2 Estilo

estilo de texto de la barra de navegación	Color del texto de navegación superior
navegaciónBarTitleText	Contenido de texto de navegación superior
navegaciónBarFondoColor	El color de fondo de la navegación superior.
color de fondo	El color de fondo de la página, que solo se puede ver después de tirar hacia abajo para actualizar

 "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "商城项目",
    "navigationBarBackgroundColor": "#1296db",
    "backgroundColor": "#F8F8F8"
  },

2.3 Barra de navegación inferior

 Configuración:

"tabBar": {
    "selectedColor": "#1296db", // 选择当前项的文字颜色
    "color": "#656565", // 默认的文字颜色
    "list": [ // 数组
      {
        "pagePath": "pages/home/home",
        "text": "主页",
        "iconPath": "static/tabbar_icon/home.png", // 图标路径
        "selectedIconPath": "static/tabbar_icon/home_selected.png" // 被选中后的图标
      },
      ...
    ]
  },

3. Otro

~ Valor de paso del componente padre-hijo: name="{ {name}}", solo cuando se actualice la página onLoad(), el elemento padre volverá a pasar el valor, incluso si el elemento padre obtiene los últimos datos de la tienda, pero la página no se actualizará y no se pasará dada desde el elemento

~Obtener páginas: getCurrentPages(); const por página = páginas[páginas.longitud - 1];

~Método para recargar la página: page.onLoad()

~Carrusel-swiper:

Auto-reproducción	reproducción automática = "verdadero" (falso)
punto punto	Punto-indicador=“verdadero” (falso)
carrusel cohesivo	circular=“verdadero” (falso)

~imagen-imagen: 

origen	ruta ruta /público/url
modo	Elementos de relleno: scaleToFill
modo	Pantalla lateral larga: aspectFit
modo	Pantalla lateral corta: aspectFill

~Botón 

plano	Ya sea que esté ahuecado o no, el fondo no es válido
enlazar	Vincular el evento de clic
atrapar	deja de burbujear

~almacenamiento local:

wx.setStorageSync('clave',datos)	almacenamiento
wx.getStorageSync('clave')	Obtener

~ sintaxis de plantilla

{ { }}	Use llaves dobles para mostrar valores
Wx:para = “{ {datos}}”	El ciclo de renderizado también es
Representación de bucle	Mostrado en item, item.name

~El método de modificación de datos: this.setData({'data.key' : value})

~ Habilite la función de actualización desplegable: app.json.window.enablePullDownRefresh: verdadero

---

componentes personalizados

`Establezca "usingComponent":{"name":"path"} en el archivo json en la página que necesita usar el componente

`Los datos internos del componente se almacenan en: propiedades: {}, que se pueden pasar a través del componente personalizado en el componente principal

`Los métodos internos de los componentes se definen en los métodos

`Problemas de estilo de componente: es mejor usar selectores de clase, para que haya separación de estilo

Usos de la tienda Mobx :

introducir	npm install --save mobx-miniprogram mobx-miniprogram-bindings
importar	Importar { createStoreBIndings} desde "mobx-minprogram-bindings"
usar	this.StoreBIndings = createStoreBIndings({ tienda,campos: ['cadena'], acciones: ['cadena']})

en tienda.js	importar {
	observable,
	acción
	} de 'mobx-miniprograma'

1. text-overflow: puntos suspensivos;//Mostrar los puntos suspensivos para representar el texto recortado
2. white-space: nowrap; //El texto no se ajustará, el texto continuará en la misma línea hasta que se encuentre una etiqueta
3. desbordamiento: oculto;//La parte de desbordamiento está oculta