Kबोन
kबोन प्रोजेक्ट (GitHub पर ओपन सोर्स) एक ऐसा अडैप्टर लागू करता है जो एडैप्टेशन लेयर में ब्राउज़र एनवायरमेंट का इस्तेमाल करता है, ताकि वेब के लिए लिखा गया कोड इसके बिना चल सके मिनी ऐप में बदलाव होते हैं. कई स्टार्टर टेंप्लेट (उनमें से) व्यू, प्रतिक्रिया दें, और प्रीैक्ट) मौजूद हैं, जो को शामिल करने का अनुभव आसान बना दिया है.
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;
<button> एलिमेंट नहीं हैं.
केबोन-यूई
kबोन-ui प्रोजेक्ट (GitHub पर ओपन सोर्स) एक यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क है, जो मिनी ऐप्लिकेशन डेवलपमेंट के साथ-साथ kबोन के साथ Vue.js डेवलपमेंट, दोनों की सुविधा देता है. द कोबोन-यूआई कॉम्पोनेंट, विज़ुअल के तौर पर WeChat में पहले से मौजूद मिनी ऐप्लिकेशन के कॉम्पोनेंट (ऊपर दिए गए कॉम्पोनेंट भी देखें). ऐप्लिकेशन डेमो जो सीधे ब्राउज़र में चलता है, उपलब्ध कॉम्पोनेंट के बारे में ज़्यादा जानकारी पाएं.
WeUI
WeUI, बेसिक स्टाइल वाली लाइब्रेरी का सेट है. यह WeChat की लाइब्रेरी के हिसाब से है
में डिफ़ॉल्ट विज़ुअल अनुभव मिलता है. WeChat की आधिकारिक डिज़ाइन टीम ने, WeChat की इंटरनल टीम के लिए डिज़ाइन तैयार किए हैं
वेब पेजों और WeChat मिनी ऐप्लिकेशन की मदद से, लोगों के लिए और एक जैसे इस्तेमाल का नज़रिया. इसमें कॉम्पोनेंट शामिल होते हैं
जैसे कि button, cell, dialog, progress, toast, article, actionsheet, और icon. यह लीजिए
WeUI के अलग-अलग वर्शन हैं. जैसे- weui-wxss
WXSS की स्टाइल में, WeChat के मिनी ऐप्लिकेशन (ऊपर स्टाइलिंग देखें),
वेब ऐप्लिकेशन के लिए weui.js और
WeChat React के कॉम्पोनेंट के लिए, react-weui की रणनीति.
Omi
Omi चैनल के फ़्रंटएंड क्रॉस-फ़्रेमवर्क फ़्रेमवर्क को खुद बताने का दावा किया गया है (GitHub पर ओपन सोर्स. यह वेब कॉम्पोनेंट, JSX, वर्चुअल को मर्ज करता है छोटे साइज़ और अच्छी परफ़ॉर्मेंस वाले एक फ़्रेमवर्क में डीओएम, फ़ंक्शनल स्टाइल, ऑब्ज़र्वर या प्रॉक्सी का इस्तेमाल करें. यह इसका मकसद है कि डेवलपर को एक बार कॉम्पोनेंट लिखने और उन्हें सभी जगहों पर इस्तेमाल करने की सुविधा दें. जैसे- 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
Omiu एक क्रॉस फ़्रेमवर्क यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट लाइब्रेरी है (GitHub पर ओपन सोर्स) को Omi के आधार पर बनाया गया है. इससे हमें स्टैंडर्ड वेब कॉम्पोनेंट के कस्टम एलिमेंट.
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>
vConsole
vConsole प्रोजेक्ट लाइटवेट, एक्सटेंडेट किया जा सकने वाला टूल उपलब्ध कराता है मोबाइल वेब पेजों के लिए फ़्रंटएंड डेवलपर टूल. यह DevTools जैसा डीबगर करता है जिसे सीधे वेब ऐप्लिकेशन और मिनी ऐप्लिकेशन में इंजेक्ट किए जा सकते हैं. ऐप्लिकेशन डेमो में अवसर दिखाए जाते हैं. द vकंसोल इसमें लॉग, सिस्टम, नेटवर्क, एलिमेंट, और स्टोरेज के लिए टैब शामिल होते हैं.
वेब
weweb प्रोजेक्ट (GitHub पर ओपन सोर्स), Google AdSense का बुनियादी फ़्रंटएंड फ़्रेमवर्क है Hera मिनी ऐप्लिकेशन का फ़्रेमवर्क, जो इसके साथ काम करने का दावा करता है जिसमें WeChat मिनी ऐप्लिकेशन के सिंटैक्स का इस्तेमाल करें, ताकि आप मिनी ऐप्लिकेशन की तरह वेब ऐप्लिकेशन लिख सकें. कॉन्टेंट बनाने दस्तावेज़ में यह वादा किया गया है कि अगर आपके पास पहले से ही मिनी ऐप्लिकेशन है, तो उसे ब्राउज़र में चलाया जा सकता है. इसके लिए धन्यवाद Weweb. मेरे एक्सपेरिमेंट में, यह मौजूदा मिनी ऐप्लिकेशन के लिए भरोसेमंद तरीके से काम नहीं कर रहा था. शायद इसलिए, इस प्रोजेक्ट में हाल ही में ऐसे अपडेट नहीं मिले हैं जिनकी वजह से, इसके कंपाइलर में WeChat प्लैटफ़ॉर्म.
स्वीकार की गई
इस लेख की समीक्षा इन्होंने की है जो मेडली, कायस बास्क, मिलिका मिहाजलीजा, ऐलन केंट, और कीथ गु॰