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

Thomas Steiner

مكونات الويب

تم إطلاق مكونات الويب بهدف السماح للمطوّرين بتجميعها وإنشاء تطبيقات رائعة باستخدامها. ومن الأمثلة على هذه المكوّنات الأساسية عناصر الوقت في GitHub وعنصر مؤشرات الأداء الرئيسية للويب في Stefan Judis أو مفتاح التبديل للوضع الداكن في Google. ومع ذلك، عندما يتعلق الأمر بأنظمة التصميم الكاملة، لاحظت أن الأشخاص يفضلون الاعتماد على مجموعة متماسكة من المكونات من نفس البائع. في ما يلي قائمة غير مكتملة بالأمثلة، تشمل مكونات الويب UI5 من SAP وعناصر Polymer وعناصر Vaadin وFAST من Microsoft ومكونات الويب Material ومكونات AMP وغيرها الكثير. بسبب عدد من العوامل التي لا ترِد في هذه المقالة، توافد الكثير من المطوّرين أيضًا إلى أُطر عمل مثل 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> مع عنصر نائب لأبعاد الصورة النهائية، وميزة التحميل البطيء الاختيارية، ومصدر تلقائي، وغيرها.

يمكنك الاطّلاع على جميع خيارات الضبط المتاحة للمكوِّن في المستندات. من خلال معاينة المكوّن مع المحاكي المضمّنة في المستندات، يمكن الاطّلاع على الرمز البرمجي على الفور.

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

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

الشكر والتقدير

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