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

ينفِّذ مشروع 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. يُظهر فحص بنية DOM زيادة كبيرة في وقت الاستجابة مقارنةً بتطبيق الويب.
تم فتح تطبيق الإصدار التجريبي من نموذج Preact kbone في أدوات تطوير WeChat. لاحِظ بنية DOM المعقّدة وكيف أنّ زرَّي الإضافة والطرح ليسا في الواقع عناصر <button>.
تم فتح التطبيق التجريبي لنموذج Preact kbone في متصفّح الويب. يؤدي فحص بنية DOM إلى عرض الترميز المتوقّع استنادًا إلى رمز مكوّن 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

Omi هو إطار عمل متعدّد الإطارات يُستخدم في الواجهة الأمامية ويُعرّف نفسه على أنّه كذلك، وهو مفتوح المصدر على GitHub. ويدمج Web Components و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 هي مكتبة مكونات واجهة مستخدِم تناسب جميع إطارات العمل (مفتوحة المصدر على GitHub) تم تطويرها استنادًا إلى Omi، وهي تُخرج عناصر مخصّصة لمكونات الويب العادية.

عرض توضيحي لإطار عمل Omiu يعرض مكوّنات متعلّقة بالنماذج، وهي مفاتيح التحكّم
تطبيق 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>
صفحة مستندات &quot;البدء&quot; في WePY تعرض الخطوات الأولى للبدء.
يمكنك الاطّلاع على مستندات "البدء" في WePY.

vConsole

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

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

weweb

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

توثيق إطار عمل التطبيقات المصغّرة Hera الذي يسرد واجهات برمجة تطبيقات WeChat المتوافقة معه، مثل wx.request وwx.uploadFile وما إلى ذلك
مستندات إطار عمل التطبيقات المصغّرة Hera تعرض قائمة واجهات برمجة تطبيقات WeChat المتوافقة.
تطبيق weweb التجريبي المصغر الذي تم تجميعه باستخدام weweb لتشغيله في المتصفّح الذي يعرض عناصر النموذج
تطبيق weweb التجريبي المصغر الذي تم تجميعه باستخدام weweb لتشغيله في المتصفّح

الشكر والتقدير

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