मिनी ऐप्लिकेशन मार्कअप, स्टाइल, स्क्रिप्टिंग, और अपडेट करना

थॉमस स्टेनर

Twitter GitHub Glitch Mastodon होम पेज

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

मार्कअप भाषाएं

जैसा कि पहले बताया गया है, सादे एचटीएमएल के बजाय, मिनी ऐप्लिकेशन एचटीएमएल की बोलियों के साथ लिखे जाते हैं. अगर आपने कभी भी Vue.js टेक्स्ट इंटरपोलेशन और डायरेक्टिव का इस्तेमाल किया है, तो आपको तुरंत होम स्क्रीन दिखने लगेगी. हालांकि, एक्सएमएल ट्रांसफ़ॉर्मेशन (XSLT) में, इससे पहले भी ऐसे ही कॉन्सेप्ट मौजूद थे. नीचे, WeChat के WXML से मिले कोड के सैंपल देखे जा सकते हैं, लेकिन सभी मिनी ऐप्लिकेशन प्लैटफ़ॉर्म के लिए, यह कॉन्सेप्ट एक ही है. जैसे, Alipay का AXML, Baidu का Svan Element, ByteDance का MLTT ( DevTools को Bxml कहकर), और Quick App का एचटीएमएल. Vue.js की तरह ही, मिनी ऐप्लिकेशन प्रोग्रामिंग का बुनियादी कॉन्सेप्ट, model-view-viewmodel (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" },
  },
});

शैलीकृत करना

स्टाइल, सीएसएस की बोलियों के साथ होती है. WeChat का नाम WXSS है. Alipay के लिए, उनकी बिड को एसीएसएस, Baidu का सीएसएस, और ByteDance के लिए उनकी लय को TTSS कहा जाता है. उनमें एक जैसी बात यह है कि वे रिस्पॉन्सिव पिक्सल वाले सीएसएस को बढ़ाते हैं. सामान्य सीएसएस लिखते समय, डेवलपर को अलग-अलग चौड़ाई और पिक्सल के अनुपात वाली अलग-अलग मोबाइल डिवाइस स्क्रीन के हिसाब से काम करने के लिए, सभी पिक्सल यूनिट को बदलना होता है. टीटीएसएस, rpx यूनिट को अपनी बुनियादी लेयर के तौर पर इस्तेमाल करता है. इसका मतलब है कि मिनी ऐप्लिकेशन, डेवलपर का काम अपने हाथों में ले लेता है और 750rpx की स्क्रीन की तय चौड़ाई के आधार पर, उनकी तरफ़ से यूनिट को बदल देता है. उदाहरण के लिए, अगर Pixel 3a फ़ोन की स्क्रीन की चौड़ाई 393px है और डिवाइस पिक्सल रेशियो 2.75 है, तो Chrome DevTools (393 पिक्सल / 750rpx * 200rpx ≈ 104px) की मदद से जांच करने पर, रिस्पॉन्सिव 200rpx, असली डिवाइस पर 104px बन जाता है. Android में भी इसी सिद्धांत को डेंसिटी-इंडिपेंडेंट पिक्सल कहा जाता है.

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

कॉम्पोनेंट (बाद में देखें) शैडो डीओएम का इस्तेमाल नहीं करते हैं, इसलिए पेज पर बताई गई स्टाइल, सभी कॉम्पोनेंट पर पहुंचती हैं. स्टाइलशीट फ़ाइल व्यवस्थित करने की सामान्य प्रक्रिया, ग्लोबल स्टाइल के लिए एक रूट स्टाइलशीट और मिनी ऐप्लिकेशन के हर पेज के लिए खास तौर पर अलग-अलग हर पेज स्टाइलशीट है. स्टाइल को ऐसे @import नियम की मदद से इंपोर्ट किया जा सकता है जो नियम पर @import की तरह काम करता है. एचटीएमएल की तरह, स्टाइल की जानकारी भी इनलाइन के साथ दी जा सकती है. इसमें डाइनैमिक टेक्स्ट इंटरपोलेशन भी शामिल है (पहले देखें).

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

स्क्रिप्ट तैयार करना

मिनी ऐप्लिकेशन, JavaScript के "सुरक्षित सबसेट" के साथ काम करते हैं. इसमें CommonJS या RequireJS की याद दिलाने वाले अलग-अलग सिंटैक्स का इस्तेमाल करने वाले मॉड्यूल के साथ काम किया जा सकता है. JavaScript कोड को eval() की मदद से नहीं चलाया जा सकता. साथ ही, new Function() की मदद से कोई भी फ़ंक्शन नहीं बनाया जा सकता. स्क्रिप्टिंग एक्ज़ीक्यूट करने का कॉन्टेक्स्ट, डिवाइस पर V8 या JavaScriptCore है और सिम्युलेटर में V8 या NW.js है. आम तौर पर, ES6 या नए सिंटैक्स के साथ कोडिंग की जा सकती है. ऐसा इसलिए, क्योंकि अगर बिल्ड टारगेट पुराने वेबव्यू को लागू करने वाला कोई ऑपरेटिंग सिस्टम है, तो कोई खास DevTools, कोड को ES5 में अपने-आप ट्रांसफ़र कर देता है (बाद में देखें). सुपर ऐप्लिकेशन की सेवा देने वाली कंपनियों के दस्तावेज़ में साफ़ तौर पर बताया गया है कि उनकी स्क्रिप्टिंग भाषाओं को न तो गलत समझा जाता है और न ही वे JavaScript से अलग होती हैं. हालांकि, इस स्टेटमेंट से मॉड्यूल के काम करने के तरीके के बारे में पता चलता है. इसका मतलब है कि वे फ़िलहाल स्टैंडर्ड ES मॉड्यूल के साथ काम नहीं करते.

जैसा कि पहले बताया गया है, मिनी ऐप्लिकेशन प्रोग्रामिंग का सिद्धांत model-view-viewmodel (MVVM) है. लॉजिक लेयर और व्यू लेयर अलग-अलग थ्रेड पर चलते हैं. इसका मतलब है कि यूज़र इंटरफ़ेस को लंबे समय तक चलने वाली कार्रवाइयों से ब्लॉक नहीं किया जाता. वेब के शब्दों में, आपके पास वेब वर्कर में चल रही स्क्रिप्ट के बारे में विचार करने का विकल्प है.

WeChat की स्क्रिप्टिंग भाषा को WXS, Alipay का SJS, और ByteDance का SJS कहा जाता है. Baidu अपने रेफ़रंस के लिए JS बोलता है. इन स्क्रिप्ट को एक खास तरह के टैग का इस्तेमाल करके शामिल करना होगा, जैसे कि WeChat में <wxs>. वहीं दूसरी ओर, Quick ऐप्लिकेशन सामान्य <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);

JavaScript ब्रिज API

मिनी ऐप्लिकेशन को ऑपरेटिंग सिस्टम से जोड़ने वाले JavaScript ब्रिज की मदद से ओएस की क्षमताओं का इस्तेमाल किया जा सकता है (सशक्त सुविधाओं का ऐक्सेस देखें. इसमें कई आसान तरीके भी मौजूद हैं. खास जानकारी के लिए, WeChat, Alipay, Baidu, ByteDance, और Quick App के अलग-अलग एपीआई देखें.

सुविधा की पहचान करना आसान है. ऐसा इसलिए है, क्योंकि सभी प्लैटफ़ॉर्म पर एपीआई, तरीके, पैरामीटर, विकल्प, कॉम्पोनेंट, और एट्रिब्यूट की सहायता जांच की जा सकती है. ऐसा इसलिए है, क्योंकि सभी प्लैटफ़ॉर्म, caniuse.com से प्रेरित होने वाला एक canIUse() तरीका उपलब्ध कराते हैं.tt.canIUse()

// 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 हाल ही में इस्तेमाल किए गए मिनी ऐप्लिकेशन के अपडेट की जांच करता रहेगा. अगर कोई अपडेट मिलता है, तो अपडेट डाउनलोड कर लिया जाता है. अगली बार जब उपयोगकर्ता मिनी ऐप्लिकेशन को कोल्ड-स्टार्ट करता है, तो अपडेट को सिंक्रोनस (बार-बार) लागू किया जाता है. जब उपयोगकर्ता को मिनी ऐप्लिकेशन खोला जाता है, तब उस समय मिनी ऐप्लिकेशन नहीं चल रहा था. ऐसे में, WeChat को 5 मिनट तक बैकग्राउंड में रखने के बाद, मिनी ऐप्लिकेशन को ज़बरदस्ती बंद कर देता है.
2. जब किसी मिनी ऐप्लिकेशन को कोल्ड-स्टार्ट होता है, तब WeChat भी अपडेट की जांच करता है. उन मिनी ऐप्लिकेशन के लिए जिन्हें उपयोगकर्ता ने लंबे समय से नहीं खोला है, अपडेट की जांच की जाती है और उसे सिंक्रोनस रूप से डाउनलोड किया जाता है. अपडेट डाउनलोड होने के दौरान, उपयोगकर्ता को इंतज़ार करना होगा. डाउनलोड पूरा होने के बाद, अपडेट लागू हो जाता है और मिनी ऐप्लिकेशन खुल जाता है. अगर डाउनलोड नहीं हो पाता है, जैसे कि खराब नेटवर्क कनेक्टिविटी की वजह से, मिनी ऐप्लिकेशन फिर भी खुल जाता है. ऐसे मिनी ऐप्लिकेशन के लिए जिन्हें उपयोगकर्ता ने हाल ही में खोला है, कोई भी संभावित अपडेट बैकग्राउंड में एसिंक्रोनस रूप से डाउनलोड किया जाता है और जब अगली बार उपयोगकर्ता मिनी ऐप्लिकेशन को कोल्ड-स्टार्ट करेगा, तब यह अपडेट लागू हो जाएगा.

मिनी ऐप्लिकेशन, UpdateManager एपीआई का इस्तेमाल करके, पहले मिलने वाले अपडेट के लिए ऑप्ट-इन कर सकते हैं. इससे ये सुविधाएं मिलती हैं:

• अपडेट की जांच किए जाने पर, मिनी ऐप्लिकेशन को सूचना देता है. (onCheckForUpdate)
• यह मिनी ऐप्लिकेशन को किसी अपडेट के डाउनलोड होने और उपलब्ध होने की सूचना देता है. (onUpdateReady)
• यह मिनी ऐप्लिकेशन को किसी अपडेट को डाउनलोड न किए जाने की सूचना देता है. (onUpdateFailed)
• मिनी ऐप्लिकेशन को उपलब्ध अपडेट को अनइंस्टॉल करने की अनुमति देता है. इससे ऐप्लिकेशन रीस्टार्ट हो जाएगा. (applyUpdate)

WeChat अपने बैकएंड सिस्टम में, मिनी ऐप्लिकेशन डेवलपर के लिए अपडेट को पसंद के मुताबिक बनाने के ज़्यादा विकल्प भी उपलब्ध कराता है: 1. एक विकल्प चुनकर, डेवलपर उन उपयोगकर्ताओं के लिए सिंक्रोनस अपडेट से ऑप्ट-आउट कर सकते हैं जिनके पास पहले से ही मिनी ऐप्लिकेशन का कम से कम वर्शन इंस्टॉल है. इसके बजाय, डेवलपर इन अपडेट को एसिंक्रोनस बना देते हैं. 2. एक और विकल्प यह है कि डेवलपर, अपने मिनी ऐप्लिकेशन का कम से कम एक वर्शन सेट कर सकते हैं. इससे मिनी ऐप्लिकेशन के ज़रूरी वर्शन से कम वर्शन से एसिंक्रोनस अपडेट हो जाएंगे. अपडेट लागू करने के बाद, मिनी ऐप्लिकेशन हर हाल में उसे फिर से लोड कर देगा. अपडेट डाउनलोड न होने पर, मिनी ऐप्लिकेशन का पुराना वर्शन भी डाउनलोड नहीं हो पाएगा.

स्वीकार हैं

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