kbone
kbone प्रोजेक्ट (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
यहां दिया गया कोड स्निपेट, एक सामान्य काउंटर कॉम्पोनेंट दिखाता है. इसे बाद में, मिनी ऐप्लिकेशन और वेब ऐप्लिकेशन में आइसोमॉर्फ़िक तरीके से रेंडर किया जाता है. DOM स्ट्रक्चर के हिसाब से, मिनी ऐप्लिकेशन का ओवरहेड काफ़ी ज़्यादा होता है.
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;
<button> एलिमेंट नहीं हैं.
kbone-ui
kbone-ui प्रोजेक्ट (GitHub पर ओपन सोर्स) एक यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क है. इसकी मदद से, मिनी ऐप्लिकेशन के साथ-साथ Vue.js को kbone के साथ भी डेवलप किया जा सकता है. kbone-ui कॉम्पोनेंट, WeChat के इन-बिल्ट मिनी ऐप्लिकेशन कॉम्पोनेंट (ऊपर कॉम्पोनेंट भी देखें) की तरह दिखते और काम करते हैं. ब्राउज़र में सीधे चलने वाले डेमो की मदद से, उपलब्ध कॉम्पोनेंट एक्सप्लोर किए जा सकते हैं.
WeUI
WeUI, स्टाइल लाइब्रेरी का एक सेट है. यह WeChat's
डिफ़ॉल्ट विज़ुअल अनुभव के मुताबिक है. WeChat की आधिकारिक डिज़ाइन टीम ने, WeChat के इंटरनल वेब पेजों और WeChat के मिनी ऐप्लिकेशन के लिए डिज़ाइन तैयार किए हैं. इससे उपयोगकर्ताओं को एक जैसा अनुभव मिलता है. इसमें button, cell, dialog, progress, toast, article, actionsheet, और icon जैसे कॉम्पोनेंट शामिल हैं. WeUI के अलग-अलग वर्शन उपलब्ध हैं. जैसे, WXSS (ऊपर स्टाइलिंग देखें) के साथ स्टाइल किए गए WeChat मिनी ऐप्लिकेशन के लिए weui-wxss, वेब ऐप्लिकेशन के लिए weui.js, और WeChat React कॉम्पोनेंट के लिए react-weui.
Omi
Omi, फ़्रंटएंड क्रॉस-फ़्रेमवर्क फ़्रेमवर्क है. (यह GitHub पर ओपन सोर्स है. यह Web कॉम्पोनेंट, JSX, वर्चुअल DOM, फ़ंक्शनल स्टाइल, ऑब्ज़र्वर या प्रॉक्सी को एक फ़्रेमवर्क में मर्ज करता है. इसका साइज़ छोटा होता है और यह बेहतर परफ़ॉर्मेंस देता है. इसका मकसद, डेवलपर को कॉम्पोनेंट को एक बार लिखकर, उन्हें Omi, React, Preact, Vue.js या Angular जैसे प्लैटफ़ॉर्म पर इस्तेमाल करने की सुविधा देना है. Omi कॉम्पोनेंट लिखना बहुत आसान है. इसमें बॉयलरप्लेट कोड की ज़रूरत नहीं होती.
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
Omiu, क्रॉस फ़्रेमवर्क यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट लाइब्रेरी है. यह GitHub पर ओपन सोर्स है. इसे Omi के आधार पर डेवलप किया गया है. यह स्टैंडर्ड वेब कॉम्पोनेंट के कस्टम एलिमेंट आउटपुट करता है.
WePY
WePY एक ऐसा फ़्रेमवर्क है जिसकी मदद से, मिनी ऐप्लिकेशन को कॉम्पोनेंट के हिसाब से डेवलप किया जा सकता है. प्री-कंपाइलेशन की मदद से, डेवलपर मिनी ऐप्लिकेशन डेवलप करने के लिए अपनी पसंद की डेवलपमेंट स्टाइल चुन सकते हैं. फ़्रेमवर्क के बेहतर ऑप्टिमाइज़ेशन और Promises और एसिंक फ़ंक्शन की मदद से, मिनी ऐप्लिकेशन प्रोजेक्ट को डेवलप करना आसान और ज़्यादा असरदार हो जाता है. इसके अलावा, 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>
vConsole
vConsole प्रोजेक्ट, मोबाइल वेब पेजों के लिए एक हल्का और बढ़ाया जा सकने वाला फ़्रंटएंड डेवलपर टूल उपलब्ध कराता है. यह DevTools जैसा डीबगर उपलब्ध कराता है. इसे वेब ऐप्लिकेशन और मिनी ऐप्लिकेशन में सीधे इंजेक्ट किया जा सकता है. एक डेमो में, इसकी सुविधाएं दिखाई गई हैं. vConsole में, लॉग, सिस्टम, नेटवर्क, एलिमेंट, और स्टोरेज के लिए टैब शामिल हैं.
weweb
weweb प्रोजेक्ट (GitHub पर ओपन सोर्स), Hera मिनी ऐप्लिकेशन फ़्रेमवर्क का फ़्रंटएंड फ़्रेमवर्क है. यह WeChat मिनी ऐप्लिकेशन के सिंटैक्स के साथ काम करता है. इसलिए, मिनी ऐप्लिकेशन की तरह वेब ऐप्लिकेशन लिखे जा सकते हैं. दस्तावेज़ में दावा किया गया है कि अगर आपके पास पहले से कोई मिनी ऐप्लिकेशन है, तो उसे weweb की मदद से ब्राउज़र में चलाया जा सकता है. मेरे प्रयोगों में, मौजूदा मिनी ऐप्लिकेशन के लिए यह सुविधा भरोसेमंद तरीके से काम नहीं करती. इसकी वजह यह हो सकती है कि हाल ही में प्रोजेक्ट को अपडेट नहीं किया गया है. इसलिए, इसके कंपाइलर को WeChat प्लैटफ़ॉर्म में हुए बदलावों के बारे में पता नहीं चल पाता.
Acknowledgements
इस लेख की समीक्षा Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, और Keith Gu ने की है.