미니 앱 오픈소스 프로젝트

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;