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

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

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

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

ניתן לחשוב על הרכיבים האלה כמו על כל אחת מספריות הרכיבים שהוזכרו למעלה. כדי לקבל סקירה כללית של כל הרכיבים הזמינים תוכלו לעיין בספריית הרכיבים של WeChat, ברכיבים של ByteDance, ברכיבים של Allipay, ב-Baidu's וברכיבי 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 של המידות הסופיות של התמונה, טעינה מדורגת אופציונלית, מקור ברירת מחדל וכו'.

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

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

המפתחים יכולים לעבור ישירות מהתיעוד ישירות ל-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, אלן קנט וקיית' גו.