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

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;
برنامه نمایشی قالب Preact kbone در WeChat DevTools باز شد. بررسی ساختار DOM در مقایسه با برنامه وب، سربار قابل توجهی را نشان می دهد.
برنامه نمایشی قالب Preact kbone در WeChat DevTools باز شد. به ساختار پیچیده DOM توجه کنید و اینکه چگونه دکمه های مثبت و منفی در واقع عناصر <button> نیستند.
برنامه نمایشی قالب Preact kbone در مرورگر وب باز شد. بررسی ساختار DOM نشانه گذاری مورد انتظار را بر اساس کد جزء Preact نشان می دهد.
برنامه نمایشی قالب Preact kbone در مرورگر وب باز شد. به ساختار DOM توجه کنید.

kbone-ui

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

نسخه ی نمایشی چارچوب kbone-ui که اجزای مرتبط با فرم مانند دکمه های رادیویی، سوئیچ ها، ورودی ها و برچسب ها را نشان می دهد.
نسخه ی نمایشی kbone-ui که اجزای مرتبط با فرم را نشان می دهد.

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 موجود است.

نسخه ی نمایشی چارچوب WeUI که اجزای مرتبط با فرم، یعنی سوئیچ ها را نشان می دهد.
برنامه نمایشی WeUI سوئیچ ها را نشان می دهد.

اومی

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 توسعه یافته است، که عناصر سفارشی اجزای وب استاندارد را خروجی می دهد.

نسخه ی نمایشی چارچوب Omiu که اجزای مرتبط با فرم، یعنی سوئیچ ها را نشان می دهد.
برنامه آزمایشی Omiu سوئیچ ها را نشان می دهد.

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>
صفحه اسناد «شروع به کار» WePY که اولین گام‌ها برای شروع را نشان می‌دهد.
اسناد "شروع به کار" WePY.

vConsole

پروژه vConsole یک ابزار توسعه‌دهنده ظاهری سبک و قابل ارتقا برای صفحات وب تلفن همراه ارائه می‌کند. این یک دیباگر شبیه DevTools را ارائه می دهد که می تواند مستقیماً به برنامه های وب و برنامه های کوچک تزریق شود. نسخه ی نمایشی فرصت ها را نشان می دهد. vConsole شامل برگه هایی برای گزارش ها، سیستم، شبکه، عناصر و ذخیره سازی است.

برنامه نمایشی vConsole. vConsole در پایین باز می شود و دارای برگه هایی برای گزارش ها، سیستم، شبکه، عناصر و ذخیره سازی است.
برنامه آزمایشی vConsole که کاوشگر عناصر را نشان می دهد.

وب

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

مستندات چارچوب برنامه Hera mini که APIهای WeChat را که از جمله «wx.request»، «wx.uploadFile» و غیره پشتیبانی می‌کند، فهرست می‌کند.
اسناد چارچوب برنامه کوچک Hera که لیستی از APIهای پشتیبانی شده WeChat را نشان می دهد.
برنامه کوتاه آزمایشی وب با وب برای اجرا در مرورگر که عناصر فرم را نشان می دهد کامپایل شده است.
برنامه مینی دمو وب با وب برای اجرا در مرورگر کامپایل شده است.

قدردانی

این مقاله توسط Joe Medley ، Kayce Basques ، Milica Mihajlija ، Alan Kent و Keith Gu بررسی شده است.