רכיבי מיני אפליקציה

Thomas Steiner

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

רכיבי אינטרנט

רכיבי אינטרנט התחילו עם הבטחה לאפשר למפתחים לחבר ביניהם ולבנות אפליקציות מעולות מעל הכול. דוגמאות לרכיבים אטומיים כאלה הן time-elements של GitHub, web-vitals-element של סטפן ג'ודיס (Stefan Judis) או, בלי להתבייש, מתג החלפת המצב למצב כהה של Google. עם זאת, כשמדובר במערכות תכנון מלאות, שמתי לב שאנשים מעדיפים להסתמך על קבוצה קוהרנטית של רכיבים מאותו ספק. רשימה חלקית של דוגמאות כוללת את רכיבי ה-Web של UI5 של SAP, את רכיבי Polymer, את רכיבי Vaadin, את FAST של Microsoft, את רכיבי Material Web, את רכיבי AMP ועוד רבים. עם זאת, בגלל מספר גורמים שאינם נכללים במאמר הזה, הרבה מפתחים החלו להשתמש גם בפלטפורמות כמו React,‏ Vue.js,‏ Ember.js וכו'. במקום לתת למפתחים את החופש לבחור מבין האפשרויות האלה (או, בהתאם לנקודת המבט שלכם, לאלץ אותם לבחור טכנולוגיה), ספקי סופר-אפליקציות מספקים באופן אוניברסלי קבוצה של רכיבים שהמפתחים חייבים להשתמש בהם.

רכיבים במיני אפליקציות

תוכלו לחשוב על הרכיבים האלה כמו על כל אחת מספריות הרכיבים שצוינו למעלה. כדי לקבל סקירה כללית של הרכיבים הזמינים, אפשר לעיין בספריית הרכיבים של WeChat, ברכיבים של ByteDance, ברכיבים של Alipay, ב-Baidu וברכיבי Quick App.

קודם הראיתי שלמשל, <image> של WeChat הוא רכיב אינטרנט מתחת לפני השטח, אבל לא כל הרכיבים האלה הם רכיבי אינטרנט מבחינה טכנית. חלק מהרכיבים, כמו <map> ו-<video>, עוברים עיבוד כרכיבים מובנים במערכת ההפעלה שמתווספים לשכבה שלמעלה מ-WebView. המפתח לא רואה את פרטי ההטמעה האלה, והם מתוכנתים כמו כל רכיב אחר.

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

• הצגת קונטיינרים
  • view
  • swiper
  • scroll-view
  • cover-view
  • cover-image
  • movable-view
  • movable-area
• תוכן בסיסי
  • text
  • icon
  • progress
  • rich-text
• רכיבי הטופס
  • button
  • form
  • label
  • input
  • textarea
  • radio
  • radio-group
  • checkbox
  • checkbox-group
  • switch
  • slider
  • picker-view
  • picker
• ניווט
  • navigator
• רכיבי מדיה
  • image
  • video
• קנבס
  • canvas
• מפה
  • map
• רכיבים פתוחים
  • web-view
  • lifestyle
  • contact-button
• נגישות
  • aria-component

בהמשך מופיע הדוגמה לשימוש ב-<image> של Alipay בהוראת a:for (ראו הצגת רשימות) שמבצעת לולאה על מערך של נתוני תמונות שסופק ב-index.js.

/* index.js */
Page({
  data: {
    array: [
      {
        mode: "scaleToFill",
        text: "scaleToFill",
      },
      {
        mode: "aspectFit",
        text: "aspectFit",
      },
    ],
    src: "https://images.example.com/sample.png",
  },
  imageError(e) {
    console.log("image", e.detail.errMsg);
  },
  onTap(e) {
    console.log("image tap", e);
  },
  imageLoad(e) {
    console.log("image", e);
  },
});

<!-- index.axml -->
<view class="page">
  <view class="page-section" a:for="{{array}}" a:for-item="item">
    <view class="page-section-demo" onTap="onTap">
      <image
        class="image"
        mode="{{item.mode}}"
        onTap="onTap"
        onError="imageError"
        onLoad="imageLoad"
        src="{{src}}"
        lazy-load="true"
        default-source="https://images.example.com/loading.png"
      />
    </view>
  </view>
</view>

שימו לב לקישורי הנתונים של item.mode למאפיין mode, של src למאפיין src, ושל שלושת פונקציות הטיפול באירועים onTap,‏ onError ו-onLoad לפונקציות בעלות אותו שם. כפי שצוין לפני כן, התג <image> הופך באופן פנימי ל-<div> עם placeholder של המימדים הסופיים של התמונה, טעינה מדורגת אופציונלית, מקור ברירת מחדל וכו'.

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

תיעוד של רכיבי Alipay עם תצוגה מקדימה של רכיב מוטמע.

התצוגה המקדימה של רכיב Alipay קופצת לכרטיסייה משלה.

לכל רכיב יש גם קוד QR שאפשר לסרוק באמצעות אפליקציית Alipay. זה פותח את דוגמה של הרכיב בדוגמה מינימלית עצמאית.

תצוגה מקדימה של הרכיב <image> של Alipay במכשיר אמיתי אחרי לחיצה על קישור לקוד QR מהמסמכים.

מפתחים יכולים לעבור מהמסמכים ישירות ל-IDE של Alipay DevTools באמצעות סכימה קניינית של URI‏ antdevtool-tiny://. כך אפשר לקשר את המסמכים ישירות לפרויקט של אפליקציית המיני שרוצים לייבא, כדי שמפתחים יוכלו להתחיל לעבוד עם הרכיב באופן מיידי.

רכיבים בהתאמה אישית

בנוסף לשימוש ברכיבים שסופקו על ידי הספק, מפתחים יכולים גם ליצור רכיבים מותאמים אישית. העיקרון הזה קיים ב-WeChat, ב-ByteDance, ב-Alipay, ב-Baidu וב-Quick App. לדוגמה, רכיב מותאם אישית של Baidu מורכב מארבעה קבצים שצריכים להיות באותה תיקייה: custom.swan,‏ custom.css,‏ custom.js ו-custom.json.

הקובץ custom.json מציין את תוכן התיקייה כרכיב מותאם אישית.

{
  "component": true
}

הקובץ custom.swan מכיל את תגי העיצוב ו-custom.css את ה-CSS.

<view class="name" bindtap="tap">{{name}} {{age}}</view>

.name {
  color: red;
}

הקובץ custom.js מכיל את הלוגיקה. פונקציות מחזור החיים של הרכיבים הן attached(),‏ detached(),‏ created() ו-ready(). הרכיב יכול גם להגיב לאירועים במחזור החיים של דף, כלומר show() ו-hide().

Component({
  properties: {
    name: {
      type: String,
      value: "swan",
    },
  },
  data: {
    age: 1,
  },
  methods: {
    tap: function () {},
  },
  lifetimes: {
    attached: function () {},
    detached: function () {},
    created: function () {},
    ready: function () {},
  },
  pageLifetimes: {
    show: function () {},
    hide: function () {},
  },
});

לאחר מכן אפשר לייבא את הרכיב המותאם אישית ב-index.json. המפתח של הייבוא קובע את השם (כאן: "custom") שבו אפשר להשתמש ברכיב המותאם אישית ב-index.swan.

{
  "usingComponents": {
    "custom": "/components/custom/custom"
  }
}

<view>
  <custom name="swanapp"></custom>
</view>

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

תודות

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