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

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

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

WePY

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

Weweb

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

ขอขอบคุณ

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