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

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

يعرض مقتطف الرمز البرمجي أدناه مكوّن عدّاد بسيطًا يتم عرضه بشكل متماثل في تطبيق مصغّر وتطبيق ويب. وتكون تكلفة التطبيق المصغّر كبيرة، وذلك استنادًا إلى بنية نموذج المستند فقط.

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 لمكوّنات React في WeChat.

Omi

Omi هو إطار عمل أمامي متعدد الأطر (مفتوح المصدر على GitHub. وهي تدمج Web Components وJSX وVirtual DOM والأسلوب الوظيفي وObserver أو Proxy في إطار عمل واحد صغير الحجم وعالي الأداء. يهدف هذا المعيار إلى السماح للمطوّرين بكتابة المكوّنات مرة واحدة واستخدامها في كل مكان، مثل 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

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

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

الإقرارات

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