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

Thomas Steiner

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

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

शैलीकृत करना

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

/* 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 सीएसएस at-rule की तरह काम करता है. एचटीएमएल की तरह ही, स्टाइल को इनलाइन भी घोषित किया जा सकता है. इसमें डाइनैमिक टेक्स्ट इंटरपोलेशन भी शामिल है (पहले देखें).

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

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

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

JavaScript ब्रिज एपीआई

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

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

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

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

धन्यवाद

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