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

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

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

  • קובץ 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() שמוגדרת ברמת ה-global. בהתאם למבנה הפרויקט שמתואר למעלה, הפעולה הזו מתבצעת בקובץ 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. הגדרת הגורמים המטפלים באירועים מתבצעת ב-method‏ 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 לטרנספיקציה ולצמצום קוד, וכן הטרנספורמר של CSS‏ postcss. חוויית ה-build דומה לזו של Next.js או create-react-app, שבהן המפתחים אף פעם לא נוגעים בפרמטרים של ה-build, אלא אם הם בוחרים לעשות זאת במפורש. בסיום התהליך, הקבצים המעובדים נחתמים, מוצפנים ומארזים בחבילה אחת או בכמה חבילות משנה, ולאחר מכן הם מועלים לשרתים של ספקי האפליקציות הגדולות. חבילות משנה מיועדות לטעינה איטית, כך שאין צורך להוריד אפליקציה מיני בבת אחת. פרטי האריזה אמורים להיות פרטיים ולא מתועדים, אבל בוצעו הנדסה לאחור בפורמטים מסוימים של חבילות, כמו הפורמט wxapkg של WeChat.

תודות

הבדיקה של המאמר בוצעה על ידי Joe Medley,‏ Kayce Basques,‏ Milica Mihajlija,‏ Alan Kent ו-Keith Gu.