Mini uygulama proje yapısı
Önceden biçimlendirme dilleri, stil özellikleri ve bileşenlerde olduğu gibi, mini uygulama projesi 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 şunlardan oluşur:
- Mini uygulamayı başlatan
app.js
kök dosyası. - Yaklaşık olarak bir web uygulaması manifestine karşılık gelen yapılandırma dosyası
app.json
. - Paylaşılan varsayılan stillere sahip isteğe bağlı bir ortak stil sayfası dosyası
app.css
. - Derleme bilgilerini içeren
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ı hariç tüm dosyalar, içerdikleri klasörler gibi adlandırılmalıdır. Yani 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. Web geliştiricisi 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 uygulama, küresel olarak tanımlanan App()
yöntemi kullanılarak süper uygulamaya kaydedilmelidir.
Önceden özetlenen proje yapısına bakıldığında, bu app.js
içinde 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 bir yapılandırma nesnesi biçiminde iletilebilir. Bu nesne, tüm sayfalarda global olarak kullanılabilir olması gereken verileri barındıran globalData
özelliğini 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 zamanki gibi ayrıntılar değişiklik gösterse de konsept WeChat, Alipay, Baidu, ByteDance ve Quick App'te aynıdır.
Sayfa yaşam döngüsü
Uygulama yaşam döngüsüne benzer şekilde sayfa yaşam döngüsünde de geliştiricinin dinleyip tepki verebileceği yaşam döngüsü olayları bulunur. Bu temel etkinlikler şunlardır: load
, show
, ready
, hide
ve unload
. Bazı platformlarda pulldownrefresh
gibi ek etkinlikler sunulur. Etkinlik işleyicilerin ayarlanması, her sayfa için tanımlanan Page()
yönteminde yapılır. Bu durum, önceki proje yapısındaki index
veya other
sayfaları için sırasıyla index.js
veya other.js
içinde 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 soyutlanmış. Temelde, metne dönüştürme ve küçültme için Babel derleyicisi ve postcss CSS dönüştürücü gibi endüstri araçları kullanılmaktadır. Derleme deneyimi Next.js veya create-react-app
ile karşılaştırılabilir. Burada geliştiriciler açıkça istemezlerse derleme parametrelerine asla dokunmazlar. Ortaya çıkan işlenmiş dosyalar nihayet imzalanır, şifrelenir ve bir veya birkaç alt pakette paketlenir. Daha sonra bu dosyalar süper uygulama sağlayıcılarının sunucularına yüklenir. Alt paketler geç yükleme içindir. Bu nedenle mini uygulamanın aynı anda indirilmesi gerekmez. Ambalaj ayrıntıları gizli olmak üzere tasarlanmıştır ve bu bilgiler belgelenmez. Bununla birlikte, WeChat'in wxapkg
biçimi gibi bazı paket biçimleri için ters mühendislik yapılmıştır.
Teşekkür
Bu makale Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent ve Keith Gu tarafından incelenmiştir.