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

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

الشكر والتقدير

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