רכיבי אינטרנט
רכיבי אינטרנט התחילו בהבטחה לאפשר למפתחים לחבר אותם ולבנות עליהם אפליקציות נהדרות. דוגמאות לרכיבים אטומיים כאלה: אלמנטים של זמן ב-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 של המידות הסופיות של התמונה, טעינה מדורגת אופציונלית, מקור ברירת מחדל וכו'.
כל אפשרויות התצורה הזמינות של הרכיב מפורטות במסמכי התיעוד. תצוגה מקדימה של רכיב עם סימולטור שמוטמעת במסמכים הופכת את הקוד למוחשי באופן מיידי.
![תיעוד של הרכיב Alipay עם תצוגה מקדימה מוטמעת של הרכיבים, שמופיעים בו עורך קוד עם סימולטור שמראה את הרכיב שעבר רינדור בהדמיה של iPhone 6.](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipay-component-document-6b7c4f21b0d0f.png?authuser=5&hl=he)
![תצוגה מקדימה של רכיב Alipay פועלת בכרטיסייה נפרדת בדפדפן, ומוצגת בה עורך קוד עם סימולטור שמראה את הרכיב שעבר רינדור בהדמיה של iPhone 6.](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipay-component-preview-1da9c839edf25.png?authuser=5&hl=he)
לכל רכיב יש גם קוד QR שאפשר לסרוק באמצעות אפליקציית Alipay, שנפתחת דוגמה של הרכיב בדוגמה מינימלית.
![הרכיב 'תמונה' של Alipay מוצג בתצוגה מקדימה במכשיר אמיתי אחרי שסרקה קוד QR במסמכי התיעוד.](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipays-image-componen-696a04ff61022.png?authuser=5&hl=he)
<image>
במכשיר אמיתי אחרי לחיצה על קישור קוד 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, אלן קנט וקיית' גו.