ওয়েব উপাদান
ওয়েব কম্পোনেন্টগুলি ডেভেলপারদের একত্রিত করতে এবং তাদের উপরে দুর্দান্ত অ্যাপ তৈরি করার প্রতিশ্রুতি দিয়ে শুরু হয়েছিল৷ এই ধরনের পারমাণবিক উপাদানগুলির উদাহরণ হল গিটহাবের সময়-উপাদান , স্টেফান জুডিসের ওয়েব-ভাইটাল-এলিমেন্ট বা, নির্লজ্জ প্লাগ, গুগলের ডার্ক মোড টগল । যখন এটি সম্পূর্ণ ডিজাইন সিস্টেমের ক্ষেত্রে আসে, তবে, আমি লক্ষ্য করেছি যে লোকেরা একই বিক্রেতার থেকে উপাদানগুলির একটি সুসংগত সেটের উপর নির্ভর করতে পছন্দ করে। উদাহরণগুলির একটি অসম্পূর্ণ তালিকার মধ্যে রয়েছে SAP-এর UI5 ওয়েব উপাদান , পলিমার উপাদান , Vaadin-এর উপাদান , Microsoft-এর FAST , উপাদান ওয়েব উপাদান , তর্কযোগ্যভাবে AMP উপাদান এবং আরও অনেক কিছু। এই নিবন্ধের সুযোগের বাইরের বেশ কয়েকটি কারণের কারণে, অনেক ডেভেলপার, তবে, রিঅ্যাক্ট , Vue.js , Ember.js , ইত্যাদির মতো ফ্রেমওয়ার্কগুলিতেও ঝাঁপিয়ে পড়েছেন৷ বিকাশকারীকে যেকোনো একটি থেকে বেছে নেওয়ার স্বাধীনতা দেওয়ার পরিবর্তে এই বিকল্পগুলি (বা, আপনার দৃষ্টিভঙ্গির উপর নির্ভর করে, তাদের একটি প্রযুক্তি পছন্দ করতে বাধ্য করে ), সুপার অ্যাপ প্রদানকারীরা সর্বজনীনভাবে এমন উপাদানগুলির একটি সেট সরবরাহ করে যা বিকাশকারীদের অবশ্যই ব্যবহার করতে হবে।
মিনি অ্যাপে উপাদান
আপনি উপরে উল্লিখিত উপাদান লাইব্রেরিগুলির মতো এই উপাদানগুলিকে ভাবতে পারেন। উপলব্ধ উপাদানগুলির একটি ওভারভিউ পেতে, আপনি WeChat এর উপাদান লাইব্রেরি , ByteDance এর উপাদান , Alipay এর উপাদান , Baidu এর , এবং Quick App উপাদানগুলি ব্রাউজ করতে পারেন৷
এর আগে আমি দেখিয়েছি যে, উদাহরণস্বরূপ, WeChat এর <image> হুডের নীচে একটি ওয়েব উপাদান, এই সমস্ত উপাদানগুলি প্রযুক্তিগতভাবে ওয়েব উপাদান নয়। কিছু উপাদান, যেমন <map> এবং <video> , OS-বিল্ট-ইন উপাদান হিসাবে রেন্ডার করা হয় যা 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
-
নীচে, আপনি Alipay-এর <image> একটি 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>
mode অ্যাট্রিবিউটের সাথে item.mode এর ডেটা বাইন্ডিং, src অ্যাট্রিবিউটে src এবং তিনটি ইভেন্ট হ্যান্ডলার onTap , onError , এবং onLoad একই নামের ফাংশনগুলির সাথে বাইন্ডিং নোট করুন৷ যেমন আগে দেখানো হয়েছে, <image> ট্যাগটি অভ্যন্তরীণভাবে ছবির চূড়ান্ত মাত্রা, ঐচ্ছিক অলস লোডিং, একটি ডিফল্ট উৎস ইত্যাদির একটি স্থানধারক সহ একটি <div> এ রূপান্তরিত হয়।
কম্পোনেন্টের উপলব্ধ কনফিগারেশন বিকল্পগুলি সমস্ত ডকুমেন্টেশনে তালিকাভুক্ত করা হয়েছে। সিমুলেটর সহ একটি এমবেডেড-ইন-দ্য-ডক্স কম্পোনেন্ট প্রিভিউ কোডটিকে অবিলম্বে স্পষ্ট করে তোলে।
প্রতিটি উপাদানের একটি QR কোড রয়েছে যা Alipay অ্যাপের মাধ্যমে স্ক্যান করা যেতে পারে যা একটি স্বয়ংসম্পূর্ণ ন্যূনতম উদাহরণে উপাদান উদাহরণটি খোলে।
<image> উপাদানটির পূর্বরূপ। একটি মালিকানাধীন 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 সিএসএস রয়েছে।
<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>
স্বীকৃতি
এই নিবন্ধটি Joe Medley , Kayce Basques , Milica Mihajlija , Alan Kent , এবং Keith Gu দ্বারা পর্যালোচনা করা হয়েছে।