פרויקטים של קוד פתוח למיני אפליקציות

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

בקטע הקוד שבהמשך מוצג רכיב פשוט של מונה, שמעובד באופן איזומורפי במיני אפליקציה ובאפליקציית אינטרנט. העומס של המיני אפליקציה משמעותי, אם שופטים רק לפי מבנה ה-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 עם סגנון WXSS (ראו סגנון למעלה),‏ weui.js לאפליקציות אינטרנט ו-react-weui לרכיבי WeChat React.

Omi

‫Omi הוא פריימוורק (framework) של קוד פתוח (ב-GitHub) שמוגדר כפריימוורק חוצה-פלטפורמות של חזית האתר. הוא משלב רכיבי אינטרנט, 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 היא מסגרת שמאפשרת לאפליקציות מיני לתמוך בפיתוח מבוסס-רכיבים. באמצעות קומפילציה מראש, מפתחים יכולים לבחור את סגנון הפיתוח המועדף עליהם כדי לפתח אפליקציות מיני. האופטימיזציה המפורטת של המסגרת וההוספה של Promises ופונקציות אסינכרוניות מקלים על הפיתוח של פרויקטים של מיני-אפליקציות והופכים אותו ליעיל יותר. במקביל, WePY היא גם framework צומחת, שספגה במידה רבה כמה כלים אופטימיזציה לחלק הקדמי של האתר ורעיונות ומושגים לעיצוב framework, בעיקר מ-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 מספק כלי קל משקל וניתן להרחבה למפתחי חזית (frontend) עבור דפי אינטרנט לנייד. הוא מציע מאתר באגים שדומה לכלי הפיתוח, שאפשר להטמיע ישירות באפליקציות אינטרנט ובאפליקציות מיני. הדגמה מציגה את ההזדמנויות. ה-vConsole כולל כרטיסיות ליומנים, למערכת, לרשת, לרכיבים ולאחסון.

weweb

פרויקט weweb (קוד פתוח ב-GitHub) הוא מסגרת הקצה הקדמי הבסיסית של מסגרת אפליקציות המיני Hera, שטוענת לתאימות עם התחביר של אפליקציות מיני של WeChat. כך תוכלו לכתוב אפליקציות אינטרנט בדומה לאפליקציות מיני. במסמכים מובטח שאם כבר יש לכם מיני-אפליקציה, תוכלו להריץ אותה בדפדפן באמצעות weweb. בניסויים שלי, זה לא עבד בצורה מהימנה באפליקציות מיני קיימות, כנראה כי לא בוצעו עדכונים בפרויקט לאחרונה, ולכן הקומפיילר לא זיהה שינויים בפלטפורמת WeChat.

תודות

המאמר הזה נבדק על ידי ג'ו מדלי, קייסי בסקס, מיליקה מיחייליה, אלן קנט וקית' גו.