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

Thomas Steiner

ध्यान दें: यह पोस्ट, लेखों के एक कलेक्शन का हिस्सा है. इसमें हर लेख, पिछले लेखों पर आधारित है. अगर आप अभी यहां आए हैं, तो हो सकता है कि आपको शुरुआत से पढ़ना हो.

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

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

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

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

हमने पहले बताया था कि उदाहरण के लिए, 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
  • 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 कॉम्पोनेंट का दस्तावेज़, जिसमें कॉम्पोनेंट की झलक शामिल है.

Alipay कॉम्पोनेंट की झलक, अपने टैब में दिख रही है.

हर कॉम्पोनेंट में एक क्यूआर कोड भी होता है. इसे Alipay ऐप्लिकेशन से स्कैन किया जा सकता है. इससे कॉम्पोनेंट का उदाहरण, कम से कम शब्दों में बताया जाता है.

दस्तावेज़ में दिए गए क्यूआर कोड लिंक पर क्लिक करने के बाद, किसी असली डिवाइस पर Alipay <image> कॉम्पोनेंट की झलक.

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

सफल: मिनी ऐप्लिकेशन के प्रोजेक्ट स्ट्रक्चर, लाइफ़साइकल, और बंडलिंग के बारे में जानने के लिए, पढ़ना जारी रखें.

Acknowledgements

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