मिनी ऐप्लिकेशन प्रोजेक्ट का स्ट्रक्चर
मार्कअप भाषाओं, स्टाइल भाषाओं, और कॉम्पोनेंट की तरह ही, मिनी ऐप्लिकेशन प्रोजेक्ट के स्ट्रक्चर में भी फ़ाइल एक्सटेंशन या डिफ़ॉल्ट नाम जैसी जानकारी अलग-अलग होती है. कॉन्टेंट बनाने हालांकि, सुपर ऐप्लिकेशन की सेवा देने वाली सभी कंपनियों के लिए यही आइडिया एक जैसा है. प्रोजेक्ट के स्ट्रक्चर में हमेशा ये चीज़ें शामिल होती हैं:
- रूट फ़ाइल
app.js, जो मिनी ऐप्लिकेशन को शुरू करती है. - कॉन्फ़िगरेशन फ़ाइल
app.json, जो लगभग वेब ऐप्लिकेशन मेनिफ़ेस्ट से मिलती-जुलती हो. - शेयर की गई डिफ़ॉल्ट स्टाइल के साथ, एक वैकल्पिक सामान्य स्टाइल शीट फ़ाइल
app.css. project.config.jsonफ़ाइल, जिसमें बिल्ड की जानकारी होती है.
सभी पेज, pages फ़ोल्डर में अलग-अलग सब-फ़ोल्डर में सेव किए जाते हैं. हर पेज सब-फ़ोल्डर में एक सीएसएस फ़ाइल, एक JS फ़ाइल, एक एचटीएमएल फ़ाइल, और एक
कॉन्फ़िगरेशन JSON फ़ाइल. सभी फ़ाइलों का नाम, उनके नाम वाले फ़ोल्डर की तरह ही होना चाहिए
एक्सटेंशन. इस तरह, मिनी ऐप्लिकेशन को app.json फ़ाइल में डायरेक्ट्री के लिए सिर्फ़ पॉइंटर की ज़रूरत होती है
(मेनिफ़ेस्ट जैसी फ़ाइल) में डाउनलोड किया जा सकता है और सभी उपसंसाधनों को डाइनैमिक तौर पर ढूंढ सकता है. वेब डेवलपर के हिसाब से, मिनी ऐप्लिकेशन कई पेजों वाले ऐप्लिकेशन होते हैं.
├── app.js # Initialization logic
├── app.json # Common configuration
├── app.css # Common style sheet
├── project.config.json # Project configuration
└── pages # List of pages
├── index # Home page
│ ├── index.css # Page style sheet
│ ├── index.js # Page logic
│ ├── index.json # Page configuration
│ └── index.html # Page markup
└── other # Other page
├── other.css # Page style sheet
├── other.js # Page logic
├── other.json # Page configuration
└── other.html # Page markup
मिनी ऐप्लिकेशन का लाइफ़साइकल
दुनिया भर में बताए गए App() तरीके को कॉल करके, सुपर ऐप्लिकेशन के साथ मिनी ऐप्लिकेशन को रजिस्टर करना ज़रूरी है.
पहले बताई गई प्रोजेक्ट स्ट्रक्चर की बात करें, तो ऐसा
app.js. मिनी ऐप्लिकेशन के लाइफ़साइकल में मुख्य रूप से चार इवेंट होते हैं: launch, show, hide, और
error. इन इवेंट के हैंडलर को कॉन्फ़िगरेशन ऑब्जेक्ट के तौर पर App() तरीके में पास किया जा सकता है. इसमें globalData प्रॉपर्टी भी हो सकती है, जिसमें ऐसा डेटा होता है जो सभी पेजों पर ग्लोबल तौर पर उपलब्ध होना चाहिए.
/* app.js */
App({
onLaunch(options) {
// Do something when the app is launched initially.
},
onShow(options) {
// Do something when the app is shown.
},
onHide() {
// Do something when the app is hidden.
},
onError(msg) {
console.log(msg);
},
globalData: "I am global data",
});
हमेशा की तरह, हर जानकारी अलग-अलग हो सकती है, लेकिन दोनों की जानकारी एक जैसी ही है WeChat, Alipay, Baidu, ByteDance, और साथ ही क्विक ऐप्लिकेशन.
पेज लाइफ़साइकल
ऐप्लिकेशन के लाइफ़साइकल की तरह ही, पेज के लाइफ़साइकल में भी लाइफ़साइकल इवेंट होते हैं. डेवलपर इन इवेंट को सुन सकता है और इन पर कार्रवाई कर सकता है. ये मुख्य इवेंट load, show, ready, hide, और unload हैं. कुछ प्लैटफ़ॉर्म, pulldownrefresh जैसे अन्य इवेंट भी ऑफ़र करते हैं. इवेंट हैंडलर को सेट अप करने के लिए, Page() का इस्तेमाल किया जाता है. यह हर पेज के लिए तय किया जाता है. इस खोज से index या other पेजों के लिए
प्रोजेक्ट स्ट्रक्चर, पहले के बनाए गए हों, तो ऐसा index.js में होगा या
other.js.
/* index.js */
Page({
data: {
text: "This is page data.",
},
onLoad: function (options) {
// Do something when the page is initially loaded.
},
onShow: function () {
// Do something when the page is shown.
},
onReady: function () {
// Do something when the page is ready.
},
onHide: function () {
// Do something when the page is hidden.
},
onUnload: function () {
// Do something when the page is closed.
},
onPullDownRefresh: function () {
// Do something when the user pulls down to refresh.
},
onReachBottom: function () {
// Do something when the user scrolls to the bottom.
},
onShareAppMessage: function () {
// Do something when the user shares the page.
},
onPageScroll: function () {
// Do something when the user scrolls the page.
},
onResize: function () {
// Do something when the user resizes the page.
},
onTabItemTap(item) {
// Do something when the user taps the page's tab.
},
customData: {
foo: "bar",
},
});
बिल्ड प्रोसेस
मिनी ऐप्लिकेशन बनाने की प्रोसेस, डेवलपर के लिए आसान है. यह टूल, ट्रांसपाइलेशन और छोटा करने के लिए, इंडस्ट्री टूल का इस्तेमाल करता है. जैसे, Babel कंपाइलर और postcss सीएसएस ट्रांसफ़ॉर्मर. बिल्ड करने का अनुभव, Next.js या create-react-app जैसा ही है. यहां डेवलपर, बिल्ड पैरामीटर में तब तक बदलाव नहीं करते, जब तक वे साफ़ तौर पर ऐसा करने का विकल्प नहीं चुनते. प्रोसेस की गई फ़ाइलों पर आखिर में हस्ताक्षर किए जाते हैं, उन्हें एन्क्रिप्ट किया जाता है, और एक या एक से ज़्यादा (सब-)पैकेज में पैकेज किया जाता है. इसके बाद, उन्हें सुपर ऐप्लिकेशन की सेवा देने वाली कंपनियों के सर्वर पर अपलोड किया जाता है. सब-पैकेज, लेज़ी लोडिंग के लिए होते हैं. इसलिए, किसी मिनी ऐप्लिकेशन को एक साथ डाउनलोड करने की ज़रूरत नहीं होती. पैकेजिंग की जानकारी निजी होनी चाहिए और
हालांकि दस्तावेज़ के तौर पर उपलब्ध नहीं है, लेकिन WeChat के wxapkg फ़ॉर्मैट जैसे पैकेज फ़ॉर्मैट को
reverse-engineered.
स्वीकार की गई
इस लेख की समीक्षा इन्होंने की है जो मेडली, कायस बास्क, मिलिका मिहाजलीजा, ऐलन केंट, और कीथ गु॰