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

Thomas Steiner

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

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

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

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

הראיתי קודם שבעוד ש-<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
  • canvas
• מפה
  • map
• פתיחת רכיבים
  • web-view
  • lifestyle
  • contact-button
• נגישות
  • aria-component

בדוגמה הבאה אפשר לראות את הרכיב <image> של Alipay בשימוש בהנחיית a:for (ראו List rendering) שחוזרת על מערך נתוני תמונה שסופק ב-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>

תודות

המאמר הזה נבדק על ידי ג'ו מדלי, קייסי בסקס, מיליקה מיחייליה, אלן קנט וקית' גו.