Introducción a los miniprogramas para el desarrollo de programas de WeChat

1. Introducción al miniprograma

Ciclo de vida del miniprograma

// app.js
App({ onLaunch() { // Muestra la capacidad de almacenamiento local const logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs' , logs) // iniciar sesión en wx.login({ éxito: res => { // enviar res.code al fondo para intercambiar por openId, sessionKey, unionId } }) }, onShow (opciones) { // Hacer algo cuando se muestra .console.log ("show") }, onHide () { // Hacer algo cuando hide.console.log ("hide") }, onError (msg) { console.log(msg) },

datos globales: { información de usuario: nulo } })

Escanee el código QR después de una instalación exitosa

Crear un pequeño programa

Interfaz después de una creación exitosa

Necesitamos crear un inicio de sesión en este momento

índice.wxss

imagen{ 
  ancho: 400px; 
  altura: 400px; 
  borde-radio: 50%; 
}

índice.wxml

<vista> 
  <navigator url="/pages/login/login"> 
    <button>登录</button> 
  </navigator> 
</view>

iniciar sesión.js

Page({ 
    data: { 
        msg:"nihao", 
        user:{ 
            username:"hmf", 
            password:"" 
        } 
    }, 
    bindName(e){ 
        //argumentos es el parámetro de la función 
        //console.log(argumentos) 
        this.setData({ 
            "this.username":e.detail.value 
        }) 
    }, 
    bindPwd(e){ 
        //los argumentos son los parámetros de la función 
        //console.log(argumentos) 
        this.setData({ 
            "this. userPwd":e .detail.value 
        }) 
    }, 
    aa(){ 
        wx.showToast({ 
            título: "xx",
            icon:"success" 
        })
    }, 
    bb(){ 
       this.data.user.username="" 
        this.data.user.password="" 
    } 
})

iniciar sesión.wxml

<vista> 
    <imagen src="/aa/xf2.jpg" mode="aspectFit"/> 
</vista> 
<vista> 
    <formulario bind:submit="aa" bind:reset="bb"> 
        <etiqueta>Nombre </label> 
        <input value="{ 
   
   {user.username}}" bind:input="bindName" value="" type="text" placeholder="Ingrese el nombre de usuario" maxlength="10"/> < 
        label >Contraseña</label> 
        <input value="{ 
   
   {user.password}}" bind:input="bindPwd" value="" type="text" placeholder="Ingrese la contraseña de usuario" password="true" maxlength= "10"/> 
        <label>Pasatiempos</label> 
        <grupo de casillas de verificación> 
            <casilla de verificación marcada="{ 
   
   {true}}">喝奶茶</casilla de verificación> < 
            casilla de verificación>k歌</casilla de verificación> </ 
        <grupo de radio> 
            <checkbox>Comer</checkbox>
        </checkbox-group> 
            <radio value="女"checked="true">女</radio> 
            <radio value="男">男</radio> 
        </radio-group> 
        <view> 
            <formulario de botón- type="submit">登录</button> 
            <button>注册</button> 
            <button form-type="reset">清空</button> 
        </view> 
    </form> 
    <view> 
        { 
   
   {usuario.nombre de usuario }} 
    </vista> 
</vista>

Inicio de sesión correcto

vacío

por fin

00. Una pequeña página de programa consta de cuatro archivos, a saber:
xxx
xxx.js lógica de página
xxx.json configuración
de página xxx.wxml estructura de página
xxx.wxss estilo de página

01. El marco del programa pequeño se compone
de programas pequeños, registre un programa pequeño a través de la aplicación () y registre una página a través de la página ()
1. Capa lógica
1. Registre el programa pequeño
2. Página de registro
3. Ciclo de vida de la página
4. Enrutamiento de la página
5. Modularización
6. API
2. Vista de capa
1.
wxml 2. wxss
3. wxs
wxs es el lenguaje de secuencias de comandos del propio subprograma WeChat, que se utiliza para el filtrado y el cálculo. wxs se puede definir a través de la etiqueta del módulo de archivo, el archivo necesita el archivo de sufijo .wxs
wxs se usa especialmente para páginas wxml, si necesita usar scripts js en la página, puede usarlo, pero otros js no pueden hacer referencia a wxs archivos
El desarrollo debe elegir usar js o wxs según la situación, pero la mayor parte de mi desarrollo se realiza en js


## Ejemplo 1: Ciclo de vida del miniprograma
02. Registro de miniprogramas
Cada miniprograma debe llamar al método App en app.js para registrar una instancia de miniprograma, vincular las funciones de devolución de llamada del ciclo de vida, el
monitoreo de errores y las funciones de monitoreo de inexistencia de página. etc.
1. Cree una instancia de aplicación, la función de ciclo de vida del applet
// app.js
App({ onLaunch (opciones) {//Supervise la inicialización del applet Cuando se complete la inicialización del applet, se activará onLaunch (globalmente solo se activará una vez) // Hacer algo inicial cuando se inicie. }, onShow (opciones) {//Supervisar la pantalla del subprograma Cuando se inicia el subprograma, o ingresa a la pantalla de primer plano desde el fondo, se activará onShow // Hacer algo cuando se muestre. }, onHide () {/ /Monitor subprograma Ocultar Cuando el subprograma ingresa al fondo desde el primer plano, se activará onHide // Hacer algo cuando se oculta. }, onError (msg) {//Función de monitoreo de errores Cuando el subprograma tiene un error de secuencia de comandos o falla la llamada a la API, onError se activará y traerá un mensaje de error console.log(msg) }, globalData: 'I am global data'

})

Nota 1: Comparación con proyectos SPA
1. Equivale a definir objetos Vue globales en main.js en proyectos SPA,
2. onLaunch/onShow/onHide/onError son equivalentes a funciones de gancho
Nota 2: Otros desarrolladores pueden agregar funciones o datos arbitrarios en el Parámetro de objeto, al que se puede acceder con este


2. Solo hay una instancia de aplicación en todo el subprograma, que es compartida por todas las páginas. Los desarrolladores pueden
obtener una instancia de aplicación única a nivel mundial a través del método getApp, obtener datos sobre la aplicación o llamar a funciones registradas por el desarrollador en la aplicación.
// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // Soy datos globales

## Ejemplo 2: Enlace de datos/Ciclo de vida/Herencia de datos
03. Página de registro
Para cada página del subprograma, debe registrarse en el archivo js correspondiente a la página y especificar los datos iniciales, la devolución de llamada del ciclo de vida y el evento de la página
Las páginas simples se pueden construir utilizando el constructor Page(Object object).

Función constructora de página (Objeto objeto):
registra una página en el applet. Acepta un parámetro de tipo de objeto, que especifica los datos iniciales de la página, las devoluciones de llamada del ciclo de vida, los controladores de eventos, etc.

Page({ data: {//Los datos iniciales utilizados para la primera representación del texto de la página: "Estos son los datos de la página". }, onLoad: función (opciones) {//Supervisar la carga de la página console.log("page -- -onLoad ---"); }, onReady: function () {//La representación de la página del monitor se completó por primera vez console.log("page ---onReady---"); }, onShow: function () { //Monitor página mostrar console.log("página ---onShow---"); }, onHide: función () {//Monitor página ocultar console.log("página ---onHide---"); }, onUnload: function () {//Supervisar la descarga de la página console.log("página ---onUnload---"); } })

Entre ellos, después de abrir el applet, onLoad se ejecutará
secuencialmente, los métodos onReady y onShow ejecutarán los métodos onHide y onShow respectivamente, y
el método onUnload se ejecutará cuando se destruya la página del applet.

Nota 1: ¿Cómo hacer que varias páginas tengan los mismos campos de datos y métodos? Usar comportamientos en la página (no existe tal función en vue)
// my-behavior.js
module.exports = Behavior({ data: { sharedText: 'Este es un dato compartido entre páginas.111' }, métodos: { sharedMethod : function() { return "Este es un dato compartido entre páginas.222"; } } })

// página-a.js
var myBehavior = require('./my-behavior.js')
Page({ comportamientos: [myBehavior], onLoad: function() { console.log(this.data.sharedText)//herencia Atributos y llamadas a métodos console.log(this.sharedMethod()) } }) Nota 2: el constructor de página es adecuado para páginas simples. Pero para páginas complejas, use el constructor de componentes para construir la página. La principal diferencia entre el constructor de componentes es: el método debe colocarse en métodos: { } Componente ({ datos: { texto: "Estos son datos de página". } , métodos: { onLoad: función (opciones) { // ejecutar cuando se crea la página },



onPullDownRefresh: function() { // Ejecutar al desplegar para actualizar }, // Función de respuesta al evento viewTap: function() { // ... } } })

Nota 1: Lo importante se dice tres veces "No cree una página en vscode, las herramientas de desarrollo de WeChat no compilarán, simplemente agregue ctrl+s a las páginas de app.json". Lo importante se dice tres veces "No t cree una página en
vscode, las herramientas de desarrollo de WeChat no se compilarán, simplemente agregue ctrl+s a las páginas de app.json "
Diga las cosas importantes tres veces" No cree páginas en vscode, las herramientas de desarrollo de WeChat no se compilarán, en la aplicación. json Agregar ctrl+s a las páginas”

04. Para obtener detalles sobre el ciclo de vida de la página (comprensión)
, consulte: images/01 page-lifecycle.png

### Importante
05. Configuración del miniprograma
1. Archivo de configuración global (importante)
El archivo app.json en el directorio raíz del miniprograma se usa para configurar el miniprograma WeChat globalmente, determinar la ruta del archivo de página, el
rendimiento de la ventana y configure el tiempo de espera de la red, configure múltiples pestañas, etc.
-tabbar (mínimo 2 columnas)
Ejemplo de demostración: página de inicio, carrito de compras, mi
Nota 1: ¿Por qué TabBar no aparece en la parte inferior? El primer elemento de la matriz de páginas debe ser miembro de la matriz de lista de la barra de pestañas. Nota 2: al menos 2 botones
, hasta 5
páginas .   subprograma El archivo sitemap.json en el directorio raíz se utiliza para configurar si WeChat permite indexar el subprograma y sus páginas.

## Ejemplo 3: Enrutamiento de página: salto de componente (ruta absoluta y ruta relativa), salto de API
06. Enrutamiento de página
El marco administra el enrutamiento de todas las páginas en el applet. El marco mantiene todas las páginas actuales en forma de pila.
1. Cuando se produce un cambio de enrutamiento, la pila de páginas se comporta de la siguiente manera Método de enrutamiento: inicialización
del rendimiento de la pila de páginas , se inserta una nueva página en la pila, se abre una nueva página, se inserta una nueva página en la pila, la página redirige la actual página fuera de la pila, y la nueva página se empuja a la pila, y la página devuelta se saca continuamente de la pila Hasta que el destino vuelve a la página Cambio de pestaña Todas las páginas se sacan de la pila, dejando solo la nueva Pestaña Recarga de página Todas las páginas se extraen de la pila, dejando solo la nueva página. Los desarrolladores pueden usar la función getCurrentPages() para obtener la pila de páginas actual.

2. Método de enrutamiento
Para conocer el método de activación del enrutamiento y la función del ciclo de vida de la página, consulte el documento del sitio web oficial para obtener más detalles.

Nota 1: La pila es una estructura de datos de tipo primero en entrar, último en salir (carpeta de viñetas)
Nota 2: Demuestre cómo especificar el inicio de la página (importante)
1. Modifique la configuración de enrutamiento
2. Agregue la configuración de inicio y especifique la página de inicio

##Ejemplo 4-1: Agregar parámetros a la ruta
##Ejemplo 4-2: Auto-incremento y auto-decremento de número (cómo pasar los parámetros +1 o -1 en el evento)
##Ejemplo 4-3: Datos dos -enlace de forma
07. Enlace de evento del subprograma WeChat (importante)
1. Categoría de evento:
toque: haga clic en
entrada de evento: evento de entrada
toque largo: evento de presión prolongada,
inicio táctil: inicio táctil, extremo táctil
: extremo táctil,
cancelación táctil: cancelar toque;

Valor de enlace de programa pequeño
1. Enlace unidireccional M --> V
setData
2. El enlace unidireccional en realidad enlaza una copia de M ---------> copia --> V

Nota 1: el método de procesamiento de solicitudes en el applet no puede pasar parámetros. La forma correcta: pasar parámetros a través del atributo data-xxx y luego obtener el error de parámetro a través de la fuente del evento <button bindtap="handletap(-1)"Correct< botón
bindtap
=
"
handletap " data-number="{ {-1}}"

Solución positiva: pasar un valor fijo -1
data-number="{ {-1}}"
también puede vincular el valor
data-number="{ {n}}"

Luego obtenga e.currentTarget.dataset.number del objeto de evento


Nota 2: en el applet de WeChat, los datos js y los datos que se muestran en la interfaz son flujos de datos únicos.
Es decir, si los datos en js cambian, la interfaz puede mostrarlos de inmediato, pero si los datos de la interfaz cambian, js no se puede cambiar, ¿qué debo hacer?

Podemos usar el método bindinput para lograr un enlace de datos bidireccional.

Principio: Usamos el evento bindinput para obtener el valor de entrada de la entrada, y luego de acuerdo con el conjunto de datos para obtener el enlace de datos con los objetos en la matriz de datos // 1. Defina el
atributo dataList
en los datos y defina el bidireccional enlace en él Nombre del atributo
// 2. Defina el método bindInput //
3
. e) { console .log("bindInput"); //depurador // forma un enlace de datos bidireccional var that = this; var dataset = e.target.dataset; // los datos comienzan con atributos personalizados, que se pueden obtener a través de dataset, dataset es un objeto json var name = dataset.name; var value = e.detail.value;

//Pequeño problema: el atributo de datos recibido por la regla solo se puede llamar dataList
that.data.dataList[name] = value; //Cambio de datos de la capa lógica
// Empalme de nombres de atributos de objetos para asignar valores a atributos de objetos
var atributoName = "dataList. " + nombre;
that.setData({//Ver cambios en los datos de la capa
[attributeName]: value
});
console.log(that.data.dataList);
}

2. Enlace de eventos:
enlace de enlace;
enlace de captura ; (puede evitar el burbujeo de eventos)
Por ejemplo: bind click event bindtap
page.wxml file

3. Página de parámetros de recepción
({ onLoad: función (opciones) { // La asignación de datos de miniprograma debe usar el método setData, error: this.Data.title='xxx'; this.setData({ title: options.title }) } })

## Ejemplo 4: Modularización
08. La modularización
puede extraer código común en un archivo js separado como un módulo

Nota 1: Consulte utils/util.js para que logs/logs.js haga referencia a él.
Nota 2: Al definir un módulo, cree y defina directamente un objeto
//common.js
module.exports = { sayHello: function (name) { console.log("Hola %s", nombre); }, decir Adiós: function (nombre) { console.log("Adiós %s", nombre); } }; 09. API (importante) El marco de desarrollo de miniprogramas proporciona ricas API nativas de WeChat. Puede invocar fácilmente las capacidades proporcionadas por WeChat, como obtener información del usuario, almacenamiento local, funciones de pago, etc. Clasificación de API 1. API de monitoreo de eventos Las API que comienzan con on se usan para monitorear si se activa un evento , como: wx.onSocketOpen 2. API sincrónicas Las API que terminan en Sync son todas API sincrónicas, como wx.setStorageSync

3. API asíncrona
La mayoría de las API son API asíncronas, como wx.request, wx.login, etc. Este tipo de interfaz API generalmente acepta un parámetro de tipo Objeto,
que admite la especificación de los siguientes campos según sea necesario para recibir el resultado de la llamada de la interfaz

### Ver capa
10.wxml (importante)
wxml (WeiXin Markup Language) es un conjunto de lenguajes de etiquetado diseñados por el marco. Combinado con componentes básicos y sistemas de eventos, se puede construir la estructura de la página.
Plantilla de programa pequeño sintaxis
1. Enlace de datos
2. Ejemplo de demostración de representación de lista (es decir, bucle)
: el uso de etiquetas de bloque (existe al escribir código, pero no se muestra cuando se representa la página)
3. Representación condicional (es decir, si)
ejemplo de demostración: enlace de datos, para, si

4. Plantilla (diferente de vue)
WXML proporciona una plantilla (plantilla), que puede definir fragmentos de código en la plantilla y luego llamarlos en diferentes lugares.
1. Defina la plantilla
<template name="msgItem">...</template>
2. Use la plantilla
<template is="msgItem" data="{ { ...item}}"/>
5. Haga referencia
a WXML para proporcionar dos Un método de referencia de archivo importar e incluir

Nota 1: Es muy fácil dominar este contenido con vue experience ^_^

11.WXSS
WXSS (WeiXin Style Sheets) es un lenguaje de estilo utilizado para describir estilos de componentes WXML

WXSS (WeiXin Style Sheets) es un lenguaje de estilo utilizado para describir estilos de componentes WXML. WXSS se utiliza para determinar cómo deben mostrarse los componentes WXML.
Para adaptarse a la gran cantidad de desarrolladores front-end, WXSS tiene la mayoría de las características de CSS. Al mismo tiempo, para ser más adecuado para el desarrollo de applets de WeChat, WXSS ha ampliado y modificado CSS.
En comparación con CSS, las características de la extensión WXSS son:
Unidad de tamaño
rpx (píxel sensible): se puede adaptar según el ancho de la pantalla. El ancho de pantalla especificado es 750rpx.
Por ejemplo, en iPhone6, el ancho de la pantalla es de 375 px y hay 750 píxeles físicos en total, luego 750 rpx = 375 px = 750 píxeles físicos y 1 rpx = 0,5 px = 1 píxel físico.

importación de estilo

12. WXS (omitido, no importante)
WXS (WeiXin Script) es un conjunto de lenguaje de secuencias de comandos para applets, combinado con WXML, puede construir la estructura de la página

Apéndice 1: Una breve descripción de la función require
require(...) es una función utilizada en la programación modular en Javascript para cargar módulos.
Supongamos que hay un módulo matemático math.js, puede cargarlo así
var math = require('math');
Luego, puede llamar al método provisto por el módulo:
var math = require('math');
math. sumar(2,3); // 5

Apéndice 2: Solución a la pantalla negra de las herramientas para desarrolladores de
WeChat Datos \a8265259807471d9496af75b01f1850f\WeappLocalData

###Apéndice 3 El problema de usar la versión wechat_devtools_1.03.2009140_x64 para el desarrollo nunca se puede resolver: 20201030
###20201104 Solución: Borre el caché y vuelva a abrir este proyecto
###
Apéndice 3: No se encontró la definición en app_json El la solución al archivo WXML correspondiente a las páginas páginas-categoría-índice
es un error en el editor, la solución es, por ejemplo, si quiero crear un archivo de pedido, hay dos formas de crearlo: la
primera: crear páginas directamente en app.json /order/order, el editor creará automáticamente las carpetas y los archivos correspondientes y no informará un error; el
segundo método: creamos manualmente el orden del conjunto de archivos en las páginas, y creamos los archivos correspondientes, y luego agregue los archivos correspondientes en la ruta app.json,
pero en este momento el sistema informará: No se encontró el archivo WXML correspondiente a las páginas "páginas/pedido/pedido" definidas en app.json, lo cual es muy extraño.
Luego, debemos resolverlo, eliminar las páginas de app.json (recuerde hacer una copia de seguridad), luego guardar,
cerrar el editor, abrirlo nuevamente, volver a colocar la ruta que acaba de copiar y encontrar que no se informa ningún error, y puede jugar feliz

Si tiene éxito: la consola mostrará la siguiente información
[mensaje de estado del índice del mapa del sitio] De acuerdo con la regla del mapa del sitio [0], la página actual [páginas/reg/reg] se indexará

No se encontró el archivo WXML correspondiente a las páginas "pages/xxx/xxx" definidas en app.json
Ubicación del problema:
error del editor

Solución:
1. Borre las páginas de la página Acerca de en app.json (recuerde hacer una copia de seguridad)
2. Guarde después de borrar
3. Cierre la herramienta de desarrollo de WeChat y reinicie
4. Copie y pegue la configuración del archivo
5. La página se genera correctamente

Apéndice 4: La diferencia entre this.data y this.setData({}) del subprograma WeChat

this.data.xx se usa para obtener el objeto de datos de la página ---------- solo el cambio de datos js (capa lógica);
this.setData se usa para actualizar la interfaz ------- - Se utiliza para actualizar la capa de vista.
En resumen: la relación entre this.data y this.setData es que this.setData almacena una copia de this.data,
y la interfaz obtiene datos de la copia de this.data alojada en this.setData.
Por lo tanto, no actualizaremos directamente la interfaz cuando cambiemos this.data, porque la copia en this.setData aún no está actualizada en este momento.
Para obtener más información, consulte: Materiales/06 01.mht~06 03.mht

Introducción a los miniprogramas para el desarrollo de programas de WeChat

1. Introducción al miniprograma

Supongo que te gusta