مشاريع مفتوحة المصدر للتطبيقات الصغيرة

كيلو بون

ينفّذ مشروع 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 mini المصمّمة باستخدام WXSS (راجِع النمط أعلاه) وweui.js لتطبيقات الويب وreact-weui لمكوّنات WeChat React.

أومي

Omi هو إطار عمل مصمم للواجهة الأمامية يعمل على عدّة إطارات عمل (مصدر مفتوح على GitHub. فهو يدمج مكوّنات الويب أو لغة JavaScript أو نموذج 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

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 أداة مطورة للواجهة الأمامية خفيفة وقابلة للتمديد لصفحات الويب على الأجهزة الجوّالة. فهي تقدم برنامج تصحيح أخطاء شبيهًا بأدوات مطوري البرامج يمكن إدراجه مباشرةً في تطبيقات الويب والتطبيقات الصغيرة. يعرض العرض التوضيحي الفرص المتاحة. يتضمن vConsole علامات تبويب للسجلات والنظام والشبكة والعناصر والتخزين.

ويب

مشروع weweb (مفتوح المصدر على GitHub) هو إطار عمل الواجهة الأمامية الأساسي لإطار عمل تطبيق Hera المصغّر الذي يدّعي أنه متوافق مع بنية تطبيقات WeChat الصغيرة، ما يتيح لك كتابة تطبيقات الويب بطريقة التطبيقات المصغّرة. توضّح المستندات أنّه إذا كان لديك تطبيق مصغّر، يمكنك تشغيله في المتصفح بفضل weweb. من خلال تجاربي، لم ينجح هذا الأمر بشكلٍ موثوق مع التطبيقات الصغيرة الحالية، ويرجع ذلك على الأرجح إلى أنّ المشروع لم يشهد تحديثات مؤخرًا، ما أدى إلى تفويت برامج التحويل البرمجي فيه للتغييرات التي تم إجراؤها على منصة WeChat.

شكر وتقدير

تمت مراجعة هذه المقالة من قِبل جو ميدلي وكايس باسكس وميلييكا ميهاجلجا وآلان كينت وكيث جو.