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

Thomas Steiner

קבון

הפרויקט 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

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

Omi

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

WePY

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

Weweb

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

אישורים

הבדיקה של המאמר בוצעה על ידי Joe Medley,‏ Kayce Basques,‏ Milica Mihajlija,‏ Alan Kent ו-Keith Gu.