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

Thomas Steiner

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.