پروژه های منبع باز برنامه مینی

Thomas Steiner

کبون

پروژه kbone ( منبع باز در GitHub ) یک آداپتور پیاده‌سازی می‌کند که محیط مرورگر را در لایه انطباق شبیه‌سازی می‌کند، به طوری که کد نوشته شده برای وب می‌تواند بدون تغییر در یک برنامه کوچک اجرا شود. چندین قالب اولیه (از جمله Vue ، React و Preact ) وجود دارد که تجربه ورود به سیستم را برای توسعه‌دهندگان وب که از این چارچوب‌ها می‌آیند، آسان‌تر می‌کند.

یک پروژه جدید را می‌توان با ابزار kbone-cli ایجاد کرد. یک ویزارد می‌پرسد که پروژه را با چه فریم‌ورکی شروع کند. قطعه کد زیر، نسخه آزمایشی Preact را نشان می‌دهد. در قطعه کد زیر، دستور mp ، برنامه کوچک (mini app)، دستور web ، برنامه وب (web app) و build ، برنامه وب عملیاتی (production web app) را ایجاد می‌کند.

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 ) یک چارچوب رابط کاربری است که توسعه برنامه‌های کوچک و همچنین توسعه Vue.js با kbone را تسهیل می‌کند. اجزای kbone-ui ظاهر و حس اجزای برنامه‌های کوچک داخلی WeChat را شبیه‌سازی می‌کنند (همچنین به کامپوننت‌های بالا مراجعه کنید). یک نسخه آزمایشی که مستقیماً در مرورگر اجرا می‌شود، به شما امکان می‌دهد اجزای موجود را بررسی کنید.

وی یو آی

WeUI مجموعه‌ای از کتابخانه‌های سبک پایه است که با تجربه بصری پیش‌فرض WeChat سازگار است. تیم طراحی رسمی WeChat طرح‌هایی را برای صفحات وب داخلی WeChat و مینی‌اپلیکیشن‌های WeChat متناسب‌سازی کرده است تا درک کاربران از استفاده از آن را یکنواخت‌تر کند. این شامل اجزایی مانند button ، cell ، dialog ، progress ، toast ، article ، actionsheet و icon است. نسخه‌های مختلفی از WeUI مانند weui-wxss برای مینی‌اپلیکیشن‌های WeChat که با WXSS استایل‌دهی شده‌اند (به بخش استایل‌دهی در بالا مراجعه کنید)، weui.js برای برنامه‌های وب و react-weui برای کامپوننت‌های React WeChat در دسترس هستند.

اومی

Omi یک چارچوب فرانت‌اند چند-فریم‌وورکی ( متن‌باز در گیت‌هاب) است که خود را یک چارچوب متن‌باز می‌داند. این چارچوب، کامپوننت‌های وب، 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 یک کتابخانه کامپوننت رابط کاربری چند فریم‌ورکی ( منبع باز در GitHub ) است که بر اساس Omi توسعه داده شده است و عناصر سفارشی کامپوننت‌های استاندارد وب را خروجی می‌دهد.

وی‌پی‌وای

WePY چارچوبی است که به مینی‌اپلیکیشن‌ها اجازه می‌دهد از توسعه کامپوننتی پشتیبانی کنند. از طریق پیش‌کامپایل، توسعه‌دهندگان می‌توانند سبک توسعه مورد علاقه خود را برای توسعه مینی‌اپلیکیشن‌ها انتخاب کنند. بهینه‌سازی دقیق این چارچوب و معرفی Promises و توابع ناهمگام، همگی توسعه پروژه‌های مینی‌اپلیکیشن را آسان‌تر و کارآمدتر می‌کنند. در عین حال، WePY یک چارچوب رو به رشد نیز هست که تا حد زیادی برخی از ابزارهای بهینه شده frontend و مفاهیم و ایده‌های طراحی فریم‌ورک، عمدتاً از 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 یک ابزار توسعه‌دهنده frontend سبک و قابل توسعه برای صفحات وب موبایل ارائه می‌دهد. این پروژه یک اشکال‌زدا (دیباگر) شبیه DevTools ارائه می‌دهد که می‌تواند مستقیماً به برنامه‌های وب و برنامه‌های کوچک تزریق شود. یک نسخه آزمایشی (دمو) فرصت‌ها را به نمایش می‌گذارد. vConsole شامل تب‌هایی برای گزارش‌ها، سیستم، شبکه، عناصر و ذخیره‌سازی است.

ووب

پروژه weweb ( منبع باز در GitHub ) چارچوب اصلی frontend چارچوب Hera mini app است که ادعا می‌کند با سینتکس mini appهای WeChat سازگار است، بنابراین می‌توانید برنامه‌های وب را به روش mini appها بنویسید. مستندات قول می‌دهد که اگر از قبل یک mini app دارید، می‌توانید به لطف weweb آن را در مرورگر اجرا کنید. در آزمایش‌های من، این روش برای mini appهای فعلی به طور قابل اعتمادی کار نکرد، احتمالاً به این دلیل که این پروژه اخیراً به‌روزرسانی‌هایی نداشته است که منجر به عدم توجه کامپایلر آن به تغییرات در پلتفرم WeChat شده است.

تقدیرنامه‌ها

این مقاله توسط جو مدلی ، کیس باسک ، میلیکا میهالیا ، آلن کنت و کیث گو بررسی شده است.