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

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() שמוגדרת ברמת ה-global. בהתאם למבנה הפרויקט שמתואר למעלה, הפעולה הזו מתבצעת בקובץ app.js. מחזור החיים של אפליקציית המיני מורכב בעיקר מארבעה אירועים: launch,‏ show,‏ hide ו-error. אפשר להעביר handlers של האירועים האלה ל-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. הגדרת הגורמים המטפלים באירועים מתבצעת ב-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.