Los valores de escena describen la ruta que un usuario toma para acceder a un mini programa. Para una lista completa de los significados de los valores de escena, consulta la documentación oficial.
Debido a las limitaciones del sistema Android, actualmente no es posible obtener el valor de escena cuando el usuario sale a la pantalla de inicio presionando el botón de inicio y luego vuelve a abrir el mini programa desde allí. En tales casos, se conservará el valor de escena anterior.
Obtención de Valores de Escena
Los desarrolladores pueden obtener los valores de escena de las siguientes maneras:
- Para mini programas, puedes obtener los valores de escena mencionados anteriormente en
App'sonLaunchyonShow, o usandowx.getLaunchOptionsSync. - Para minijuegos, puedes obtener los valores de escena mencionados anteriormente en
wx.getLaunchOptionsSyncywx.onShow.
La capa lógica del framework de desarrollo de mini programas utiliza un motor JavaScript para proporcionar a los desarrolladores un entorno de ejecución para su código JavaScript y las funcionalidades específicas de los mini programas de WeChat.
La capa lógica procesa los datos y los envía a la capa de vista, al mismo tiempo que recibe la retroalimentación de eventos de la capa de vista.
Todo el código escrito por el desarrollador se empaquetará finalmente en un único archivo JavaScript y se ejecutará cuando se inicie el mini programa, hasta que este se destruya. Este comportamiento es similar a un ServiceWorker, por lo que la capa lógica también se conoce como App Service.
Además de las capacidades estándar de JavaScript, hemos agregado algunas funciones para facilitar el desarrollo de mini programas:
- Se han añadido los métodos
AppyPagepara registrar la aplicación y las páginas, respectivamente. - Se han añadido los métodos
getAppygetCurrentPagespara obtener la instancia de la aplicación y la pila de páginas actual, respectivamente. - Se proporcionan ricas APIs, como las capacidades específicas de WeChat para datos de usuario, escaneo de códigos, pagos, etc.
- Se ofrece capacidad de modularización, donde cada página tiene su propio ámbito de ejecución independiente.
Nota: La capa lógica del framework de mini programas no se ejecuta en un navegador, por lo que algunas capacidades de JavaScript que funcionan en la web, como window y document, no están disponibles.
Cada mini programa requiere que la instancia de la aplicación se registre llamando al método App en app.js. Aquí es donde se enlazan las funciones de devolución de llamada del ciclo de vida, el monitor de errores y la función de monitor de páginas no encontradas, entre otros.
// app.js
App({
onLaunch (options) {
// Realiza acciones iniciales al lanzar la aplicación.
console.log('App Launched with options:', options);
},
onShow (options) {
// Realiza acciones cuando la aplicación se muestra.
console.log('App Shown with options:', options);
},
onHide () {
// Realiza acciones cuando la aplicación se oculta.
console.log('App Hidden');
},
onError (msg) {
console.error('App Error:', msg);
},
globalData: 'Soy datos globales'
})
Solo existe una instancia de App en todo el mini programa, la cual es compartida por todas las páginas. Los desarrolladores pueden obtener la instancia global única de App a través del método getApp para acceder a los datos de la App o llamar a las funciones registradas por el desarrollador en App.
// xxx.js
const appInstance = getApp();
console.log(appInstance.globalData); // Muestra: Soy datos globales
Cada página dentro de un mini programa debe registrarse en su archivo js correspondiente. Aquí se especifican los datos iniciales de la página, las devoluciones de llamada del ciclo de vida, las funciones de manejo de eventos, etc.
Uso de Behaviors en Páginas
Las páginas pueden referenciar behaviors. Los behaviors se pueden utilizar para que varias páginas compartan los mismos campos de datos y métodos.
// my-behavior.js
module.exports = Behavior({
data: {
sharedText: 'Este es un dato compartido entre páginas.'
},
methods: {
sharedMethod: function() {
console.log(this.data.sharedText);
return this.data.sharedText === 'Este es un dato compartido entre páginas.';
}
}
})
// page-a.js
const myBehavior = require('./my-behavior.js');
Page({
behaviors: [myBehavior],
onLoad: function() {
console.log(this.data.sharedText); // Debería mostrar el texto compartido.
this.sharedMethod(); // Llama al método compartido.
}
})
Construcción de Páginas con el Constructor Component
El constructor Page es adecuado para páginas sencillas. Sin embargo, para páginas complejas, el constructor Page puede no ser la mejor opción.
En tales casos, puedes usar el constructor Component para construir páginas. La principal diferencia del constructor Component es que los métodos deben colocarse dentro de methods: { }.
Component({
data: {
text: "Estos son datos de la página."
},
methods: {
onLoad: function(options) {
// Se ejecuta al crear la página.
console.log('Page loaded with options:', options);
},
onPullDownRefresh: function() {
// Se ejecuta al realizar un gesto de arrastrar hacia abajo para actualizar.
console.log('Page pulled down to refresh');
},
// Función de respuesta a eventos
viewTap: function() {
console.log('View tapped');
// ... lógica adicional ...
}
}
})
En los mini programas, todo el enrutamiento de páginas es gestionado por el framework.
Puedes extraer código común en un archivo js separado para usarlo como un módulo. Los módulos solo pueden exponer sus interfaces al exterior a través de module.exports o exports.
Nota:
exportses una referencia amodule.exports. Por lo tanto, modificar arbitrariamente la asignación deexportsdentro de un módulo puede provocar errores inesperados. Se recomienda a los desarrolladores usarmodule.exportspara exponer las interfaces del módulo, a menos que comprendan claramente la relación entre ambos.- Actualmente, los mini programas no admiten la importación directa de
node_modules. Si necesitas usarnode_modules, se recomienda copiar el código relevante al directorio del mini programa o utilizar la funcionalidad npm admitida por los mini programas.
// common.js
function sayHello(name) {
console.log(`¡Hola ${name}!`);
}
function sayGoodbye(name) {
console.log(`¡Adiós ${name}!`);
}
module.exports.sayHello = sayHello;
exports.sayGoodbye = sayGoodbye;
En los archivos donde necesites usar estos módulos, impórtalos usando require.
var common = require('common.js');
Page({
helloMINA: function() {
common.sayHello('MINA');
},
goodbyeMINA: function() {
common.sayGoodbye('MINA');
}
})
Ámbito de Archivo
Las variables y funciones declaradas en un archivo JavaScript solo son válidas dentro de ese archivo. Diferentes archivos pueden declarar variables y funciones con el mismo nombre sin interferir entre sí.
Adoptamos la convención de que las APIs que comienzan con on se utilizan para escuchar si se dispara un evento, como: wx.onSocketOpen, wx.onCompassChange, etc.
Este tipo de APIs acepta una función de devolución de llamada como parámetro. Cuando se dispara el evento, se llama a esta función de devolución de llamada y los datos relevantes se pasan como argumento.
Ejemplo de Código
wx.onCompassChange(function (res) {
console.log('Dirección de la brújula:', res.direction);
});
Adoptamos la convención de que las APIs que terminan con Sync son APIs síncronas, como wx.setStorageSync, wx.getSystemInfoSync, etc. Además, existen otras APIs síncronas como wx.createWorker, wx.getBackgroundAudioManager, etc. Consulta la documentación de la API para obtener más detalles.
El resultado de la ejecución de una API síncrona se puede obtener directamente a través del valor de retorno de la función. Si la ejecución falla, se lanzará una excepción.
Ejemplo de Código
try {
wx.setStorageSync('clave', 'valor');
console.log('Datos almacenados síncronamente.');
} catch (e) {
console.error('Error al almacenar síncronamente:', e);
}
La mayoría de las APIs son asíncronas, como wx.request, wx.login, etc. Estas APIs suelen aceptar un parámetro de tipo Object, el cual admite la especificación opcional de los siguientes campos para recibir el resultado de la llamada a la API:
Parámetros del Objeto
| Nombre del Parámetro | Tipo | Obligatorio | Descripción |
|---|---|---|---|
success |
function |
No | Función de devolución de llamada para cuando la llamada a la API es exitosa. |
fail |
function |
No | Función de devolución de llamada para cuando la llamada a la API falla. |
complete |
function |
No | Función de devolución de llamada que se ejecuta al finalizar la llamada a la API (se ejecuta tanto si la llamada tiene éxito como si falla). |
| Otros | Any |
- | Otros parámetros definidos por la API. |
Parámetros de la Función de Devolución de Llamada
Las funciones success, fail y complete reciben un parámetro de tipo Object al ser llamadas, el cual contiene los siguientes campos:
| Propiedad | Tipo | Descripción |
|---|---|---|
errMsg |
string |
Mensaje de error. Si la llamada es exitosa, devuelve ${apiName}:ok. |
errCode |
number |
Código de error. Solo admitido por algunas APIs. Consulta la documentación de la API correspondiente para conocer el significado específico. Devuelve 0 en caso de éxito. |
| Otros | Any |
Otros datos devueltos por la API. |
Interacción Síncrona: Implica enviar una solicitud, esperar la respuesta y luego poder enviar la siguiente solicitud; hay un proceso de espera.
Interacción Asíncrona: Implica enviar una solicitud sin esperar la respuesta, pudiendo enviar la siguiente solicitud en cualquier momento; no se requiere espera.
Diferencia: Una requiere espera y la otra no. En algunas situaciones, en el desarrollo de nuestros proyectos, priorizaremos los métodos de interacción asíncrona que no requieren espera.
Ejemplo de Código
wx.login({
success(res) {
console.log('Código de login:', res.code);
},
fail(err) {
console.error('Error al iniciar sesión:', err);
}
});
A partir de la versión 2.10.2 de la biblioteca base, las APIs asíncronas admiten dos formas de invocación: callbacks y promesas. Cuando el objeto de parámetros de la API no incluye success/fail/complete, por defecto devolverá una promesa. De lo contrario, seguirá ejecutándose según el método de callback y no devolverá ningún valor.
Consideraciones
- Algunas APIs como
downloadFile,request,uploadFile,connectSocket,createCamera(en minijuegos) ya tienen un valor de retorno. Los desarrolladores deben encapsular la promesa de estas APIs por sí mismos. - Cuando no hay parámetros de callback, las APIs asíncronas devuelven una promesa. Si la llamada a la función falla y entra en la lógica
fail, se mostrará un error comoUncaught (in promise). Los desarrolladores pueden capturarlo usandocatch. wx.onUnhandledRejectionpuede escuchar eventos de rechazo de Promesas no manejadas.
Ejemplo de Código
// Llamada en formato callback
wx.chooseImage({
success(res) {
console.log('Resultado (callback):', res);
},
fail(err) {
console.error('Error al elegir imagen (callback):', err);
}
});
// Llamada en formato promise
wx.chooseImage().then(res => {
console.log('Resultado (promise): ', res);
}).catch(err => {
console.error('Error al elegir imagen (promise):', err);
});