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