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

תומאס סטיינר

Twitter GitHub Glitch Mastodon דף הבית

הערה: הפוסט הזה הוא חלק מאוסף של מאמרים שבהם כל מאמר מסתמך על מאמרים קודמים. אם הגעת לכאן, מומלץ להתחיל לקרוא מההתחלה.

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;

אפליקציית ההדגמה של התבנית Preact kbone נפתחה ב-WeChat DevTools. חשוב לשים לב למבנה ה-DOM המורכב ולהבין איך לחצני הפלוס והמינוס הם למעשה לא רכיבי <button>.

אפליקציית ההדגמה של התבנית Preact kbone נפתחה בדפדפן האינטרנט. חשוב לשים לב למבנה ה-DOM.

kbone-ui

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

אפליקציית ההדגמה של WeUI שמוצגים בה מתגים.

אומי

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

אפליקציית ההדגמה של Omiu שמוצגים בה מתגים.

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>

תיעוד של WePY "שנתחיל?".

vConsole

פרויקט vConsole מספק כלי קל ומתרחב למפתחים של ממשקי קצה לדפי אינטרנט לנייד. הוא כולל כלי לניפוי באגים דמוי כלי פיתוח, שאפשר להחדיר ישירות לאפליקציות אינטרנט ולמיני-אפליקציות. הדגמה מציגה את ההזדמנויות. ה-vConsole כולל כרטיסיות ליומנים, למערכת, לרשת, לרכיבים ולאחסון.

אפליקציית הדגמה של vConsole שמציגה את סייר הרכיבים.

weweb, וווב, ווב

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

מסמכי תיעוד של ה-framework של אפליקציית Hera mini, שמציג רשימה של ממשקי WeChat API נתמכים.

גרסת המיני של אפליקציית weweb להדגמה מבוססת על אתר אינטרנט שפועל בדפדפן.

הצלחה: בפרק הבא נסביר איך לתכנת את גרסת המיני-אפליקציה.

אישורים

המאמר הזה נכתב על ידי Joe Medley, Kayce Basques, Milica Mihajlija, אלן קנט וקית' גו.