मिनी ऐप्लिकेशन कॉम्पोनेंट

Thomas Steiner

वेब कॉम्पोनेंट

वेब कॉम्पोनेंट को इस उम्मीद के साथ शुरू किया गया था कि डेवलपर इन्हें एक साथ जोड़कर, इन पर बेहतरीन ऐप्लिकेशन बना पाएंगे. ऐसे एटमिक कॉम्पोनेंट के उदाहरणों में, GitHub का टाइम-एलिमेंट, स्टीफ़न जूडिस का वेब-विटल्स-एलिमेंट या Google का डार्क मोड टॉगल शामिल है. हालांकि, पूरी तरह से डिज़ाइन किए गए सिस्टम के लिए, मैंने देखा है कि लोग एक ही वेंडर के कॉम्पोनेंट के एक साथ काम करने वाले सेट पर भरोसा करना पसंद करते हैं. उदाहरणों की अधूरी सूची में SAP के UI5 वेब कॉम्पोनेंट, पॉलीमर एलिमेंट, Vaadin के एलिमेंट, Microsoft के FAST, मटीरियल वेब कॉम्पोनेंट, AMP कॉम्पोनेंट वगैरह शामिल हैं. इस लेख के दायरे में न आने वाली कई चीज़ों की वजह से, कई डेवलपर ने React, Vue.js, Ember.js जैसे फ़्रेमवर्क भी शामिल किए हैं. उनके बजाय, डेवलपर को इनमें से कोई भी विकल्प चुनने की आज़ादी देने के बजाय (या आपके नज़रिए के आधार पर, डेवलपर को एक तकनीकी कॉम्पोनेंट देने के लिए मज़बूत करना पड़ता है.

मिनी ऐप्लिकेशन में कॉम्पोनेंट

इन कॉम्पोनेंट को ऊपर बताई गई किसी भी कॉम्पोनेंट लाइब्रेरी की तरह समझा जा सकता है. उपलब्ध कॉम्पोनेंट की खास जानकारी पाने के लिए, WeChat की कॉम्पोनेंट लाइब्रेरी, ByteDance के कॉम्पोनेंट, Alipay के कॉम्पोनेंट, Baidu के, और क्विक ऐप्लिकेशन के कॉम्पोनेंट ब्राउज़ किए जा सकते हैं.

पहले मैंने बताया था कि उदाहरण के लिए, WeChat का <image> एक वेब कॉम्पोनेंट है. हालांकि, यह ज़रूरी नहीं है कि ये सभी कॉम्पोनेंट, तकनीकी रूप से वेब कॉम्पोनेंट हों. <map> और <video> जैसे कुछ कॉम्पोनेंट, ओएस में पहले से मौजूद कॉम्पोनेंट के तौर पर रेंडर किए जाते हैं. ये वेबव्यू के ऊपर लेयर में दिखते हैं. डेवलपर को, लागू करने के तरीके की जानकारी नहीं दी जाती. इसे किसी दूसरे कॉम्पोनेंट की तरह प्रोग्राम किया जाता है.

हमेशा की तरह, जानकारी अलग-अलग होती है, लेकिन प्रोग्रामिंग के सभी कॉन्सेप्ट, सुपर ऐप्लिकेशन उपलब्ध कराने वाली सभी कंपनियों के लिए एक जैसे होते हैं. डेटा बाइंडिंग एक अहम सिद्धांत है, जैसा कि पहले मार्कअप भाषाओं में दिखाया गया है. आम तौर पर, कॉम्पोनेंट को फ़ंक्शन के हिसाब से ग्रुप में बांटा जाता है. इसलिए, काम के लिए सही कॉम्पोनेंट को ढूंढना आसान होता है. यहां 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

यहां, a:for डायरेक्टिव (सूची को रेंडर करना देखें) में इस्तेमाल किए गए Alipay के <image> को देखा जा सकता है. यह डायरेक्टिव, 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 ऐप्लिकेशन से स्कैन किया जा सकता है. इससे, कॉम्पोनेंट के उदाहरण को एक छोटे से उदाहरण में खोला जा सकता है.

डेवलपर, मालिकाना हक वाली यूआरआई स्कीम 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 में सीएसएस है.

<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>

धन्यवाद

इस लेख की समीक्षा, जो मेडली, किस बेस्केस, मिलिका मिहाइलिया, ऐलन केंट, और कीथ गु ने की.