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

Thomas Steiner

مكونات الويب

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

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

يمكنك التفكير في هذه المكونات مثل أي من مكتبات المكونات المذكورة أعلاه. للحصول على نظرة عامة على المكونات المتاحة، فيمكنك تصفح مكتبة مكونات WeChat، ومكونات ByteDance، مكونات Allipay، 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 لفتح المكون مثال في مثال مصغر مستقل.

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

شكر وتقدير

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