מבנה הפרויקט, מחזור החיים וקיבוץ בקשות

Thomas Steiner

הערה: הפוסט הזה הוא חלק מתוך קולקציית מאמרים, שבה כל מאמר מבוסס על מאמרים קודמים. אם הגעתם לכאן עכשיו, מומלץ להתחיל לקרוא מההתחלה.

מבנה הפרויקט של אפליקציה מיני

כמו בשפות הסימון, בשפות העיצוב וברכיבים, גם במבנה הפרויקט של האפליקציה המינימלית יש הבדלים בפרטים כמו סיומות הקבצים או שמות ברירת המחדל. עם זאת, הרעיון הכללי זהה לכל ספקי-העל של אפליקציות. מבנה הפרויקט תמיד מורכב מ:

• קובץ root‏ app.js שמאתחלה את האפליקציה המיני.
• קובץ תצורה app.json שדומה למניפסט של אפליקציית אינטרנט.
• קובץ אופציונלי של גיליון סגנונות משותף app.css עם סגנונות ברירת מחדל משותפים.
• קובץ project.config.json שמכיל מידע על ה-build.

כל הדפים מאוחסנים בתיקיות משנה נפרדות בקובץ תיקייה אחת (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. ניתן להעביר מטופלים עבור האירועים האלה ל-method 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",
  },
});

תהליך ה-build

תהליך ה-build של מיני אפליקציות מופשט מהמפתח. מאחורי הקלעים נעשה שימוש כלים מהתעשייה כמו המהדר של Babel, להעברה ולהקטנה בטרנספורמר postcss ב-CSS. חוויית ה-build דומה לזו של Next.js או create-react-app, שבהן המפתחים אף פעם לא נוגעים בפרמטרים של ה-build, אלא אם הם בוחרים לעשות זאת במפורש. הקבצים המעובדים שהתקבלו נחתמים בסופו של דבר, מוצפנים ונארזים בחבילה אחת או יותר (תת) ואז מועלות לשרתים של ספקי-העל של אפליקציות. חבילות משנה מיועדות לטעינה מדורגת, לכן מיני אפליקציה לא חייב להוריד את כולן בבת אחת. פרטי האריזה אמורים להיות פרטיים ולא מתועדים, אבל בוצעו הנדסה לאחור בפורמטים מסוימים של חבילות, כמו הפורמט wxapkg של WeChat.

הצלחה: הפרק הבא מספק תובנות על המאמץ המינימלי של סטנדרטיזציה של אפליקציות.

תודות

המאמר הזה נבדק על ידי ג'ו מדלי, קייס בסקית, Milica Mihajlija, אלן קנט, וקית גו.