Estructura del proyecto de app de mini
Tal como ocurrió antes con los lenguajes de marcación, los lenguajes de estilo y los componentes con la miniapp la estructura del proyecto también varían los detalles como las extensiones de archivo o los nombres predeterminados. El pero la idea general es la misma para todos los proveedores de superapps. La estructura del proyecto siempre consta de lo siguiente:
- Un archivo raíz
app.jsque inicializa la miniapp. - Un archivo de configuración
app.jsonque aproximadamente corresponde a un manifiesto de app web. - Un archivo opcional de hoja de estilo común
app.csscon estilos predeterminados compartidos. - Un archivo
project.config.jsonque contiene información de compilación.
Todas las páginas se almacenan en subcarpetas individuales en un
pages carpeta. Cada subcarpeta de página contiene un archivo CSS, un archivo JS, un archivo HTML y un archivo
archivo JSON de configuración. Todos los archivos deben tener el nombre de la carpeta que los contiene, excepto el archivo.
extensiones. De esta manera, la miniapp solo necesita un puntero al directorio en el archivo app.json.
(el archivo similar a un manifiesto) y puede encontrar todos los subrecursos de forma dinámica. 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
Miniciclo de vida de la app
Una miniapp debe registrarse con la superapp llamando al método App() definido de manera global.
Con referencia a la estructura del proyecto descrita antes, esto sucede en
app.js El ciclo de vida de la miniapp básicamente consta de cuatro eventos: launch, show, hide y
error Los controladores para estos eventos se pueden pasar al método App() en el formato de
de configuración de Terraform, que también puede contener una propiedad globalData que contiene datos que deben
disponibles de manera 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 siempre, los detalles individuales varían, pero el concepto es el mismo para WeChat, Alipay, Baidu ByteDance y también App Rápida.
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 contiene eventos de ciclo de vida que el desarrollador puede
escuchar y reaccionar a ellas. Estos eventos principales son load, show, ready, hide y unload. Algunos
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
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 apps pequeñas 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 creación es comparable con la de
Next.js o
create-react-app, donde los desarrolladores, si
ellos eligen no hacerlo de forma explícita y nunca tocan los parámetros de compilación. Los archivos procesados resultantes
se firman, se encriptan y se 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,
no es necesario
descargarlos todos a la vez. Los detalles del empaquetado deben ser privados y no están documentados, pero algunos formatos de paquetes, como el formato wxapkg de WeChat, se ingeniería inversa.
Agradecimientos
Este artículo fue revisado por Joe Medley: Kayce Basques, Milica Mihajlija Alan Kent, y Keith Gu.