Struktur project aplikasi mini
Seperti sebelumnya dengan bahasa markup, bahasa gaya visual, dan komponen; dengan struktur project aplikasi mini, detail seperti ekstensi file atau nama default juga bervariasi. Namun, ide keseluruhannya sama untuk semua penyedia aplikasi super. Struktur project selalu terdiri dari:
- File root
app.js
yang menginisialisasi aplikasi mini. - File konfigurasi
app.json
yang secara kasar 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 setiap subfolder dalam
folder pages
. Setiap subfolder halaman berisi file CSS, file JS, file HTML, dan file JSON konfigurasi opsional. Semua file harus diberi nama seperti folder yang berisinya, selain ekstensi file. 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 developer
web, aplikasi mini adalah 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 didaftarkan dengan aplikasi super dengan memanggil metode App()
yang ditentukan secara global.
Dengan 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 masing-masing bervariasi, tetapi konsepnya sama untuk WeChat, Alipay, Baidu, ByteDance, dan juga Quick App.
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 dilakukan di
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 sebanding dengan pengalaman
Next.js atau
create-react-app
, yang memungkinkan developer, jika
mereka secara eksplisit memilih untuk tidak melakukannya, tidak pernah menyentuh parameter build. 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 paket dimaksudkan untuk bersifat pribadi dan
tidak didokumentasikan, tetapi beberapa format paket seperti format wxapkg
WeChat telah
di-reverse engineering.
Ucapan terima kasih
Artikel ini ditinjau oleh Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, dan Keith Gu.