Proje yapısı, yaşam döngüsü ve paketler

Thomas Steiner

Not: Bu gönderi, her makalenin önceki makaleleri temel aldığı bir makale koleksiyonunun parçasıdır. Buraya yeni ulaştıysanız okumaya baştan başlamak isteyebilirsiniz.

Mini uygulama proje yapısı

Daha önce biçimlendirme 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 şunlardan oluşur:

• Mini uygulamayı başlatan kök dosyası app.js.
• Kabaca bir web uygulaması manifestine karşılık gelen app.json yapılandırma dosyası.
• 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, bir pages klasöründeki ayrı alt klasörlerde depolanır. Her sayfa alt klasörü bir CSS dosyası, JS dosyası, HTML dosyası ve isteğe bağlı bir yapılandırma JSON dosyası içerir. Tüm dosyalar, dosya uzantıları dışında, bulundukları klasörler gibi adlandırılmalıdır. Bu şekilde, mini uygulamanın app.json dosyasındaki dizine (manifest benzeri dosya) bir işaretçisi ihtiyacı vardır ve tüm alt kaynakları dinamik olarak bulabilir. Web geliştirici 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, genel olarak tanımlanan App() yöntemi kullanılarak süper uygulamaya kaydedilmelidir. Bu durum, önce özetlenen proje yapısına (app.js) örnek olarak verilebilir. 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 geçirilebilir. Bu nesne, tüm sayfalarda global olarak kullanılabilir olması gereken verileri barındıran bir globalData özelliği 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 bireysel ayrıntılar değişiklik gösterse de konsept WeChat, Alipay, Baidu, ByteDance ve Quick App için aynıdır.

Sayfanın yaşam döngüsü

Uygulama yaşam döngüsünde olduğu gibi, sayfanın yaşam döngüsünde de geliştiricinin dinleyip tepki verebileceği yaşam döngüsü olayları vardır. Bu temel etkinlikler şunlardır: load, show, ready, hide ve unload. Bazı platformlarda pulldownrefresh gibi ek etkinlikler sunulur. Etkinlik işleyiciler her sayfa için tanımlanan Page() yönteminde ayarlanı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 işlemi

Mini uygulamaların derleme süreci, geliştiriciden soyutlanmış bir konudur. Temelde, transpilasyon ve küçültme için Babel derleyicisi ve postcss CSS dönüştürücü gibi endüstri araçlarını kullanır. Derleme deneyimi, Next.js veya create-react-app'tekine benzer. Buradaki geliştiriciler, açıkça istemedikleri takdirde derleme parametrelerine asla dokunmazlar. Ortaya çıkan işlenen dosyalar nihayet imzalanır, şifrelenir ve bir veya birkaç (alt) paket halinde paketlenir. Daha sonra süper uygulama sağlayıcılarının sunucularına yüklenir. Alt paketler geç yükleme için tasarlanmıştır. Bu yüzden, mini uygulamaların tek seferde indirilmesi gerekmez. Paketleme ayrıntılarının gizli olması amaçlanmıştır ve belgelenmemiştir ancak WeChat'in wxapkg biçimi gibi bazı paket biçimleri üzerine geliştirilmiştir.

Başarı: Bir sonraki bölümde mini uygulama standartlaştırma çalışmaları hakkında detaylı bilgi verilmektedir.

Teşekkür

Bu makale, Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent ve Keith Gu tarafından incelenmiştir.