Mini uygulama proje yapısı
İşaretleme dilleri, stil dilleri ve bileşenlerde olduğu gibi, mini uygulama proje yapısında da dosya uzantıları veya varsayılan adlar gibi ayrıntılar değişiklik gösterir. Ancak genel fikir tüm süper uygulama sağlayıcıları için aynıdır. Proje yapısı her zaman şunları içerir:
- Mini uygulamayı başlatan bir kök dosya
app.js
. - Web uygulaması manifestine yaklaşık olarak karşılık gelen bir yapılandırma dosyası
app.json
. - Paylaşılan varsayılan stilleri içeren isteğe bağlı bir ortak stil sayfası dosyası
app.css
. - Derleme bilgilerini içeren bir
project.config.json
dosyası.
Tüm sayfalar, pages
klasöründeki ayrı alt klasörlerde depolanır. Her sayfa alt klasörü bir CSS dosyası, bir JS dosyası, bir HTML dosyası ve isteğe bağlı bir yapılandırma JSON dosyası içerir. Dosya uzantılarından hariç tüm dosyalar, içerdikleri klasörle aynı ada sahip olmalıdır. Bu sayede mini uygulamanın, app.json
dosyasında (manifest benzeri dosya) dizine işaret eden bir işaretçiye ihtiyacı vardır ve tüm alt kaynakları dinamik olarak bulabilir. Bu nedenle, web geliştiricileri açısından mini uygulamalar çok sayfalı uygulamalardır.
├── 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
Mini uygulama yaşam döngüsü
Mini uygulamalar, dünya genelinde tanımlanmış App()
yöntemi çağrılarak süper uygulamaya kaydedilmelidir.
Daha önce açıklanan proje yapısına göre bu işlem app.js
'de gerçekleşir. Mini uygulama yaşam döngüsü temel olarak dört etkinlikten oluşur: launch
, show
, hide
ve error
. Bu etkinliklerin işleyicileri, App()
yöntemine yapılandırma nesnesi biçiminde iletilebilir. Bu yapılandırma nesnesi, tüm sayfalarda genel olarak kullanılabilecek verileri barındıran bir globalData
mülkü de içerebilir.
/* 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",
});
Her zaman olduğu gibi ayrıntılar değişiklik gösterir ancak WeChat, Alipay, Baidu, ByteDance ve Quick App için temel kavram aynıdır.
Sayfa yaşam döngüsü
Uygulama yaşam döngüsüne benzer şekilde, sayfa yaşam döngüsü de geliştiricinin dinleyebileceği ve tepki verebileceği yaşam döngüsü etkinliklerine sahiptir. Bu temel etkinlikler load
, show
, ready
, hide
ve unload
'dir. Bazı platformlar pulldownrefresh
gibi ek etkinlikler sunar. Etkinlik işleyicileri, her sayfa için tanımlanan Page()
yönteminde ayarlanır. Proje yapısındaki index
veya other
sayfaları için önceki durum sırasıyla index.js
veya other.js
'te gerçekleşir.
/* 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",
},
});
Derleme süreci
Mini uygulamaların derleme süreci geliştiriciden soyutlanır. Arka planda, kod dönüştürme ve kod küçültme için Babel derleyicisi ve postcss CSS dönüştürücü gibi endüstri araçlarını kullanır. Derleme deneyimi, geliştiricilerin açıkça tercih etmediği sürece derleme parametrelerine hiç dokunmadığı Next.js veya create-react-app
ile benzerdir. İşlenen dosyalar son olarak imzalanır, şifrelenir ve bir veya daha fazla (alt) paket halinde paketlenir. Bu paketler daha sonra süper uygulama sağlayıcılarının sunucularına yüklenir. Alt paketler, yavaş yükleme için tasarlanmıştır. Bu nedenle, mini uygulamaların bir kerede indirilmesi gerekmez. Paketleme ayrıntıları gizlidir ve belgelenmez ancak WeChat'in wxapkg
biçimi gibi bazı paket biçimleri ters mühendislik kullanılarak incelenmiştir.
Teşekkür ederiz
Bu makale; Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent ve Keith Gu tarafından incelendi.