Struttura, ciclo di vita e raggruppamento dei progetti

Thomas Steiner

Struttura del progetto mini app

Come per i linguaggi di markup, i linguaggi di stile e i componenti; anche con la struttura del progetto delle mini app, dettagli come le estensioni dei file o i nomi predefiniti variano. L'idea generale, tuttavia, è la stessa per tutti i fornitori di superapp. La struttura del progetto è sempre composta da:

  • Un file principale app.js che inizializza la mini app.
  • Un file di configurazione app.json che corrisponde all'incirca a un file manifest dell'app web.
  • Un file del foglio di stile comune facoltativo app.css con gli 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 della 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 le contiene, ad eccezione delle estensioni dei file. In questo modo, la mini app ha solo bisogno di un puntatore alla directory nel file app.json (il file di tipo manifest) e può trovare tutte le risorse secondarie in modo dinamico. Dal punto di vista di uno 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 di mini app

Una mini app deve essere registrata con la super app chiamando il metodo App() definito a livello globale. Facendo riferimento alla struttura del progetto descritta prima, questo succede in app.js. Il ciclo di vita di una mini app è essenzialmente composto da quattro eventi: launch, show, hide e error. I gestori di questi eventi possono essere passati al metodo App() sotto forma di oggetto di configurazione, che può anche contenere una proprietà globalData contenente dati che devono 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 al solito, 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 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 si verificava 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 di mini app viene astrattato dallo sviluppatore. Di più, sta utilizzando strumenti di settore come il compilatore Babel per la traspilazione 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 decidono esplicitamente di non farlo, non devono mai toccare i parametri di build. I file elaborati risultanti vengono infine firmati, criptati e pacchettizzati in uno o più (sotto)pacchetti che poi vengono caricati sui server dei provider di superapp. I sottopacchetti sono pensati per il caricamento lento, quindi non è necessario scaricare una mini app contemporaneamente. 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 invertito.

Ringraziamenti

Questo articolo è stato scritto da Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent e Keith Gu.