মিনি অ্যাপ ওপেন সোর্স প্রকল্প

Thomas Steiner

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;

kbone-ui

kbone-ui প্রজেক্ট ( GitHub-এ ওপেন সোর্স ) হল একটি UI ফ্রেমওয়ার্ক যা মিনি অ্যাপ ডেভেলপমেন্টের পাশাপাশি Kbone-এর সাথে Vue.js ডেভেলপমেন্ট উভয়কেই সহজতর করে। kbone-ui উপাদানগুলি WeChat-এর অন্তর্নির্মিত মিনি অ্যাপ উপাদানগুলির চেহারা এবং অনুভূতি অনুকরণ করে (উপরের উপাদানগুলিও দেখুন)। একটি ডেমো যা সরাসরি ব্রাউজারে চলে তা আপনাকে উপলব্ধ উপাদানগুলি অন্বেষণ করতে দেয়৷

WeUI

WeUI হল WeChat এর ডিফল্ট ভিজ্যুয়াল অভিজ্ঞতার সাথে সামঞ্জস্যপূর্ণ মৌলিক শৈলী লাইব্রেরির একটি সেট। অফিসিয়াল WeChat ডিজাইন টিম WeChat অভ্যন্তরীণ ওয়েব পৃষ্ঠাগুলি এবং WeChat মিনি অ্যাপগুলির জন্য উপযোগী ডিজাইন করেছে যাতে ব্যবহারকারীদের ব্যবহারের ধারণাকে আরও অভিন্ন করে তোলা যায়। এতে button , cell , dialog , progress , toast , article , actionsheet এবং icon মতো উপাদান রয়েছে। WeUI-এর বিভিন্ন সংস্করণ পাওয়া যায় যেমন WXSS-এর সাথে স্টাইল করা WeChat মিনি অ্যাপের জন্য weui-wxss (উপরে স্টাইলিং দেখুন), ওয়েব অ্যাপের জন্য weui.js এবং WeChat রিঅ্যাক্ট উপাদানগুলির জন্য react-weui ।

ওমি

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 হল একটি ক্রস ফ্রেমওয়ার্ক UI কম্পোনেন্ট লাইব্রেরি ( 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-এর মতো ডিবাগার অফার করে যা সরাসরি ওয়েব অ্যাপ এবং মিনি অ্যাপে ইনজেকশন করা যেতে পারে। একটি ডেমো সুযোগগুলি প্রদর্শন করে। vConsole লগ, সিস্টেম, নেটওয়ার্ক, উপাদান এবং সঞ্চয়স্থানের জন্য ট্যাব অন্তর্ভুক্ত করে।

ওয়েব

ওয়েব প্রজেক্ট ( GitHub-এ ওপেন সোর্স ) হল হেরা মিনি অ্যাপ ফ্রেমওয়ার্কের অন্তর্নিহিত ফ্রন্টএন্ড ফ্রেমওয়ার্ক যা WeChat মিনি অ্যাপের সিনট্যাক্সের সাথে সামঞ্জস্যপূর্ণ বলে দাবি করে, যাতে আপনি মিনি অ্যাপের মতো ওয়েব অ্যাপ্লিকেশন লিখতে পারেন। ডকুমেন্টেশন প্রতিশ্রুতি দেয় যে আপনার যদি ইতিমধ্যে একটি মিনি অ্যাপ থাকে তবে আপনি ওয়েবকে ধন্যবাদ ব্রাউজারে চালাতে পারেন। আমার পরীক্ষা-নিরীক্ষায়, এটি বর্তমান মিনি অ্যাপগুলির জন্য নির্ভরযোগ্যভাবে কাজ করেনি, সম্ভবত কারণ প্রকল্পটি সম্প্রতি আপডেটগুলি দেখেনি যা তার কম্পাইলারকে WeChat প্ল্যাটফর্মে পরিবর্তনগুলি মিস করতে নেতৃত্ব দেয়।

স্বীকৃতি

এই নিবন্ধটি Joe Medley , Kayce Basques , Milica Mihajlija , Alan Kent , এবং Keith Gu দ্বারা পর্যালোচনা করা হয়েছে।