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

Thomas Steiner

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

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

רכיבי אינטרנט התחילו ב- אנחנו מבטיחים לאפשר למפתחים לחבר ביניהם וליצור מעליהם אפליקציות מעולות. דוגמאות של רכיבים אטומיים כאלה הם רכיבי הזמן של GitHub, סטפן יהודית web-vitals-element, או התקע חסר בושה, מתג של Google למצב כהה כאשר מדובר מערכות עיצוב מלאות, אבל ראיתי שאנשים מעדיפים להסתמך על רכיבים מאותו ספק. רשימת דוגמאות חלקית כוללת את UI5 Web Components, Polymer Elements, האלמנטים של ואדין, מהיר, Material Web Components, אלה רכיבי AMP, ועוד רבים אחרים. בעקבות של המאמר הזה יש גורמים רבים, אבל הרבה מפתחים עברו אל frameworks כמו 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
• מפה
  • 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 באמצעות סכימת URI קניינית antdevtool-tiny://. כך ניתן לקשר את המסמכים ישירות אל של פרויקט מיני שמיועד לייבוא, כדי שהמפתחים יוכלו להתחיל לעבוד עם הרכיב באופן מיידי.

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

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

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

אישורים

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