মিনি অ্যাপ মার্কআপ, স্টাইলিং, স্ক্রিপ্টিং এবং আপডেট করা

Thomas Steiner

দ্রষ্টব্য: এই পোস্টটি একটি নিবন্ধ সংগ্রহের অংশ যেখানে প্রতিটি নিবন্ধ পূর্ববর্তী নিবন্ধগুলির উপর ভিত্তি করে তৈরি করে। আপনি যদি এইমাত্র এখানে অবতরণ করেন, আপনি শুরু থেকে পড়া শুরু করতে চাইতে পারেন।

মার্কআপ ভাষা

আগে যেমন বলা হয়েছে, প্লেইন HTML এর পরিবর্তে, মিনি অ্যাপগুলি HTML এর উপভাষা দিয়ে লেখা হয়। আপনি যদি কখনও Vue.js টেক্সট ইন্টারপোলেশন এবং নির্দেশাবলী নিয়ে কাজ করে থাকেন, আপনি অবিলম্বে বাড়িতে অনুভব করবেন, তবে XML ট্রান্সফরমেশন ( XSLT ) এর আগেও অনুরূপ ধারণা বিদ্যমান ছিল। নীচে, আপনি WeChat-এর WXML থেকে কোড নমুনা দেখতে পারেন, কিন্তু ধারণাটি সমস্ত মিনি অ্যাপ প্ল্যাটফর্মের জন্য একই, যেমন Alipay-এর AXML , Baidu-এর Swan Element , ByteDance-এর TTML (DevTools এটিকে Bxml নামে ডাকা সত্ত্বেও), এবং Quick অ্যাপের HTML । Vue.js এর মতই, অন্তর্নিহিত মিনি অ্যাপ প্রোগ্রামিং ধারণা হল মডেল-ভিউ-ভিউ মডেল (MVVM)।

ডেটা বাইন্ডিং

ডেটা বাইন্ডিং Vue.js এর টেক্সট ইন্টারপোলেশনের সাথে মিলে যায়।

<!-- wxml -->
<view>{{message}}</view>

// page.js
Page({
  data: {
    message: "Hello World!",
  },
});

তালিকা রেন্ডারিং

তালিকা রেন্ডারিং Vue.js v-for নির্দেশের মতো কাজ করে।

<!-- wxml -->
<view wx:for="{{array}}">{{item}}</view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5],
  },
});

শর্তাধীন রেন্ডারিং

শর্তসাপেক্ষ রেন্ডারিং Vue.js' v-if নির্দেশের মতো কাজ করে।

<!-- wxml -->
<view wx:if="{{view == 'one'}}">One</view>
<view wx:elif="{{view == 'two'}}">Two</view>
<view wx:else="{{view == 'three'}}">Three</view>

// page.js
Page({
  data: {
    view: "three",
  },
});

টেমপ্লেট

একটি এইচটিএমএল টেমপ্লেটের content অপরিহার্য ক্লোনিং প্রয়োজনের পরিবর্তে, WXML টেমপ্লেটগুলি একটি টেমপ্লেট সংজ্ঞার সাথে লিঙ্ক করে এমন is মাধ্যমে ঘোষণামূলকভাবে ব্যবহার করা যেতে পারে।

<!-- wxml -->
<template name="person">
  <view>
    First Name: {{firstName}}, Last Name: {{lastName}}
  </view>
</template>

<template is="person" data="{{...personA}}"></template>
<template is="person" data="{{...personB}}"></template>
<template is="person" data="{{...personC}}"></template>

// page.js
Page({
  data: {
    personA: { firstName: "Alice", lastName: "Foo" },
    personB: { firstName: "Bob", lastName: "Bar" },
    personC: { firstName: "Charly", lastName: "Baz" },
  },
});

স্টাইলিং

স্টাইলিং CSS এর উপভাষাগুলির সাথে ঘটে। WeChat এর নাম WXSS । Alipay-এর জন্য, তাদের ACSS বলা হয়, Baidu-এর সহজভাবে CSS , এবং ByteDance-এর জন্য, তাদের উপভাষাটিকে TTSS বলা হয়। তাদের মধ্যে যা মিল রয়েছে তা হল তারা প্রতিক্রিয়াশীল পিক্সেল সহ CSS প্রসারিত করে। নিয়মিত CSS লেখার সময়, বিকাশকারীদের বিভিন্ন প্রস্থ এবং পিক্সেল অনুপাত সহ বিভিন্ন মোবাইল ডিভাইসের স্ক্রিনে মানিয়ে নিতে সমস্ত পিক্সেল ইউনিট রূপান্তর করতে হবে। TTSS rpx ইউনিটকে তার অন্তর্নিহিত স্তর হিসাবে সমর্থন করে, যার অর্থ মিনি অ্যাপটি ডেভেলপারের কাছ থেকে কাজটি গ্রহণ করে এবং 750rpx এর একটি নির্দিষ্ট স্ক্রিনের প্রস্থের ভিত্তিতে ইউনিটগুলিকে তাদের পক্ষে রূপান্তর করে। উদাহরণস্বরূপ, একটি Pixel 3a ফোনে যার স্ক্রিনের প্রস্থ 393px (এবং একটি ডিভাইসের পিক্সেল অনুপাত 2.75 ), Chrome DevTools (393px / 750rpx * 200rpx * 200rpx) দিয়ে পরিদর্শন করা হলে রেসপন্সিভ 200rpx আসল ডিভাইসে 104px হয়ে যায়। অ্যান্ড্রয়েডে, একই ধারণাটিকে ঘনত্ব-স্বাধীন পিক্সেল বলা হয়।

Chrome DevTools সহ একটি Pixel 3a ডিভাইসে প্রকৃত প্যাডিং পরিদর্শন করা হচ্ছে।

/* app.wxss */
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0; /* ← responsive pixels */
  box-sizing: border-box;
}

যেহেতু উপাদানগুলি ( পরে দেখুন) ছায়া DOM ব্যবহার করে না, তাই একটি পৃষ্ঠায় ঘোষিত শৈলী সমস্ত উপাদানগুলিতে পৌঁছায়। সাধারণ স্টাইলশীট ফাইল সংস্থা হল গ্লোবাল স্টাইলগুলির জন্য একটি রুট স্টাইলশীট এবং মিনি অ্যাপের প্রতিটি পৃষ্ঠার জন্য নির্দিষ্ট প্রতি-পৃষ্ঠা স্টাইলশীট। স্টাইলগুলি @import নিয়মের সাথে আমদানি করা যেতে পারে যা @import CSS এ-রুলের মতো আচরণ করে। HTML-এর মতো, স্টাইলগুলিকেও ইনলাইনে ঘোষণা করা যেতে পারে, যার মধ্যে ডায়নামিক টেক্সট ইন্টারপোলেশন ( আগে দেখুন)।

<view style="color:{{color}};" />

স্ক্রিপ্টিং

মিনি অ্যাপ্লিকেশানগুলি জাভাস্ক্রিপ্টের একটি "নিরাপদ উপসেট" সমর্থন করে যাতে বিভিন্ন সিনট্যাক্স ব্যবহার করে মডিউলগুলির সমর্থন অন্তর্ভুক্ত থাকে যা CommonJS বা RequireJS- এর কথা মনে করিয়ে দেয়। JavaScript কোড eval() এর মাধ্যমে কার্যকর করা যাবে না এবং new Function() দিয়ে কোনো ফাংশন তৈরি করা যাবে না। স্ক্রিপ্টিং এক্সিকিউশন প্রসঙ্গ হল ডিভাইসে V8 বা JavaScriptCore এবং সিমুলেটরে V8 বা NW.js। ES6 বা নতুন সিনট্যাক্সের সাথে কোডিং সাধারণত সম্ভব, যেহেতু নির্দিষ্ট DevTools স্বয়ংক্রিয়ভাবে কোডটিকে ES5-এ ট্রান্সপিল করে, যদি বিল্ড টার্গেটটি একটি পুরানো WebView বাস্তবায়ন সহ একটি অপারেটিং সিস্টেম হয় ( পরে দেখুন)। সুপার অ্যাপ প্রদানকারীদের ডকুমেন্টেশন স্পষ্টভাবে উল্লেখ করে যে তাদের স্ক্রিপ্টিং ভাষাগুলিকে বিভ্রান্ত করা যাবে না এবং জাভাস্ক্রিপ্ট থেকে আলাদা। এই বিবৃতিটি, যাইহোক, বেশিরভাগ মডিউলগুলি যেভাবে কাজ করে তা বোঝায়, অর্থাৎ, তারা এখনও স্ট্যান্ডার্ড ES মডিউল সমর্থন করে না।

আগেই উল্লেখ করা হয়েছে, মিনি অ্যাপ প্রোগ্রামিং ধারণা হল মডেল-ভিউ-ভিউ মডেল (MVVM)। লজিক লেয়ার এবং ভিউ লেয়ার বিভিন্ন থ্রেডে চলে, যার মানে ইউজার ইন্টারফেস দীর্ঘ-চলমান ক্রিয়াকলাপ দ্বারা অবরুদ্ধ হয় না। ওয়েব পরিভাষায়, আপনি ওয়েব ওয়ার্কারে চলমান স্ক্রিপ্টের কথা ভাবতে পারেন।

WeChat-এর স্ক্রিপ্টিং ভাষাকে WXS , Alipay-এর SJS , ByteDance-এর একইভাবে SJS বলা হয়। Baidu তাদের উল্লেখ করার সময় JS এর ​​কথা বলে। এই স্ক্রিপ্টগুলিকে একটি বিশেষ ধরনের ট্যাগ ব্যবহার করে অন্তর্ভুক্ত করতে হবে, উদাহরণস্বরূপ, WeChat-এ <wxs> । বিপরীতে, কুইক অ্যাপ নিয়মিত <script> ট্যাগ এবং ES6 JS সিনট্যাক্স ব্যবহার করে।

<wxs module="m1">
  var msg = "hello world";
  module.exports.message = msg;
</wxs>

<view>{{m1.message}}</view>

মডিউলগুলি একটি src অ্যাট্রিবিউটের মাধ্যমেও লোড করা যেতে পারে, বা require() এর মাধ্যমে আমদানি করা যেতে পারে।

// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
};
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>

// /pages/logic.wxs
var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

জাভাস্ক্রিপ্ট ব্রিজ API

জাভাস্ক্রিপ্ট ব্রিজ যা অপারেটিং সিস্টেমের সাথে মিনি অ্যাপগুলিকে সংযুক্ত করে OS ক্ষমতাগুলি ব্যবহার করা সম্ভব করে ( শক্তিশালী বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেখুন। এটি বেশ কয়েকটি সুবিধার পদ্ধতিও অফার করে। একটি ওভারভিউয়ের জন্য, আপনি WeChat , Alipay , এর বিভিন্ন API গুলি পরীক্ষা করে দেখতে পারেন। Baidu , ByteDance , এবং Quick অ্যাপ

বৈশিষ্ট্য সনাক্তকরণ সহজবোধ্য, যেহেতু সমস্ত প্ল্যাটফর্ম একটি (আক্ষরিক অর্থে এইরকম বলা হয়) canIUse() পদ্ধতি প্রদান করে যার নাম caniuse.com ওয়েবসাইট দ্বারা অনুপ্রাণিত বলে মনে হয়। উদাহরণস্বরূপ, ByteDance-এর tt.canIUse() API, পদ্ধতি, পরামিতি, বিকল্প, উপাদান এবং বৈশিষ্ট্যগুলির জন্য সমর্থন চেক করার অনুমতি দেয়।

// Testing if the `<swiper>` component is supported.
tt.canIUse("swiper");
// Testing if a particular field is supported.
tt.canIUse("request.success.data");

সফলতা: পরবর্তী অধ্যায়ে মিনি অ্যাপের উপাদানগুলি উপস্থাপন করা হয়েছে৷

আপডেট

মিনি অ্যাপ্লিকেশানগুলির একটি প্রমিত আপডেট প্রক্রিয়া নেই ( সম্ভাব্য মানককরণের বিষয়ে আলোচনা )। সমস্ত মিনি অ্যাপ প্ল্যাটফর্মের একটি ব্যাকএন্ড সিস্টেম রয়েছে, যা মিনি অ্যাপ ডেভেলপারদের তাদের মিনি অ্যাপের নতুন সংস্করণ আপলোড করতে দেয়। একটি সুপার অ্যাপ তারপর আপডেটগুলি চেক করতে এবং ডাউনলোড করতে সেই ব্যাকএন্ড সিস্টেমটি ব্যবহার করে। কিছু সুপার অ্যাপ সম্পূর্ণরূপে পটভূমিতে আপডেটগুলি সম্পাদন করে, মিনি অ্যাপের জন্য আপডেট প্রবাহকে প্রভাবিত করার কোনো উপায় ছাড়াই। অন্যান্য সুপার অ্যাপগুলি মিনি অ্যাপগুলিকে নিজেরাই বেশি নিয়ন্ত্রণ দেয়।

একটি পরিশীলিত প্রক্রিয়ার উদাহরণ হিসাবে, নিম্নলিখিত অনুচ্ছেদগুলি আরও বিশদে মিনি অ্যাপগুলির জন্য WeChat-এর আপডেট প্রক্রিয়া বর্ণনা করে৷ WeChat নিম্নলিখিত দুটি পরিস্থিতিতে উপলব্ধ আপডেটগুলি পরীক্ষা করে:

1. যতক্ষণ WeChat চালু থাকবে ততক্ষণ WeChat সাম্প্রতিক ব্যবহৃত মিনি অ্যাপগুলির আপডেটগুলি নিয়মিত পরীক্ষা করবে৷ যদি একটি আপডেট পাওয়া যায়, আপডেটটি ডাউনলোড করা হয় এবং পরের বার ব্যবহারকারী যখন মিনি অ্যাপটি ঠান্ডা-শুরু করে তখন সিঙ্ক্রোনাসভাবে প্রয়োগ করা হয়। একটি মিনি অ্যাপের কোল্ড-স্টার্টিং তখন ঘটে যখন ব্যবহারকারী এটি খোলার সময় মিনি অ্যাপটি বর্তমানে চালু ছিল না (5 মিনিটের জন্য ব্যাকগ্রাউন্ডে থাকার পরে WeChat মিনি অ্যাপগুলিকে জোর করে বন্ধ করে দেয়)।
2. একটি মিনি অ্যাপ কোল্ড-স্টার্ট হলে WeChat আপডেটের জন্যও পরীক্ষা করে। মিনি অ্যাপ্লিকেশানগুলির জন্য যা ব্যবহারকারী দীর্ঘদিন ধরে খোলেননি, আপডেটটি চেক করা হয় এবং সিঙ্ক্রোনাসভাবে ডাউনলোড করা হয়। আপডেট ডাউনলোড করার সময়, ব্যবহারকারীকে অপেক্ষা করতে হবে। একবার ডাউনলোড শেষ হয়ে গেলে, আপডেটটি প্রয়োগ করা হয় এবং মিনি অ্যাপটি খোলে। যদি ডাউনলোড ব্যর্থ হয়, যেমন, খারাপ নেটওয়ার্ক সংযোগের কারণে, মিনি অ্যাপটি নির্বিশেষে খোলে। ব্যবহারকারী সম্প্রতি যে মিনি অ্যাপগুলি খুলেছেন তার জন্য, যেকোনো সম্ভাব্য আপডেট পটভূমিতে অ্যাসিঙ্ক্রোনাসভাবে ডাউনলোড করা হয় এবং পরবর্তী সময়ে ব্যবহারকারী যখন মিনি অ্যাপটি ঠান্ডা-শুরু করবে তখন তা প্রয়োগ করা হবে।

Mini অ্যাপগুলি UpdateManager API ব্যবহার করে পূর্ববর্তী আপডেটগুলিতে অপ্ট-ইন করতে পারে৷ এটি নিম্নলিখিত কার্যকারিতা প্রদান করে:

• আপডেটের জন্য চেক করা হলে মিনি অ্যাপকে বিজ্ঞপ্তি দেয়। ( onCheckForUpdate )
• একটি আপডেট ডাউনলোড করা হয়েছে এবং উপলব্ধ হলে মিনি অ্যাপটিকে বিজ্ঞপ্তি দেয়৷ ( onUpdateReady )
• একটি আপডেট ডাউনলোড করা যাবে না যখন মিনি অ্যাপ্লিকেশন বিজ্ঞপ্তি. ( onUpdateFailed )
• মিনি অ্যাপটিকে একটি উপলব্ধ আপডেট জোরপূর্বক ইনস্টল করার অনুমতি দেয়, যা অ্যাপটিকে পুনরায় চালু করবে। ( applyUpdate )

WeChat এর ব্যাকএন্ড সিস্টেমে মিনি অ্যাপ ডেভেলপারদের জন্য অতিরিক্ত আপডেট কাস্টমাইজেশন বিকল্পগুলিও প্রদান করে: 1. একটি বিকল্প ডেভেলপারদের এমন ব্যবহারকারীদের জন্য সিঙ্ক্রোনাস আপডেটগুলি থেকে অপ্ট-আউট করার অনুমতি দেয় যাদের ইতিমধ্যেই মিনি অ্যাপের একটি নির্দিষ্ট ন্যূনতম সংস্করণ ইনস্টল করা আছে এবং পরিবর্তে আপডেটগুলি জোর করে অ্যাসিঙ্ক্রোনাস হতে 2. আরেকটি বিকল্প ডেভেলপারদের তাদের মিনি অ্যাপের ন্যূনতম প্রয়োজনীয় সংস্করণ সেট করতে দেয়। এটি ন্যূনতম প্রয়োজনীয় সংস্করণের চেয়ে কম সংস্করণ থেকে অ্যাসিঙ্ক্রোনাস আপডেটগুলি তৈরি করবে- আপডেটটি প্রয়োগ করার পরে মিনি অ্যাপটিকে জোর করে পুনরায় লোড করুন৷ আপডেটটি ডাউনলোড করা ব্যর্থ হলে এটি মিনি অ্যাপের একটি পুরানো সংস্করণ খোলাকেও ব্লক করবে।

স্বীকৃতি

এই নিবন্ধটি Joe Medley , Kayce Basques , Milica Mihajlija , Alan Kent , এবং Keith Gu দ্বারা পর্যালোচনা করা হয়েছে।