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

Thomas Steiner

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

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

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

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

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

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

WeChat की स्क्रिप्टिंग भाषा को WXS, Alipay's SJS, वैसे ही BeteDance का ब्रैंड SJS. Baidu, रेफ़रंस के समय JS की बात करता है उनका. इन स्क्रिप्ट को एक विशेष प्रकार के टैग का उपयोग करके शामिल किया जाना चाहिए, उदाहरण के लिए, <wxs> WeChat. इसके उलट, क्विक ऐप्लिकेशन सामान्य <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, और क्विक ऐप्लिकेशन.

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

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

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

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

स्वीकार की गई

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