โปรเจ็กต์โอเพนซอร์สของแอปขนาดเล็ก

Thomas Steiner

Twitter GitHub Glitch Mastodon หน้าแรก

หมายเหตุ: โพสต์นี้เป็นส่วนหนึ่งของคอลเล็กชันบทความที่แต่ละบทความสร้างขึ้นเพิ่มเติมจากบทความก่อนหน้า ถ้าคุณเพิ่งมาถึงที่นี่ คุณอาจต้องเริ่มอ่านจากจุดเริ่มต้น

Kbone

โปรเจ็กต์ kbone (โอเพนซอร์สบน GitHub) ติดตั้งอะแดปเตอร์ที่จำลองสภาพแวดล้อมของเบราว์เซอร์ในเลเยอร์การปรับเพื่อให้โค้ดที่เขียนขึ้นสำหรับเว็บทำงานได้โดยไม่มีการเปลี่ยนแปลงในมินิแอป มีเทมเพลตเริ่มต้นหลายรายการ (ในบรรดาเทมเพลตเริ่มต้นหลายรายการ (รวมถึง Vue, React และPreact) ซึ่งทำให้การเริ่มต้นใช้งานสำหรับนักพัฒนาเว็บมาจากเฟรมเวิร์กเหล่านี้

คุณจะสร้างโปรเจ็กต์ใหม่ได้ด้วยเครื่องมือ kbone-cli วิซาร์ดจะถามเกี่ยวกับเฟรมเวิร์กเพื่อเริ่มโครงการ ข้อมูลโค้ดด้านล่างแสดงการสาธิตก่อนดำเนินการ ในข้อมูลโค้ดด้านล่าง คำสั่ง 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) เป็นเฟรมเวิร์ก UI ที่ช่วยทั้งการพัฒนาแอปขนาดเล็กและการพัฒนา 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 (ดูการจัดรูปแบบด้านบน), weui.js สำหรับเว็บแอป และ react-weui สำหรับคอมโพเนนต์ WeChat React

แอปสาธิต WeUI ที่แสดงสวิตช์

โอมิ

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 เป็นไลบรารีคอมโพเนนต์ UI แบบข้ามเฟรมเวิร์ก (โอเพนซอร์สบน GitHub) ที่พัฒนาโดยอิงจาก Omi ซึ่งจะแสดงองค์ประกอบที่กำหนดเองขององค์ประกอบเว็บมาตรฐาน

แอปเดโม Omiu ที่แสดงสวิตช์

WePY

WePY เป็นเฟรมเวิร์กที่ให้แอปขนาดเล็กสนับสนุนการพัฒนาคอมโพเนนต์ นักพัฒนาซอฟต์แวร์สามารถเลือกรูปแบบการพัฒนาที่ชื่นชอบ เพื่อพัฒนาแอปขนาดเล็กผ่านการคอมไพล์ล่วงหน้า การเพิ่มประสิทธิภาพแบบละเอียดของเฟรมเวิร์กและการแนะนำฟังก์ชัน "Promises" และ "Async" ล้วนแล้วแต่ทำให้การพัฒนาโปรเจ็กต์ขนาดเล็กของแอปต่างๆ ง่ายดายและมีประสิทธิภาพมากขึ้น ในขณะเดียวกัน 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>

เอกสารประกอบ "การเริ่มต้นใช้งาน" ของ WePY

vConsole

โปรเจ็กต์ vConsole มีเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ฟรอนท์เอนด์ที่ใช้งานง่ายและขยายได้สําหรับหน้าเว็บบนอุปกรณ์เคลื่อนที่ โดยมีโปรแกรมแก้ไขข้อบกพร่องที่คล้ายเครื่องมือสำหรับนักพัฒนาเว็บ ที่สามารถแทรกลงในเว็บแอปและมินิแอปได้โดยตรง การสาธิตจะแสดงโอกาสเหล่านั้น vConsole มีแท็บสำหรับบันทึก ระบบ เครือข่าย องค์ประกอบ และพื้นที่เก็บข้อมูล

แอปเดโม vConsole ที่แสดงเครื่องมือสํารวจองค์ประกอบ

Weweb

โปรเจ็กต์ weweb (โอเพนซอร์สใน GitHub) เป็นเฟรมเวิร์กฟรอนท์เอนด์ที่สำคัญของเฟรมเวิร์กขนาดเล็กของ Hera ซึ่งอ้างว่าเข้ากันได้กับไวยากรณ์ของแอปขนาดเล็กของ WeChat เพื่อให้คุณเขียนเว็บแอปพลิเคชันในรูปแบบของมินิแอปได้ เอกสารนี้ให้คำสัญญาว่าถ้าคุณมีแอปขนาดเล็กอยู่แล้ว คุณสามารถเรียกใช้ในเบราว์เซอร์ได้ด้วย weweb ในการทดสอบของผม วิธีการนี้ไม่เสถียรสำหรับ Mini App ในปัจจุบัน ส่วนใหญ่อาจเป็นเพราะโครงการยังไม่มีการอัปเดตที่ทำให้คอมไพเลอร์พลาดการเปลี่ยนแปลงในแพลตฟอร์ม WeChat ไปเมื่อเร็วๆ นี้

เอกสารประกอบเกี่ยวกับเฟรมเวิร์กของ Hera mini App ที่แสดงรายการ WeChat API ที่รองรับ

มินิแอปการสาธิต Weweb ที่คอมไพล์ด้วย weweb เพื่อเรียกใช้ในเบราว์เซอร์

ความสำเร็จ: ในบทต่อไป คุณจะได้เรียนรู้วิธีตั้งโปรแกรมสำหรับมินิแอป

กิตติกรรมประกาศ

บทความนี้ได้รับการตรวจสอบโดย Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent และ Keith Gu