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

Thomas Steiner

Mini uygulama proje yapısı

Biçimlendirme dilleri, stil özellikleri ve bileşenlerde olduğu gibi; mini uygulamayla dosya uzantıları veya varsayılan adlar gibi ayrıntılar da 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 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ı. Tüm dosyalar, dosya dışında, içerdikleri klasörler gibi adlandırılmalıdır. uzantılar. 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. Web açısından bakıldığında mini uygulamalar da ç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 ana hatlarıyla açıklanan proje yapısına bakıldığında, app.js. 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 zamanki gibi bireysel ayrıntılar değişiklik gösterse de konsept aynıdır. WeChat, Alipay, Baidu, ByteDance, ayrıca Hızlı Uygulama.

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şleyicilerin ayarlanması için: Her sayfa için tanımlanan Page() yöntemini kullanın. Şuradaki index veya other sayfaları için: proje yapısına önceki, bu index.js veya Sırasıyla other.js.

/* 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, transpilasyon ve minifiye için Babel derleyicisi ve postcss CSS dönüştürücüsü gibi endüstri araçlarını kullanır. Derleme deneyimi, Next.js veya create-react-app; geliştiriciler, derleme parametrelerine asla dokunmamayı tercih ederler. İş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. Ambalaj bilgileri gizlidir ve belgelenmemiş ancak WeChat'in wxapkg biçimi gibi bazı paket biçimleri reverse-engineered.

Teşekkür

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