اجزای برنامه کوچک

توماس اشتاینر

اجزای وب

کامپوننت‌های وب با این وعده شروع به کار کردند که به توسعه‌دهندگان اجازه دهند آنها را کنار هم قرار دهند و برنامه‌های عالی را بر اساس آنها بسازند. نمونه‌هایی از چنین کامپوننت‌های اتمی عبارتند از time-elements گیت‌هاب، web-vitals-element استفان جودیس، یا Shamless plug، دکمه حالت تاریک گوگل. با این حال، وقتی صحبت از سیستم‌های طراحی کامل می‌شود، مشاهده کرده‌ام که مردم ترجیح می‌دهند به مجموعه‌ای منسجم از کامپوننت‌ها از یک فروشنده تکیه کنند. لیست ناقصی از مثال‌ها شامل کامپوننت‌های وب UI5 SAP، Polymer Elements ، Vaadin elements ، FAST مایکروسافت، Material Web Components ، مسلماً کامپوننت‌های AMP و بسیاری دیگر است. با این حال، به دلیل تعدادی از عوامل خارج از محدوده این مقاله، بسیاری از توسعه‌دهندگان به چارچوب‌هایی مانند React ، Vue.js ، Ember.js و غیره نیز روی آورده‌اند. ارائه‌دهندگان ابربرنامه به جای اینکه به توسعه‌دهنده آزادی انتخاب از هر یک از این گزینه‌ها را بدهند (یا بسته به دیدگاه شما، آنها را مجبور به انتخاب فناوری کنند)، به طور جهانی مجموعه‌ای از کامپوننت‌ها را ارائه می‌دهند که توسعه‌دهندگان باید از آنها استفاده کنند.

کامپوننت‌ها در مینی‌اپلیکیشن‌ها

می‌توانید این کامپوننت‌ها را مانند هر یک از کتابخانه‌های کامپوننت ذکر شده در بالا در نظر بگیرید. برای مشاهده‌ی کلی کامپوننت‌های موجود، می‌توانید کتابخانه‌ی کامپوننت WeChat ، کامپوننت‌های ByteDance ، کامپوننت‌های Alipay ، کامپوننت‌های Baidu و کامپوننت‌های Quick App را مرور کنید.

پیش از این نشان دادم که اگرچه، برای مثال، <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 به همراه پیش‌نمایش اجزای تعبیه‌شده.
پیش‌نمایش کامپوننت Alipay که در یک تب مرورگر جداگانه اجرا می‌شود و یک ویرایشگر کد با شبیه‌ساز را نشان می‌دهد که کامپوننت را روی یک آیفون ۶ شبیه‌سازی شده رندر می‌کند.
پیش‌نمایش کامپوننت Alipay در تب مخصوص به خود ظاهر شد.

هر جزء همچنین یک کد QR دارد که می‌تواند با برنامه Alipay اسکن شود و مثال جزء را در یک مثال مینیمال مستقل باز کند.

پیش‌نمایش کامپوننت «تصویر» علی‌پی روی یک دستگاه واقعی پس از اسکن کد QR در مستندات.
پیش‌نمایش کامپوننت <image> علی‌پی روی یک دستگاه واقعی پس از دنبال کردن لینک کد QR از مستندات.

توسعه‌دهندگان می‌توانند با استفاده از یک طرح URI اختصاصی antdevtool-tiny:// ، مستقیماً از مستندات به IDE توسعه‌دهندگان Alipay بروند. این امر به مستندات اجازه می‌دهد تا مستقیماً به یک پروژه کوچک برنامه که قرار است وارد شود، پیوند داده شوند، بنابراین توسعه‌دهندگان می‌توانند بلافاصله با این مؤلفه شروع به کار کنند.

اجزای سفارشی

جدا از استفاده از کامپوننت‌های ارائه شده توسط فروشنده، توسعه‌دهندگان می‌توانند کامپوننت‌های سفارشی نیز ایجاد کنند. این مفهوم برای WeChat ، ByteDance ، Alipay و Baidu و همچنین Quick App وجود دارد. به عنوان مثال، یک کامپوننت سفارشی Baidu از چهار فایل تشکیل شده است که باید در یک پوشه قرار گیرند: custom.swan ، custom.css ، custom.js و custom.json .

فایل custom.json محتویات پوشه را به عنوان یک کامپوننت سفارشی نشان می‌دهد.

{
  "component": true
}

فایل custom.swan شامل markup و فایل 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>

تقدیرنامه‌ها

این مقاله توسط جو مدلی ، کیس باسک ، میلیکا میهالیا ، آلن کنت و کیث گو بررسی شده است.