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

Thomas Steiner

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

जैसा कि पहले बताया गया है, मिनी ऐप्लिकेशन को सामान्य एचटीएमएल के बजाय, एचटीएमएल की बोलियों के साथ लिखा जाता है. अगर आपने कभी Vue.js टेक्स्ट इंटरपोलेशन और डायरेक्टिव का इस्तेमाल किया है, तो आपको यह तुरंत समझ में आ जाएगा. हालांकि, इसी तरह के कॉन्सेप्ट, एक्सएमएल ट्रांसफ़ॉर्मेशन (XSLT) में पहले से मौजूद थे. यहां WeChat के WXML के कोड सैंपल दिए गए हैं. हालांकि, सभी मिनी ऐप्लिकेशन प्लैटफ़ॉर्म के लिए यह कॉन्सेप्ट एक जैसा है. जैसे, Alipay का AXML, Baidu का Swan Element, ByteDance का TTML (DevTools इसे Bxml कहता है) और Quick App का HTML. Vue.js की तरह ही, मिनी ऐप्लिकेशन प्रोग्रामिंग का बुनियादी कॉन्सेप्ट मॉडल-व्यू-व्यूमॉडल (एमवीवीएम) है.

डेटा बाइंडिंग

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

Chrome DevTools की मदद से, ऐसी व्यू की जांच की जा रही है जिसमें रिस्पॉन्सिव पिक्सल पैडिंग को `200rpx` के तौर पर तय किया गया था. इससे पता चलता है कि Pixel 3a डिवाइस पर यह असल में `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;
}

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

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

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

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

पहले बताया गया है कि मिनी ऐप्लिकेशन प्रोग्रामिंग का कॉन्सेप्ट, मॉडल-व्यू-व्यूमॉडल (एमवीवीएम) है. लॉजिक लेयर और व्यू लेयर अलग-अलग थ्रेड पर काम करती हैं. इसका मतलब है कि लंबे समय तक चलने वाले ऑपरेशन की वजह से, यूज़र इंटरफ़ेस ब्लॉक नहीं होता. वेब की भाषा में, इसे ऐसे समझा जा सकता है कि स्क्रिप्ट, वेब वर्कर में चलती हैं.

WeChat की स्क्रिप्टिंग भाषा को WXS, Alipay की स्क्रिप्टिंग भाषा को SJS, और ByteDance की स्क्रिप्टिंग भाषा को SJS कहा जाता है. Baidu, अपने प्रॉडक्ट का रेफ़रंस देते समय JS का इस्तेमाल करता है. इन स्क्रिप्ट को शामिल करने के लिए, खास तरह के टैग का इस्तेमाल करना होता है. उदाहरण के लिए, WeChat में <wxs>. इसके उलट, Quick App में सामान्य <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 bridge API

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

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

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

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

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

Acknowledgements

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