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

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.

النجاح: يقدّم الفصل التالي إحصاءات حول جهود توحيد التطبيقات المصغّرة.

شكر وتقدير

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