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

Thomas Steiner

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

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

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

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

أوضحتُ سابقًا أنّه على الرغم من أنّ <image> في WeChat، على سبيل المثال،<image> هو أحد مكونات الويب الأساسية، ليس كل هذه المكونات هي مكونات ويب من الناحية الفنية. يتم عرض بعض المكوّنات، مثل <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 (راجِع عرض القوائم) الذي يتكرّر على مصفوفة بيانات صور مقدَّمة في 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 الذي يفتح مثال المكوّن في مثال بسيط مستقل.

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

الإقرارات

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