Struktur proyek, siklus hidup, dan pemaketan proyek

Thomas Steiner

Struktur project aplikasi mini

Seperti bahasa markup, bahasa gaya visual, dan komponennya; dengan aplikasi mini struktur proyek, detail seperti ekstensi file atau nama {i>default<i} juga bervariasi. Tujuan ide keseluruhannya adalah sama untuk semua penyedia aplikasi super. Struktur proyek selalu terdiri dari:

• File root app.js yang menginisialisasi aplikasi mini.
• File konfigurasi app.json yang kira-kira sesuai dengan manifes aplikasi web.
• File sheet gaya umum opsional app.css dengan gaya default bersama.
• File project.config.json yang berisi informasi build.

Semua halaman disimpan di dalam masing-masing {i>subfolder<i} dalam sebuah Folder pages. Setiap subfolder halaman berisi file CSS, file JS, file HTML, dan file JSON konfigurasi opsional. Semua file harus diberi nama seperti folder di dalamnya, terlepas dari filenya ekstensi. Dengan begitu, aplikasi mini hanya memerlukan pointer ke direktori dalam file app.json (file seperti manifes), dan dapat menemukan semua sub-resource secara dinamis. Dari perspektif web pengembang, aplikasi mini menjadi aplikasi multi-halaman.

├── 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

Siklus proses aplikasi mini

Aplikasi mini harus terdaftar di aplikasi super dengan memanggil metode App() yang ditetapkan secara global. Mengacu pada struktur project yang diuraikan sebelumnya, hal ini terjadi di app.js. Siklus proses aplikasi mini pada dasarnya terdiri dari empat peristiwa: launch, show, hide, dan error. Pengendali untuk peristiwa ini dapat diteruskan ke metode App() dalam bentuk objek konfigurasi, yang juga dapat berisi properti globalData yang menyimpan data yang harus tersedia secara global di semua halaman.

/* 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",
});

Seperti biasa, detail individu bervariasi, tetapi konsepnya sama untuk WeChat, Alipay, Baidu ByteDance, dan juga Aplikasi Cepat.

Siklus proses halaman

Serupa dengan siklus proses aplikasi, siklus proses halaman juga memiliki peristiwa siklus proses yang dapat didengarkan dan direspons oleh developer. Peristiwa inti ini adalah load, show, ready, hide, dan unload. Beberapa platform menawarkan peristiwa tambahan seperti pulldownrefresh. Penyiapan pengendali peristiwa terjadi dalam metode Page() yang ditentukan untuk setiap halaman. Untuk halaman index atau other dari struktur project sebelumnya, hal ini akan terjadi di index.js atau 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",
  },
});

Proses build

Proses build aplikasi mini diabstraksi dari developer. Di balik layar, alat ini menggunakan alat industri seperti compiler Babel untuk transpilasi dan minifikasi serta transformer CSS postcss. Pengalaman build-nya sebanding dengan Next.js atau create-react-app, jika developer, jika secara eksplisit memilih untuk tidak, dan tidak pernah menyentuh parameter build. Hasil file yang diproses akhirnya ditandatangani, dienkripsi, dan dikemas dalam satu atau beberapa (sub) paket yang kemudian diupload ke server penyedia aplikasi super. Subpaket dimaksudkan untuk pemuatan lambat, sehingga aplikasi mini tidak perlu didownload sekaligus. Detail kemasan dimaksudkan untuk pribadi dan tidak didokumentasikan, tetapi beberapa format paket seperti format wxapkg WeChat telah reverse-engineered.

Ucapan terima kasih

Artikel ini telah ditinjau oleh Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, dan Keith Gu.