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

Thomas Steiner

ملاحظة: هذه المشاركة هي جزء من مجموعة مقالات تستند كل مقالة فيها إلى مقالات سابقة. إذا وصلت إلى هنا للتو، ننصحك ببدء القراءة من البداية.

كيلوبايت

مشروع kbone (البرامج المفتوحة المصدر على GitHub) تعمل على تنفيذ محوّل يحاكي بيئة المتصفح في طبقة التكيف، بحيث يمكن تشغيل التعليمات البرمجية المكتوبة للويب دون التغييرات في تطبيق مصغّر. العديد من القوالب للمبتدئين (من بينها) Vue، التفاعل الإجراء) الذي يجعل إعداد مطوري البرامج على الويب القادمين من أطر العمل هذه بشكل أسهل.

يمكن إنشاء مشروع جديد باستخدام أداة 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. يُرجى العِلم أنّ بنية DOM المعقّدة وأنّ أزرار الجمع والطرح ليست في الواقع عناصر <button>.

تم فتح التطبيق التجريبي لنموذج Preact kbone في متصفّح الويب. لاحظ بنية DOM.

واجهة مستخدم نظام التشغيل kbone

مشروع kbone-ui (البرامج المفتوحة المصدر على GitHub) هي إطار عمل لواجهة مستخدم تُسهل تطوير التطبيقات المصغَّرة وكذلك تطوير Vue.js باستخدام kbone. واجهة kbone-ui عناصر تحاكي شكل ومظهر مكوّنات التطبيق المصغّر المدمجة في WeChat (اطّلِع أيضًا على المكوّنات أعلاه). حاسمة الإصدار التجريبي الذي يتم تشغيله مباشرةً في المتصفّح في استكشاف المكونات المتاحة.

العرض التوضيحي لـ 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 التجريبية يعرض مفاتيح تبديل.

Omi

Omi هو إطار عمل يطلق على واجهة أمامية تعمل على مستوى الأطر المختلفة (برنامج مفتوح المصدر على GitHub. يدمج مكونات الويب وJSX وVirtual نموذج كائن المستند (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

Omiu هي مكتبة لمكونات واجهة المستخدم على مستوى أطر عمل متعددة (برنامج مفتوح المصدر على GitHub) تم تطويره استنادًا إلى أومي، والذي ينتج العناصر المخصصة لمكونات الويب القياسية.

تطبيق Omiu التجريبي يعرض مفاتيح تشغيل

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>

"الخطوات الأولى" في تطبيق WePY التوثيق.

vConsole

يوفّر مشروع vConsole إصدارًا خفيفًا وقابلاً للتمديد أداة مطور الواجهة الأمامية لصفحات ويب الهاتف المحمول. يوفر برنامج تصحيح أخطاء يشبه "أدوات مطوري البرامج" يمكن مباشرةً في تطبيقات الويب والتطبيقات المصغّرة. حاسمة demo فرصًا لتحقيق الربح. وحدة التحكّم يتضمن علامات تبويب للسجلات والنظام والشبكة والعناصر والتخزين.

تطبيق vConsole التجريبي الذي يعرض مستكشف العناصر.

Weweb

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

مستند إطار عمل تطبيق Hera المصغّر الذي يعرض قائمة واجهات برمجة تطبيقات WeChat المتوافقة.

تطبيق Weweb المصغَّر الذي تم تجميعه مع webweb لتشغيله في المتصفح.

النجاح: في الفصل التالي، ستتعلم كيفية برمجة تطبيق مصغّر على طريقة.

شكر وتقدير

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