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

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

اجزای وب

اجزای وب با این وعده شروع شدند که به توسعه دهندگان اجازه می دهند آنها را کنار هم بگذارند و برنامه های عالی را روی آنها بسازند. نمونه‌هایی از این اجزای اتمی عبارتند از عناصر زمان GitHub، عنصر web-vitals استفان جودیس، یا، پلاگین شرم‌آور، تغییر حالت تاریک Google. با این حال، وقتی صحبت از سیستم‌های طراحی کامل می‌شود، مشاهده کرده‌ام که مردم ترجیح می‌دهند به مجموعه‌ای منسجم از اجزای یک فروشنده تکیه کنند. فهرست ناقصی از نمونه‌ها شامل کامپوننت‌های وب UI5 SAP، عناصر پلیمر ، عناصر Vaadin ، FAST مایکروسافت، مؤلفه‌های Web Material ، احتمالاً مؤلفه‌های AMP و بسیاری موارد دیگر است. با توجه به تعدادی از عوامل خارج از محدوده این مقاله، با این حال، بسیاری از توسعه دهندگان نیز به سمت چارچوب هایی مانند React ، Vue.js ، Ember.js و غیره هجوم آورده اند. این گزینه ها (یا بسته به دیدگاه شما، آنها را مجبور به انتخاب فناوری می کند)، ارائه دهندگان برنامه های فوق العاده به طور جهانی مجموعه ای از اجزایی را ارائه می دهند که توسعه دهندگان باید از آنها استفاده کنند.

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

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

قبلاً نشان دادم که در حالی که، برای مثال، <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
  • نقشه
    • 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 اسکن شود که نمونه جزء را در یک نمونه کوچک مستقل باز می کند.

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

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

اجزای سفارشی

به غیر از استفاده از مؤلفه های ارائه شده توسط فروشنده، توسعه دهندگان می توانند مؤلفه های سفارشی نیز ایجاد کنند. این مفهوم برای 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 وارد کرد، کلید import نام را تعیین می کند (در اینجا: "custom" ) که مولفه سفارشی می تواند سپس با آن در index.swan استفاده شود.

{
  "usingComponents": {
    "custom": "/components/custom/custom"
  }
}

<view>
  <custom name="swanapp"></custom>
</view>

سپاسگزاریها

این مقاله توسط Joe Medley ، Kayce Basques ، Milica Mihajlija ، Alan Kent و Keith Gu بررسی شده است.