מבנה הפרויקט של מיני אפליקציות
כמו בעבר בשפות הסימון, שפות העיצוב והרכיבים; בנוסף למבנה המינימלי של פרויקט האפליקציה, הפרטים כמו סיומות הקבצים או שמות ברירת המחדל משתנים. עם זאת, הרעיון הכולל זהה לכל הספקים של אפליקציות העל. מבנה הפרויקט תמיד מורכב מ:
- קובץ בסיס
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. אפשר להעביר 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. ההגדרה של הגורמים המטפלים באירועים מתבצעת בשיטה 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, עברו הנדסה הפוכה.
אישורים
המאמר הזה נבדק על ידי ג'ו מדלי, קייס בסקית, Milica Mihajlija, אלן קנט, וקית גו.