مكونات التطبيق المصغّر

توماس شتاينر

مكوّنات الويب

بدأت مكونات الويب بوعدٍ بالسماح للمطورين بتجميعها معًا وإنشاء تطبيقات رائعة فوقها. ومن الأمثلة على هذه المكوّنات الذرية: العناصر الزمنية في GitHub، وعناصر Web-vitals- من "ستيفان جودس"، أو المقبس الخالي من العار، وإيقاف الوضع الداكن من Google. ومع ذلك، عندما يتعلق الأمر بأنظمة التصميم الكاملة، لاحظت أن الناس يفضلون الاعتماد على مجموعة متماسكة من المكونات من نفس البائع. تتضمّن القائمة غير المكتملة للأمثلة مكونات ويب UI5 من SAP، وعناصر البوليمر، وعناصر Vaadin، وFAST من Microsoft، وMaterial Web Components، ومكوّنات AMP، على الأرجح، وغير ذلك الكثير. بسبب عدد من العوامل التي لا يمكن تناولها في هذه المقالة، تدفّق الكثير من المطوّرين أيضًا إلى إطارات عمل مثل React وVue.js وEmber.js وغيرها. وبدلاً من منح المطوّرين حرية الاختيار من بين أيّ من هذه الخيارات (أو بدلاً من منح المطوّرين حرية الاختيار من بين أيّ من هذه الخيارات (أو، اعتمادًا على وجهة نظرك، forcing على الاختيار من بين إطارات عمل، يجب أن يوفّر المطوّرون بشكلٍ كبير مجموعة من المكونات التي يوفّرها للمطوّرين).

المكونات في التطبيقات الصغيرة

يمكنك التفكير في هذه المكونات مثل أي من مكتبات المكونات المذكورة أعلاه. للحصول على نظرة عامة على المكونات المتاحة، يمكنك تصفُّح مكتبة مكونات WeChat ومكوّنات ByteDance ومكوّنات Alipay وBaidu's و مكوّنات التطبيقات السريعة.

في وقت سابق أظهرت أنّه على سبيل المثال، <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> باستخدام عنصر نائب للأبعاد النهائية للصورة والتحميل الكسول الاختياري ومصدر تلقائي وما إلى ذلك.

ويتم إدراج جميع خيارات التهيئة المتاحة للمكون في المستندات. تؤدي معاينة المكوِّن باستخدام المحاكي المضمَّن في المستندات إلى جعل الرمز ملموسًا على الفور.

مستندات مكوِّنة من Alipay مع معاينة مكوّن مضمَّن، تعرِض أداة تعديل رموز تتضمّن مُحاكيًا يعرض المكوِّن المعروض على هاتف iPhone 6 محاكى
مستندات مكوِّن Alipay مع معاينة المكوِّن المضمَّن.
جارٍ تشغيل معاينة مكوّن Alipay في علامة تبويب منفصلة في المتصفّح تعرض أداة تعديل الرموز باستخدام المحاكي الذي يعرض المكوّن على جهاز iPhone 6 تمت محاكاه.
ظهرت معاينة مكوّن Alipay في علامة التبويب الخاصة به.

يحتوي كل مكون أيضًا على رمز استجابة سريعة يمكن مسحه ضوئيًا باستخدام تطبيق Alipay الذي يفتح مثال المكون في مثال بسيط مستقل.

تمت معاينة مكوّن `image` من Alipay على جهاز حقيقي بعد مسح رمز الاستجابة السريعة ضوئيًا في المستندات.
يمكنك معاينة مكوّن Alipay <image> على جهاز فعلي بعد اتّباع رابط رمز الاستجابة السريعة في المستندات.

يمكن للمطوّرين الانتقال مباشرةً من المستندات إلى بيئة التطوير المتكاملة في Alipay DevTools من خلال الاستفادة من مخطّط 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>

شكر وتقدير

تمت مراجعة هذه المقالة من قِبل جو ميدلي وكايس باسك وميلييكا ميهاجيليا وآلان كينت وكيث جو.