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

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

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

Omi

Omi เป็นเฟรมเวิร์กแบบข้ามเฟรมเวิร์กสำหรับส่วนหน้าตามที่ผู้สร้างกล่าวไว้ (โอเพนซอร์สบน GitHub โดยผสานรวม Web Components, JSX, Virtual DOM, สไตล์ฟังก์ชัน, Observer หรือ 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 เป็นเฟรมเวิร์กที่ช่วยให้มินิแอปต่างๆ รองรับการพัฒนาแบบแยกส่วน การคอมไพล์ล่วงหน้าช่วยให้นักพัฒนาแอปเลือกสไตล์การพัฒนาที่ชื่นชอบเพื่อพัฒนามินิแอปได้ การเพิ่มประสิทธิภาพเฟรมเวิร์กอย่างละเอียดและการเปิดตัว 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