هيكل المشروع ودورة الحياة والتجميع

Thomas Steiner

بنية مشروع التطبيق المصغَّر

وكما هو الحال من قبل مع اللغات الترميزية ولغات الأنماط والمكونات؛ باستخدام بنية مشروع التطبيقات المصغَّرة أيضًا، تختلف التفاصيل مثل امتدادات الملفات أو الأسماء الافتراضية. ومع ذلك، الفكرة العامة هي نفسها لجميع مقدمي التطبيقات المتميزين. يتكون هيكل المشروع دائمًا من:

  • ملف جذر app.js يؤدي إلى إعداد التطبيق المصغّر.
  • ملف إعداد app.json يتوافق تقريبًا مع بيان تطبيق الويب.
  • ملف اختياري لورقة الأنماط الشائعة app.css بأنماط تلقائية مشتركة.
  • ملف project.config.json يحتوي على معلومات الإصدار

تم تخزين جميع الصفحات في مجلدات فرعية فردية في مجلد pages. يحتوي كل مجلد فرعي للصفحة على ملف CSS وملف JS وملف HTML وملف JSON للإعدادات الاختيارية. يجب تسمية جميع الملفات باسم المجلد الذي تحتوي عليها، بصرف النظر عن امتدادات الملفات. بهذه الطريقة، لا يحتاج التطبيق المصغّر سوى الإشارة إلى الدليل في ملف app.json (الملف الشبيه بالبيان)، ويمكنه العثور على جميع الموارد الفرعية بشكل ديناميكي. من منظور مطوّر الويب، تعد التطبيقات المصغرة تطبيقات متعددة الصفحات.

├── 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

مراحل نشاط التطبيقات المصغّرة

يجب تسجيل التطبيق المصغّر في التطبيق المتميز من خلال طلب طريقة "App()" المحددة عالميًا. بالرجوع إلى بنية المشروع التي تم توضيحها سابقًا، يحدث ذلك في app.js. تتكون دورة حياة التطبيق المصغَّر بشكل أساسي من أربعة أحداث: launch وshow وhide وerror. يمكن تمرير المعالِجات لهذه الأحداث إلى طريقة App() في شكل عنصر إعداد، والذي يمكن أن يحتوي أيضًا على سمة globalData التي تحتفظ ببيانات يجب أن تكون متاحة عالميًا على جميع الصفحات.

/* 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",
});

كالعادة، تختلف التفاصيل الفردية، إلا أنّ المفهوم نفسه في WeChat وAlipay وBaidu وByteDance وأيضًا Quick App.

مراحل نشاط الصفحة

وعلى غرار دورة حياة التطبيق، تشتمل دورة حياة الصفحة أيضًا على أحداث مراحل النشاط يمكن لمطوّر البرامج الاستماع إليها والتفاعل معها. هذه الأحداث الأساسية هي load وshow وready وhide وunload. تقدم بعض المنصات فعاليات إضافية مثل pulldownrefresh. يتم إعداد معالِجات الأحداث بالطريقة Page() المحددة لكل صفحة. بالنسبة إلى index أو صفحات other من بنية المشروع قبل، سيحدث ذلك في index.js أو 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",
  },
});

عملية التصميم

تختفي عملية إنشاء التطبيقات المُصغَّرة عن المطور. بشكل غير مرئي، فهو يستخدم أدوات صناعية مثل محول Babel للنقل والتصغير ومحول CSS postcss. تشبه تجربة التصميم تجربة Next.js أو create-react-app، حيث لا يلمس المطوّرون معلَمات الإصدار مطلقًا، إذا اختاروا عدم السماح بذلك صراحةً. يتم أخيرًا توقيع الملفات التي تمت معالجتها وتشفيرها وتجميعها في حزمة واحدة (فرعية) واحدة أو أكثر يتم تحميلها بعد ذلك إلى خوادم موفري التطبيقات المتميزين. تم تصميم الحزم الفرعية للتحميل الكسول، بحيث لا يلزم تنزيل التطبيق المصغر مرة واحدة. من المفترض أن تكون تفاصيل التغليف خاصة وغير موثَّقة، إلا أنّ بعض تنسيقات الحزم، مثل تنسيق wxapkg في WeChat، تمت بطريقة عكسية.

شكر وتقدير

تمت مراجعة هذه المقالة بواسطة جو ميدلي وكايس باسك وميليكا ميهاجيليا وآلان كينت وكيث غو.