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

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

WeUI

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

اومی

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

WePY

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