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

Thomas Steiner

קבון

פרויקט kbone (קוד פתוח ב-GitHub) מטמיע מתאם שמדמה של הדפדפן בשכבת ההתאמה, כך שקוד שנכתב עבור האינטרנט יוכל לפעול בגרסה מיני של אפליקציה. כמה תבניות של סימנים לתחילת פעולה (בין היתר) Vue, תגובה וגם 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;

KMS-ui

פרויקט kbone-ui (קוד פתוח ב-GitHub) היא מסגרת של ממשק משתמש מאפשר גם פיתוח מיני של אפליקציות וגם פיתוח Vue.js באמצעות kbone. ממשק המשתמש-Kbone שמחקים את המראה והתחושה של הרכיבים המובנים של המיני אפליקציות ב-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 היא מסגרת frameworks של קצה קדמי שמצהירה על עצמה (קוד פתוח ב-GitHub. הוא ממזג רכיבי אינטרנט, JSX, וירטואליים DOM, סגנון פונקציונלי, Viewerr (צופה) או שרת proxy (Proxy) ל-framework אחד עם גודל זעיר וביצועים גבוהים. שלו המטרה היא לאפשר למפתחים לכתוב רכיבים פעם אחת ולהשתמש בהם בכל מקום, כמו 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 היא ספריית רכיבים של ממשק המשתמש בכמה framework (קוד פתוח ב-GitHub) שפותח על סמך Omi, שמפיק פלט רכיבים מותאמים אישית של רכיבי אינטרנט רגילים.

WePY

WePY היא מסגרת שמאפשרת למיני אפליקציות לתמוך לעיבוד רכיבים שונים. באמצעות איסוף מראש, המפתחים יכולים לבחור את הפיתוחים האהובים עליהם לפיתוח אפליקציות קטנות. אופטימיזציה מפורטת של המסגרת והצגת הבטחות ופונקציות אסינכרוניות מאפשרות לפתח בקלות רבה יותר פרויקטים קטנים של אפליקציות, יעיל. עם זאת, WePY היא גם מסגרת הולכת ומתפתחת, שסופלה ברובה כלים משודרגים ורעיונות ורעיונות לעיצוב 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 מספק גרסה קלה ומתרחבת לכלי לפיתוח אתרים קדמיים לדפי אינטרנט לנייד. הוא כולל כלי לניפוי באגים דמוי כלי פיתוח, מוחדר ישירות אל אפליקציות אינטרנט ומיני-אפליקציות. א' demo מציג את ההזדמנויות. ה-vConsole כולל כרטיסיות ליומנים, למערכת, לרשת, לאלמנטים ולאחסון.

Weweb

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

אישורים

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