Struttura del progetto di mini app
Come nel caso dei linguaggi di markup, dei linguaggi di stile e dei componenti, anche per la struttura dei progetti di mini app variano i dettagli come le estensioni dei file o i nomi predefiniti. L'idea generale, però, è la stessa per tutti i fornitori di super app. La struttura del progetto è sempre costituita da:
- Un file radice
app.js
che inizializza la mini app. - Un file di configurazione
app.json
che corrisponde approssimativamente a un file manifest di un'app web. - Un file di foglio di stile comune facoltativo
app.css
con stili predefiniti condivisi. - Un file
project.config.json
contenente informazioni sulla build.
Tutte le pagine sono archiviate in singole sottocartelle in una cartella pages
. Ogni sottocartella di pagina contiene un file CSS, un file JS, un file HTML e un file JSON di configurazione facoltativo. Tutti i file devono essere denominati come la cartella che li contiene, tranne le estensioni file. In questo modo, la mini app richiede solo un puntatore alla directory nel file app.json
(il file manifest) e può trovare tutte le sottorisorse in modo dinamico. Dal punto di vista di uno sviluppatore web, le mini app sono quindi app su più pagine.
├── 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 app mini
Una mini app deve essere registrata nella super app chiamando il metodo App()
definito a livello globale.
Facendo riferimento alla struttura del progetto descritta prima, questo processo avviene in
app.js
. Il ciclo di vita delle mini app è costituito essenzialmente da quattro eventi: launch
, show
, hide
e
error
. I gestori per questi eventi possono essere passati al metodo App()
sotto forma di oggetto di configurazione, che può anche contenere una proprietà globalData
contenente i dati che dovrebbero essere disponibili 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 di consueto, i dettagli variano a seconda del caso, ma il concetto è lo stesso per WeChat, Alipay, Baidu, ByteDance e App rapida.
Ciclo di vita della pagina
Analogamente al ciclo di vita dell'app, anche il ciclo di vita delle pagine include eventi del ciclo di vita che lo sviluppatore può ascoltare 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, questo accadrà 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 creazione delle mini app è astratto dallo sviluppatore. In background, utilizza
strumenti di settore come il compilatore Babel per la traspilazione e la minimizzazione e
il trasformatore CSS postcss. L'esperienza di build è paragonabile a quella di Next.js o create-react-app
, in cui gli sviluppatori, se scelgono esplicitamente di non farlo, non toccano mai i parametri di build. I file elaborati risultanti vengono infine firmati, criptati e pacchettizzati in uno o più (sotto)pacchetti che vengono poi caricati sui server dei fornitori di super app. I sottopacchetti sono pensati per il caricamento lento, quindi non è necessario scaricare una mini app
in una volta sola. I dettagli del pacchetto sono pensati per essere privati e non sono documentati, ma alcuni formati di pacchetto, come il formato wxapkg
di WeChat, sono stati progettati in modalità inversa.
Ringraziamenti
Questo articolo è stato esaminato da Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent e Keith Gu.