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

Thomas Steiner

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österse de 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 şunlardır: load, show, ready, hide ve unload. Bazı platformlar pulldownrefresh gibi ek etkinlikler sunar. Etkinlik işleyicilerin ayarlanması, her sayfa için tanımlanan Page() yönteminde yapılı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 işlemi

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 geç yükleme içindir. Bu nedenle mini uygulamanın aynı anda 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 modellenmiştir.

Teşekkür

Bu makale; Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent ve Keith Gu tarafından incelendi.