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

Thomas Steiner

KBone

โปรเจ็กต์ kbone (โอเพนซอร์สบน GitHub) จะใช้อะแดปเตอร์จำลอง สภาพแวดล้อมของเบราว์เซอร์ในเลเยอร์การปรับตัว เพื่อให้โค้ดที่เขียนสำหรับเว็บสามารถเรียกใช้ได้โดยไม่ต้อง การเปลี่ยนแปลงในแอปขนาดเล็ก เทมเพลตเริ่มต้นหลายรายการ (ในเทมเพลต สถานที่ แสดงความรู้สึก และ 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;

UI ของ KBone

โปรเจ็กต์ kbone-ui (โอเพนซอร์สบน GitHub) เป็นเฟรมเวิร์ก UI ที่ ช่วยอำนวยความสะดวกทั้งการพัฒนาแอปขนาดเล็กและการพัฒนา Vue.js ด้วย kbone KBone-UI คอมโพเนนต์จะเลียนแบบรูปลักษณ์ของ คอมโพเนนต์แอปขนาดเล็กในตัวของ WeChat (โปรดดูคอมโพเนนต์ด้านบนด้วย) ต การสาธิตที่ทำงานในเบราว์เซอร์โดยตรง ให้คุณสำรวจคอมโพเนนต์ต่างๆ ที่มีอยู่

วันที่

WeUI

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

วันที่

Weweb

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

วันที่

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

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