मिनी ऐप्लिकेशन ओपन सोर्स प्रोजेक्ट

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;
WeChat DevTools में Preact kbone टेंप्लेट का डेमो ऐप्लिकेशन खुला. डीओएम स्ट्रक्चर की जांच करने पर, वेब ऐप्लिकेशन की तुलना में ज़्यादा ओवरहेड दिखता है.
WeChat DevTools में खोला गया Preact kbone टेंप्लेट डेमो ऐप्लिकेशन. डीओएम के जटिल स्ट्रक्चर पर ध्यान दें. साथ ही, यह भी देखें कि प्लस और माइनस बटन, असल में <button> एलिमेंट नहीं हैं.
वेब ब्राउज़र में खुला Preact kbone टेंप्लेट का डेमो ऐप्लिकेशन. डीओएम स्ट्रक्चर की जांच करने पर, Preact कॉम्पोनेंट कोड के आधार पर, उम्मीद के मुताबिक मार्कअप दिखता है.
वेब ब्राउज़र में Preact kbone टेंप्लेट का डेमो ऐप्लिकेशन खुला. डीओएम स्ट्रक्चर को नोट करें.

kbone-ui

kbone-ui प्रोजेक्ट (GitHub पर ओपन सोर्स) एक यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क है. इससे, kbone की मदद से मिनी ऐप्लिकेशन और Vue.js, दोनों को डेवलप करने में मदद मिलती है. kbone-ui के कॉम्पोनेंट, WeChat के पहले से मौजूद मिनी ऐप्लिकेशन कॉम्पोनेंट के लुक और स्टाइल को एमुलेट करते हैं. ऊपर कॉम्पोनेंट भी देखें. ब्राउज़र में सीधे चलने वाले डेमो की मदद से, उपलब्ध कॉम्पोनेंट के बारे में जाना जा सकता है.

kbone-ui फ़्रेमवर्क का डेमो, जिसमें फ़ॉर्म से जुड़े कॉम्पोनेंट दिखाए गए हैं. जैसे, रेडियो बटन, स्विच, इनपुट, और लेबल.
फ़ॉर्म से जुड़े कॉम्पोनेंट दिखाने वाला kbone-ui डेमो.

WeUI

WeUI, बुनियादी स्टाइल लाइब्रेरी का एक सेट है. यह WeChat के डिफ़ॉल्ट विज़ुअल अनुभव के मुताबिक है. WeChat की आधिकारिक डिज़ाइन टीम ने WeChat के इंटरनल वेब पेजों और WeChat के मिनी ऐप्लिकेशन के लिए डिज़ाइन तैयार किए हैं. इससे, उपयोगकर्ताओं को इनका इस्तेमाल करने में आसानी होगी. इसमें button, cell, dialog, progress, toast, article, actionsheet, और icon जैसे कॉम्पोनेंट शामिल हैं. WeUI के अलग-अलग वर्शन उपलब्ध हैं. जैसे, WXSS से स्टाइल किए गए WeChat मिनी ऐप्लिकेशन के लिए, weui-wxss (ऊपर स्टाइलिंग देखें), वेब ऐप्लिकेशन के लिए weui.js, और WeChat React कॉम्पोनेंट के लिए react-weui.

WeUI फ़्रेमवर्क का डेमो, जिसमें फ़ॉर्म से जुड़े कॉम्पोनेंट दिखाए गए हैं. जैसे, स्विच.
स्विच दिखाने वाला WeUI डेमो ऐप्लिकेशन.

Omi

Omi, एक फ़्रंटएंड क्रॉस-फ़्रेमवर्क फ़्रेमवर्क है, जो खुद को GitHub पर ओपन सोर्स के तौर पर बताता है. यह वेब कॉम्पोनेंट, 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, एक क्रॉस फ़्रेमवर्क यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट लाइब्रेरी है. इसे Omi के आधार पर डेवलप किया गया है. यह GitHub पर ओपन सोर्स है. यह स्टैंडर्ड वेब कॉम्पोनेंट के कस्टम एलिमेंट दिखाती है.

Omiu फ़्रेमवर्क का डेमो, जिसमें फ़ॉर्म से जुड़े कॉम्पोनेंट दिखाए गए हैं. जैसे, स्विच.
स्विच दिखाने वाला, Omiu डेमो ऐप्लिकेशन.

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 &#39;शुरू करना&#39; दस्तावेज़ का पेज, जिसमें शुरुआत करने के पहले चरण के बारे में बताया गया है.
WePY "शुरू करने का तरीका" दस्तावेज़.

vConsole

vConsole प्रोजेक्ट, मोबाइल वेब पेजों के लिए एक हल्का और ज़्यादा बेहतर फ़्रंटएंड डेवलपर टूल उपलब्ध कराता है. इसमें DevTools जैसा डीबगर उपलब्ध होता है, जिसे सीधे वेब ऐप्लिकेशन और मिनी ऐप्लिकेशन में इंजेक्ट किया जा सकता है. डेमो में ये अवसर दिखाए जाते हैं. vConsole में, लॉग, सिस्टम, नेटवर्क, एलिमेंट, और स्टोरेज के लिए टैब शामिल होते हैं.

vConsole डेमो ऐप्लिकेशन. vConsole सबसे नीचे खुलता है और उसमें लॉग, सिस्टम, नेटवर्क, एलिमेंट, और स्टोरेज के टैब होते हैं.
एलिमेंट एक्सप्लोरर दिखाने वाला vConsole का डेमो ऐप्लिकेशन.

weweb

weweb प्रोजेक्ट (GitHub पर ओपन सोर्स), Hera मिनी ऐप्लिकेशन फ़्रेमवर्क का बुनियादी फ़्रंटएंड फ़्रेमवर्क है. यह दावा करता है कि यह WeChat मिनी ऐप्लिकेशन के सिंटैक्स के साथ काम करता है, ताकि आप मिनी ऐप्लिकेशन की तरह वेब ऐप्लिकेशन लिख सकें. इस दस्तावेज़ में यह वादा किया गया है कि अगर आपके पास पहले से ही कोई मिनी ऐप्लिकेशन है, तो वेब ब्राउज़र की मदद से उसे ब्राउज़र में चलाया जा सकता है. मेरे प्रयोगों में, यह मौजूदा मिनी ऐप्लिकेशन के लिए भरोसेमंद तरीके से काम नहीं कर रहा था. शायद इसलिए, क्योंकि इस प्रोजेक्ट ने हाल ही में ऐसे अपडेट नहीं देखे हैं जिनकी वजह से इसके कंपाइलर से WeChat प्लैटफ़ॉर्म में किए गए बदलाव छूट गए.

Hera Mini ऐप्लिकेशन फ़्रेमवर्क का दस्तावेज़, जिसमें WeChat के उन एपीआई की जानकारी दी गई है जिन पर यह काम करता है. जैसे, `wx.request`, `wx.uploadFile` वगैरह.
Hera मिनी ऐप्लिकेशन फ़्रेमवर्क का दस्तावेज़, जिसमें काम करने वाले WeChat एपीआई की सूची दिखाई गई है.
वेब डेमो मिनी ऐप्लिकेशन को ब्राउज़र में चलाने के लिए वेब के साथ कंपाइल किया गया है, ताकि फ़ॉर्म के एलिमेंट दिखाए जा सकें.
ब्राउज़र में चलाने के लिए, weweb के साथ कंपाइल किया गया weweb डेमो मिनी ऐप्लिकेशन.

धन्यवाद

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