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

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;
แอปเดโมเทมเพลต Preact kbone ที่เปิดในเครื่องมือสำหรับนักพัฒนาเว็บใน WeChat การตรวจสอบโครงสร้าง DOM จะแสดงค่าใช้จ่ายในการดำเนินการที่สำคัญเมื่อเทียบกับเว็บแอป
แอปเดโมเทมเพลต Preact kbone ที่เปิดใน WeChat DevTools โปรดสังเกตโครงสร้าง DOM ที่ซับซ้อนและวิธีที่ปุ่มบวกและลบไม่ใช่องค์ประกอบ <button>
แอปเดโมเทมเพลต Preact kbone เปิดขึ้นในเว็บเบราว์เซอร์ การตรวจสอบโครงสร้าง DOM จะแสดงมาร์กอัปที่ควรจะเป็นตามโค้ดคอมโพเนนต์ Preact
แอปเดโมเทมเพลต Preact kbone เปิดขึ้นในเว็บเบราว์เซอร์ จดโครงสร้าง DOM ไว้

UI ของ KBone

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

การสาธิตเฟรมเวิร์ก kbone-ui ที่แสดงคอมโพเนนต์ที่เกี่ยวข้องกับแบบฟอร์ม เช่น ปุ่มตัวเลือก สวิตช์ อินพุต และป้ายกำกับ
การสาธิต 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 ที่แสดงคอมโพเนนต์ที่เกี่ยวข้องกับแบบฟอร์ม ซึ่งก็คือสวิตช์
แอปสาธิต WeUI ที่แสดงสวิตช์

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

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

การสาธิตเฟรมเวิร์ก Omiu ที่แสดงคอมโพเนนต์ที่เกี่ยวข้องกับแบบฟอร์ม เช่น สวิตช์
แอปเดโมของ Omiu ที่แสดงสวิตช์

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>
หน้าเอกสารประกอบ &quot;เริ่มต้นใช้งาน&quot; ของ WePY ที่แสดงขั้นตอนแรกๆ ในการเริ่มต้นใช้งาน
เอกสารประกอบ "เริ่มต้นใช้งาน" ของ WePY

vConsole

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

แอปสาธิต vConsole ซึ่งจะเปิดขึ้นที่ด้านล่างและมีแท็บสำหรับบันทึก ระบบ เครือข่าย องค์ประกอบ และพื้นที่เก็บข้อมูล
แอปสาธิต vConsole ที่แสดงเครื่องมือสำรวจองค์ประกอบ

weweb

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

เอกสารประกอบของเฟรมเวิร์กมินิแอป Hera ที่แสดงรายการ WeChat API ที่รองรับ เช่น `wx.request`, `wx.uploadFile` ฯลฯ
เอกสารประกอบเฟรมเวิร์กมินิแอป Hera ที่แสดงรายการ API ของ WeChat ที่รองรับ
มินิแอปเดโม weweb ที่คอมไพล์ด้วย weweb เพื่อเรียกใช้ในเบราว์เซอร์ที่แสดงองค์ประกอบแบบฟอร์ม
มินิแอปเดโม weweb ที่คอมไพล์ด้วย weweb เพื่อทำงานในเบราว์เซอร์

ขอขอบคุณ

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