Estructura, ciclo de vida y paquetes del proyecto

Thomas Steiner

Estructura del proyecto de la miniapp

Al igual que antes con los lenguajes de marcación, los lenguajes de estilo y los componentes; también con la estructura del proyecto de la miniapp, los detalles como las extensiones de archivo o los nombres predeterminados varían. Sin embargo, la idea general es la misma para todos los proveedores de apps avanzadas. La estructura del proyecto siempre consta de lo siguiente:

• Un archivo raíz app.js que inicialice la miniapp
• Un archivo de configuración app.json que corresponde alrededor a un manifiesto de app web.
• Un archivo opcional de hoja de estilo común 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 la página contiene un archivo CSS, un archivo JS, un archivo HTML y un archivo de configuración JSON opcional. Todos los archivos deben tener el mismo nombre que la carpeta contenedora, excepto las extensiones de archivo. De esta manera, la miniapp solo necesita un puntero al directorio del archivo app.json (el archivo similar al manifiesto) y puede encontrar todos los subrecursos de manera dinámica. Por lo tanto, desde la perspectiva de un desarrollador web, las miniapps son 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 miniapp

Para registrar una miniapp, la superapp debe llamar al método App() definido de manera global. Si se refiere a la estructura del proyecto que se describió antes, esto sucede en app.js. En esencia, el ciclo de vida de la miniapp consta de cuatro eventos: launch, show, hide y error. Los controladores para estos eventos se pueden pasar al método App() en forma de objeto de configuración, que también puede contener una propiedad globalData que contenga datos que deberían estar disponibles globalmente 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 Quick App.

Ciclo de vida de la página

De manera similar al ciclo de vida de la app, el ciclo de vida de la página también tiene eventos de ciclo de vida que el desarrollador puede escuchar y a los que puede 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 ocurrirí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. De forma interna, usa herramientas de la industria como el compilador Babel para transpilación y reducción, y el transformador CSS postcss. La experiencia de compilación es similar 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 finalmente se firman, encriptan y empaquetan en uno o varios (sub)paquetes que, luego, se suben a los servidores de los proveedores de la superapp. Los subpaquetes están diseñados para la carga diferida, por lo que no es necesario descargar una miniapp de una sola vez. Los detalles del empaquetado deben ser privados y no están documentados, pero se revirtieron los cambios de ingeniería en algunos formatos de paquetes, como el formato wxapkg de WeChat.

Agradecimientos

Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent y Keith Gu revisaron este artículo.