Kबोन
kबोन प्रोजेक्ट (GitHub पर ओपन सोर्स), एक ऐसा अडैप्टर लागू करता है जो अडॉप्शन लेयर में ब्राउज़र एनवायरमेंट की तरह काम करता है. इससे वेब के लिए लिखा गया कोड मिनी ऐप्लिकेशन में बिना बदलाव किए चल सकता है. Vue, React, और Preact जैसे कई स्टार्टर टेंप्लेट मौजूद होते हैं. इनसे, इन फ़्रेमवर्क से आने वाले वेब डेवलपर के लिए ऑनबोर्डिंग अनुभव आसान हो जाता है.
kbone-cli
टूल की मदद से एक नया प्रोजेक्ट बनाया जा सकता है. एक जादूगर आपसे पूछता है कि प्रोजेक्ट को किस फ़्रेमवर्क से
शुरू करना है. नीचे दिया गया कोड स्निपेट, Preact का डेमो दिखाता है. नीचे दिए गए कोड स्निपेट में, mp
कमांड मिनी ऐप्लिकेशन बनाता है, web
निर्देश वेब ऐप्लिकेशन बनाता है, और build
प्रोडक्शन वेब ऐप्लिकेशन बनाता है.
npx kbone-cli init my-app
cd my-app
npm run mp
npm run web
npm run build
नीचे दिया गया कोड स्निपेट एक आसान काउंटर कॉम्पोनेंट दिखाता है, जो फिर मिनी ऐप्लिकेशन और वेब ऐप्लिकेशन में अजीबोगरीब तरीके से रेंडर होता है. मिनी ऐप्लिकेशन का ओवरहेड अहम है और पूरी तरह से डीओएम स्ट्रक्चर के आधार पर दिखाया गया है.
import { h, Component } from "preact";
import "./index.css";
class Counter extends Component {
state = { count: 1 };
sub = () => {
this.setState((prevState) => {
return { count: --prevState.count };
});
};
add = () => {
this.setState((prevState) => {
return { count: ++prevState.count };
});
};
clickHandle = () => {
if ("undefined" != typeof wx && wx.getSystemInfoSync) {
wx.navigateTo({
url: "../log/index?id=1",
});
} else {
location.href = "log.html";
}
};
render({}, { count }) {
return (
<div>
<button onClick={this.sub}>-</button>
<span>{count}</span>
<button onClick={this.add}>+</button>
<div onClick={this.clickHandle}>跳转</div>
</div>
);
}
}
export default Counter;
![Preact kबोन टेंप्लेट का डेमो ऐप्लिकेशन, WeChat DevTools में खोला गया. DOM स्ट्रक्चर की जांच करने पर आपको वेब ऐप्लिकेशन की तुलना में, अहम ओवरहेड दिखता है.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/the-preact-kbone-template-eae37ec329962.png?authuser=6&hl=hi)
<button>
एलिमेंट नहीं हैं.
![Preact kबोन टेंप्लेट का डेमो ऐप्लिकेशन, वेब ब्राउज़र में खोला गया. डीओएम स्ट्रक्चर की जांच करने से, प्रीैक्ट कॉम्पोनेंट कोड के आधार पर संभावित मार्कअप दिखता है.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/the-preact-kbone-template-d94e2420c64b4.png?authuser=6&hl=hi)
kbone-ui
kbone-ui प्रोजेक्ट (GitHub पर ओपन सोर्स) एक यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क है. यह kबोन के साथ, मिनी ऐप्लिकेशन डेवलपमेंट के साथ-साथ Vue.js डेवलपमेंट, दोनों की सुविधा देता है. केबोन-यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट, WeChat में पहले से मौजूद मिनी ऐप्लिकेशन कॉम्पोनेंट के लुक और स्टाइल की नकल करते हैं (ऊपर दिए गए कॉम्पोनेंट भी देखें). सीधे ब्राउज़र में चलने वाले डेमो की मदद से, उपलब्ध कॉम्पोनेंट को एक्सप्लोर किया जा सकता है.
![केबोन-यूआई फ़्रेमवर्क का डेमो. इसमें रेडियो बटन, स्विच, इनपुट, और लेबल जैसे फ़ॉर्म से जुड़े कॉम्पोनेंट दिख रहे हैं.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-kbone-ui-framew-a00bed5e707fd.png?authuser=6&hl=hi)
WeUI
WeUI, बेसिक स्टाइल की लाइब्रेरी का एक सेट है, जो WeChat के डिफ़ॉल्ट विज़ुअल अनुभव के मुताबिक काम करता है. WeChat की आधिकारिक डिज़ाइन टीम ने, WeChat के इंटरनल वेब पेजों और WeChat के मिनी ऐप्लिकेशन के लिए डिज़ाइन को तैयार किया है. इसमें button
, cell
, dialog
, progress
, toast
, article
, actionsheet
, और icon
जैसे कॉम्पोनेंट शामिल हैं. WeUI के कई वर्शन उपलब्ध हैं, जैसे कि
WeChat मिनी ऐप्लिकेशन के लिए, जिसे WXSS की स्टाइल में बनाया गया है (ऊपर स्टाइलिंग देखें),
वेब ऐप्लिकेशन के लिए weui.js, और
WeChat React कॉम्पोनेंट के लिए react-weui इस्तेमाल करना.
![वीयूआई फ़्रेमवर्क का डेमो. इसमें फ़ॉर्म से जुड़े कॉम्पोनेंट दिख रहे हैं, जैसे कि स्विच.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-weui-framework-7609e8bee005e.png?authuser=6&hl=hi)
ओमी
Omi एक ऐसा फ़्रंटएंड क्रॉस-फ़्रेमवर्क फ़्रेमवर्क है जिसका आपने खुद दावा किया है (GitHub पर ओपन सोर्स. यह छोटे साइज़ और बेहतर परफ़ॉर्मेंस वाले एक फ़्रेमवर्क में वेब कॉम्पोनेंट, JSX, वर्चुअल DOM, फ़ंक्शनल स्टाइल, ऑब्ज़र्वर या प्रॉक्सी को मर्ज करता है. इसका लक्ष्य डेवलपर को कॉम्पोनेंट एक बार लिखने और Omi, React, Preact, Vue.js या Angular जैसी जगहों पर उनका इस्तेमाल करने की सुविधा देना है. ओमी कॉम्पोनेंट लिखना बहुत आसान है और इनमें करीब सभी बॉयलरप्लेट नहीं लिखे जाते.
import { render, WeElement, define } from "omi";
define("my-counter", class extends WeElement {
data = {
count: 1,
};
static css = `
span{
color: red;
}`;
sub = () => {
this.data.count--;
this.update();
};
add = () => {
this.data.count++;
this.update();
};
render() {
return (
<div>
<button onClick={this.sub}>-</button>
<span>{this.data.count}</span>
<button onClick={this.add}>+</button>
</div>
);
}
});
render(<my-counter />, "body");
ओमियू
Omiu एक क्रॉस फ़्रेमवर्क यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट लाइब्रेरी है (GitHub पर ओपन सोर्स), Omi के आधार पर डेवलप किया गया है, जो स्टैंडर्ड वेब कॉम्पोनेंट के कस्टम एलिमेंट देता है.
![Omiu फ़्रेमवर्क का डेमो. इसमें फ़ॉर्म से जुड़े कॉम्पोनेंट दिख रहे हैं, जैसे कि स्विच.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-omiu-framework-8876538b48d1e.png?authuser=6&hl=hi)
WePY
WePY एक ऐसा फ़्रेमवर्क है जो मिनी ऐप्लिकेशन को कॉम्पोनेंट के डेवलपमेंट में मदद करने की अनुमति देता है. प्री-कंप्यूलेशन के ज़रिए डेवलपर, मिनी ऐप्लिकेशन बनाने के लिए अपनी पसंदीदा डेवलपमेंट स्टाइल चुन सकते हैं. फ़्रेमवर्क का बेहतर ऑप्टिमाइज़ेशन और प्रॉमिस और एसिंक्रोनस फ़ंक्शन की शुरुआत की वजह से, मिनी ऐप्लिकेशन प्रोजेक्ट बनाना आसान और बेहतर हो जाता है. साथ ही साथ, WePY एक उभरता हुआ फ़्रेमवर्क भी है, जिसने काफ़ी हद तक कुछ ऑप्टिमाइज़ किए गए फ़्रंटएंड टूल और फ़्रेमवर्क डिज़ाइन के सिद्धांतों और आइडिया को शामिल किया है. ज़्यादातर काम Vue.js से मिले हैं.
<style lang="less">
@color: #4d926f;
.num {
color: @color;
}
</style>
<template>
<div class="container">
<div class="num" @tap="num++">{{num}}</div>
<custom-component></custom-component>
<vendor-component></vendor-component>
<div>{{text}}</div>
<input v-model="text" />
</div>
</template>
<config>
{ usingComponents: { customComponent: '@/components/customComponent', vendorComponent:
'module:vendorComponent' } }
</config>
<script>
import wepy from "@wepy/core";
wepy.page({
data: {
num: 0,
text: "Hello World",
},
});
</script>
![WePY 'शुरुआत करना' दस्तावेज़ वाला पेज, जिसमें आगे बढ़ने के शुरुआती तरीके बताए गए हैं.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/wepy-getting-started-do-ebebe13bdb6ef.png?authuser=6&hl=hi)
vConsole
vConsole प्रोजेक्ट, मोबाइल वेब पेजों के लिए एक हल्का और बड़ा किया जा सकने वाला फ़्रंटएंड डेवलपर टूल उपलब्ध कराता है. यह DevTools जैसा डीबगर देता है. इसे सीधे वेब ऐप्लिकेशन और मिनी ऐप्लिकेशन में इंजेक्ट किया जा सकता है. डेमो में अवसरों को दिखाया जाता है. vConsole में लॉग, सिस्टम, नेटवर्क, एलिमेंट, और स्टोरेज के टैब शामिल होते हैं.
![vConsole डेमो ऐप्लिकेशन. vConsole सबसे नीचे खुलता है, जिसमें लॉग, सिस्टम, नेटवर्क, एलिमेंट, और स्टोरेज के लिए टैब होते हैं.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/vconsole-demo-app-vcons-9b49c9717dbe8.png?authuser=6&hl=hi)
वेब
weweb प्रोजेक्ट (GitHub पर ओपन सोर्स), Hera मिनी ऐप्लिकेशन फ़्रेमवर्क का बुनियादी फ़्रंटएंड फ़्रेमवर्क है. यह दावा करता है कि यह WeChat के मिनी ऐप्लिकेशन के सिंटैक्स के साथ काम करता है, ताकि वेब ऐप्लिकेशन को मिनी ऐप्लिकेशन की तरह लिखा जा सके. इस दस्तावेज़ में यह वादा किया गया है कि अगर आपके पास पहले से ही कोई मिनी ऐप्लिकेशन है, तो उसे वेब पर चलने के लिए ब्राउज़र में चलाया जा सकता है. मेरे प्रयोगों में, मौजूदा मिनी ऐप्लिकेशन के लिए यह सही तरीके से काम नहीं कर रहा था. शायद ऐसा इसलिए है, क्योंकि हाल ही में इस प्रोजेक्ट के अपडेट नहीं हुए हैं, जिसकी वजह से इसके कंपाइलर को WeChat प्लैटफ़ॉर्म में बदलाव करने की ज़रूरत नहीं पड़ी.
![Hera Mini ऐप्लिकेशन फ़्रेमवर्क के दस्तावेज़, जिसमें WeChat एपीआई के साथ काम करने वाले एपीआई के बारे में बताया गया है. जैसे, `wx.request`, `wx.uploadFile` वगैरह.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/documentation-the-hera-m-2a2d96d52891b.png?authuser=6&hl=hi)
![वेब डेमो मिनी ऐप्लिकेशन को वेब के साथ कंपाइल किया गया है, ताकि फ़ॉर्म एलिमेंट को ब्राउज़र में चलाया जा सके.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/the-weweb-demo-mini-app-c-1eda42d616e02.png?authuser=6&hl=hi)
स्वीकारें
इस लेख की समीक्षा जो मेडले, कायस बैस्क्स, मिलिका मिहाज्लीजा, ऐलन केंट, और कीथ गू ने की है.