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

תומאס סטיינר

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

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

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

אישורים

המאמר הזה נכתב על ידי Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kant וקיית' גו.