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

توماس شتاينر

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

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

• ملف جذر 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 والتطبيق السريع أيضًا.

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

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

شكر وتقدير

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