Struttura del progetto mini app
Come per i linguaggi di markup, i linguaggi di stile e i componenti, anche con la struttura del progetto della mini app i dettagli come le estensioni dei file o i nomi predefiniti variano. Tuttavia, l'idea complessiva è la stessa per tutti i fornitori di super app. La struttura del progetto è sempre composta da:
- Un file principale
app.jsche inizializza la mini app. - Un file di configurazione
app.jsonche grosso modo corrisponde a un manifest dell'app web. - Un file foglio di stile comune facoltativo
app.csscon stili predefiniti condivisi. - Un file
project.config.jsoncontenente informazioni sulla build.
Tutte le pagine sono memorizzate in singole sottocartelle di una
pages cartella. Ogni sottocartella della pagina contiene un file CSS, un file JS, un file HTML e un file JSON di configurazione facoltativo. Tutti i file devono avere lo stesso nome della cartella contenente, tranne per le estensioni. In questo modo, la mini app ha bisogno solo di un puntatore alla directory nel file app.json (il file manifest) e può trovare tutti i sottorisorse in modo dinamico. Dal punto di vista di un sviluppatore web, le mini app sono quindi app multipagina.
├── 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 di vita delle mini app
Una mini app deve essere registrata nella super app chiamando il metodo App() definito a livello globale.
Facendo riferimento alla struttura del progetto descritta in precedenza, questo accade in
app.js. Il ciclo di vita delle mini app è costituito essenzialmente da quattro eventi: launch, show, hide e
error. I gestori di questi eventi possono essere passati al metodo App() sotto forma di un
oggetto di configurazione, che può contenere anche una proprietà globalData contenente i dati che devono essere
disponibile a livello globale in tutte le pagine.
/* 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",
});
Come sempre, i singoli dettagli variano, ma il concetto è lo stesso per WeChat, Alipay, Baidu, ByteDance, e anche per Quick App.
Ciclo di vita della pagina
Analogamente al ciclo di vita dell'app, anche il ciclo di vita della pagina ha eventi del ciclo di vita che lo sviluppatore può monitorare e a cui può reagire. Questi eventi principali sono load, show, ready, hide e unload. Alcune piattaforme offrono eventi aggiuntivi come pulldownrefresh. La configurazione dei gestori di eventi avviene nel metodo Page() definito per ogni pagina. Per le pagine index o other della
struttura del progetto prima, ciò avverrebbe rispettivamente in index.js o
other.js.
/* 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",
},
});
Il processo di compilazione
Il processo di compilazione delle mini app è astratto dallo sviluppatore. Sotto il cofano, utilizza strumenti di settore come il compilatore Babel per la transpilazione e la minimizzazione e il trasformatore CSS PostCSS. L'esperienza di compilazione è paragonabile a quella di
Next.js o
create-react-app, in cui gli sviluppatori, se
esplicitamente scelgono di non farlo, non toccano mai i parametri di compilazione. I file elaborati risultanti
vengono infine firmati, criptati e pacchettizzati in uno o più (sotto)pacchetti che vengono poi caricati
sui server dei provider di super app. I sottopacchetti sono pensati per il caricamento differito, quindi una mini app
non deve essere scaricata tutta in una volta. I dettagli dell'imballaggio sono destinati a essere privati e non sono documentati, ma alcuni formati di pacchetti, come il formato wxapkg di WeChat, sono stati sottoposti a reverse engineering.
Ringraziamenti
Questo articolo è stato esaminato da Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, e Keith Gu.