Estructura del proyecto de miniapp
Al igual que antes con los lenguajes de marcado, los lenguajes de diseño y los componentes, con la estructura del proyecto de la app mini, también varían los detalles, como las extensiones de archivo o los nombres predeterminados. Sin embargo, la idea general es la misma para todos los proveedores de super apps. La estructura del proyecto siempre consta de lo siguiente:
- Un archivo raíz
app.js
que inicializa la miniapp. - Un archivo de configuración
app.json
que aproximadamente corresponde a un manifiesto de app web. - Un archivo de hoja de estilo común opcional
app.css
con estilos predeterminados compartidos. - Un archivo
project.config.json
que contiene información de compilación
Todas las páginas se almacenan en subcarpetas individuales en una carpeta pages
. Cada subcarpeta de página contiene un archivo CSS, un archivo JS, un archivo HTML y un archivo JSON de configuración opcional. Todos los archivos deben tener el mismo nombre que la carpeta que los contiene, a excepción de las extensiones de archivo. De esta manera, la app mini solo necesita un puntero al directorio en el archivo app.json
(el archivo similar al manifiesto) y puede encontrar todos los subrecursos de forma dinámica. Desde la perspectiva de un desarrollador web, las miniapps son, por lo tanto, apps de varias páginas.
├── app.js # Initialization logic
├── app.json # Common configuration
├── app.css # Common style sheet
├── project.config.json # Project configuration
└── pages # List of pages
├── index # Home page
│ ├── index.css # Page style sheet
│ ├── index.js # Page logic
│ ├── index.json # Page configuration
│ └── index.html # Page markup
└── other # Other page
├── other.css # Page style sheet
├── other.js # Page logic
├── other.json # Page configuration
└── other.html # Page markup
Ciclo de vida de la app mini
Una miniapp debe registrarse con la superapp llamando al método App()
definido de forma global.
En relación con la estructura del proyecto que se describió antes, esto ocurre en app.js
. El ciclo de vida de la app mini consta, en esencia, de cuatro eventos: launch
, show
, hide
y error
. Los controladores de estos eventos se pueden pasar al método App()
en forma de un objeto de configuración, que también puede contener una propiedad globalData
que contiene datos que deben estar disponibles de forma global en todas las páginas.
/* app.js */
App({
onLaunch(options) {
// Do something when the app is launched initially.
},
onShow(options) {
// Do something when the app is shown.
},
onHide() {
// Do something when the app is hidden.
},
onError(msg) {
console.log(msg);
},
globalData: "I am global data",
});
Como de costumbre, los detalles individuales varían, pero el concepto es el mismo para WeChat, Alipay, Baidu, ByteDance y también para Quick App.
Ciclo de vida de la página
Al igual que el ciclo de vida de la app, el ciclo de vida de la página también tiene eventos de ciclo de vida a los que el desarrollador puede detectar y reaccionar. Estos eventos principales son load
, show
, ready
, hide
y unload
. Algunas plataformas ofrecen eventos adicionales, como pulldownrefresh
. La configuración de los controladores de eventos se realiza en el método Page()
que se define para cada página. Para las páginas index
o other
de la estructura del proyecto antes, esto sucedería en index.js
o other.js
, respectivamente.
/* index.js */
Page({
data: {
text: "This is page data.",
},
onLoad: function (options) {
// Do something when the page is initially loaded.
},
onShow: function () {
// Do something when the page is shown.
},
onReady: function () {
// Do something when the page is ready.
},
onHide: function () {
// Do something when the page is hidden.
},
onUnload: function () {
// Do something when the page is closed.
},
onPullDownRefresh: function () {
// Do something when the user pulls down to refresh.
},
onReachBottom: function () {
// Do something when the user scrolls to the bottom.
},
onShareAppMessage: function () {
// Do something when the user shares the page.
},
onPageScroll: function () {
// Do something when the user scrolls the page.
},
onResize: function () {
// Do something when the user resizes the page.
},
onTabItemTap(item) {
// Do something when the user taps the page's tab.
},
customData: {
foo: "bar",
},
});
Proceso de compilación
El proceso de compilación de las miniapps se abstrae del desarrollador. En su interior, usa
herramientas de la industria, como el compilador Babel para la transpilación y reducción, y
el transformador de CSS postcss. La experiencia de compilación es comparable a la de Next.js o create-react-app
, en la que los desarrolladores, si deciden explícitamente no hacerlo, nunca tocan los parámetros de compilación. Los archivos procesados resultantes se firman, encriptan y empaquetan en uno o varios (sub)paquetes que, luego, se suben a los servidores de los proveedores de superapps. Los subpaquetes están diseñados para la carga diferida, por lo que no es necesario descargar una miniapp de una sola vez. Si bien los detalles del empaquetado deben ser privados y no están documentados, se aplicaron ingeniería inversa a algunos formatos de paquetes, como el formato wxapkg
de WeChat.
Agradecimientos
Este artículo fue revisado por Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent y Keith Gu.