미니 앱 오픈소스 프로젝트

KBN

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;
드림 <ph type="x-smartling-placeholder">
</ph> Preact KBone 템플릿 데모 앱이 WeChat DevTools에서 열렸습니다. DOM 구조를 검사하면 웹 앱에 비해 오버헤드가 상당히 증가합니다.
Preact KBone 템플릿 데모 앱이 WeChat DevTools에서 열렸습니다. 복잡한 DOM 구조와 더하기 및 빼기 버튼이 실제로 <button> 요소가 아닌 점에 유의하세요.
를 통해 개인정보처리방침을 정의할 수 있습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> Preact kbone 템플릿 데모 앱이 웹브라우저에서 열려 있습니다. DOM 구조를 검사하면 Preact 구성요소 코드를 기반으로 예상되는 마크업이 표시됩니다. <ph type="x-smartling-placeholder">
</ph> Preact kbone 템플릿 데모 앱이 웹브라우저에서 열려 있습니다. DOM 구조에 주목하세요.

KBone-ui

kbone-ui 프로젝트 (GitHub의 오픈소스)는 개발자가 는 미니 앱 개발과 kbone을 사용한 Vue.js 개발을 모두 지원합니다. kbone-ui 구성 요소는 포드의 디자인과 분위기를 WeChat의 내장된 미니 앱 구성요소 위의 구성요소도 참고하세요. 가 브라우저에서 직접 실행되는 데모를 사용하면 사용 가능한 구성요소를 살펴보겠습니다

<ph type="x-smartling-placeholder">
</ph> 라디오 버튼, 스위치, 입력, 라벨과 같은 양식 관련 구성요소를 보여주는 kbone-ui 프레임워크의 데모 <ph type="x-smartling-placeholder">
</ph> 양식 관련 구성요소를 보여주는 kbone-ui 데모

WeUI

WeUI는 WeChat의 기본 시각적 환경을 제공합니다. 공식 WeChat 디자인팀이 WeChat 내부를 위한 맞춤 디자인을 제공합니다. 웹 페이지와 WeChat 미니 앱을 통해 더 균일한 사용 인식을 가질 수 있습니다. Kubernetes는 button, cell, dialog, progress, toast, article, actionsheet, icon 등입니다. 거기 다양한 버전의 WeUI, 즉 weui-wxss와 WXSS로 스타일이 지정된 WeChat 미니 앱 (위의 스타일 지정 참고) 웹 앱용 weui.js WeChat React 구성요소의 react-weui.

<ph type="x-smartling-placeholder">
</ph> 양식 관련 구성요소, 즉 스위치를 보여주는 WeUI 프레임워크 데모입니다. <ph type="x-smartling-placeholder">
</ph> 스위치를 보여주는 WeUI 데모 앱

Omi

Omi는 자체 선언한 프런트엔드 교차 프레임워크 프레임워크입니다. (GitHub의 오픈소스. Web Component, 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를 기반으로 개발되었으며, 표준 웹 구성요소의 커스텀 요소를 사용할 수 있습니다.

<ph type="x-smartling-placeholder">
</ph> 양식 관련 구성요소, 즉 스위치를 보여주는 Omiu 프레임워크 데모 <ph type="x-smartling-placeholder">
</ph> 스위치를 보여주는 Omiu 데모 앱

WePY

WePY는 미니 앱에서 살펴봤습니다 사전 컴파일을 통해 개발자는 선호하는 개발 방식을 선택할 수 있음 미니 앱을 개발할 수 있습니다. 프레임워크의 세부적인 최적화와 프로미스 및 비동기 함수 모두 미니 앱 프로젝트를 더 쉽게 개발할 수 있게 해줍니다. 효율적으로 사용할 수 있습니다 동시에, 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>
드림 <ph type="x-smartling-placeholder">
</ph> WePY &#39;시작하기&#39; 문서 페이지에 나와 있습니다
WePY '시작하기' 문서를 참조하세요.

vConsole

vConsole 프로젝트는 가볍고 확장 가능한 모바일 웹페이지용 프런트엔드 개발자 도구입니다. DevTools와 유사한 디버거를 제공하며, 웹 앱과 미니 앱에 직접 삽입됩니다. 가 데모는 여러 기회를 보여줍니다. vConsole 로그, 시스템, 네트워크, 요소, 스토리지 탭이 포함됩니다.

<ph type="x-smartling-placeholder">
</ph> vConsole 데모 앱 하단에 vConsole이 열리고 로그, 시스템, 네트워크, 요소, 스토리지 탭이 있습니다. <ph type="x-smartling-placeholder">
</ph> 요소 탐색기를 보여주는 vConsole 데모 앱

weweb 프로젝트 (GitHub의 오픈소스)는 오픈소스 프레임워크이며 호환된다고 주장하는 Hera 미니 앱 프레임워크 WeChat 미니 앱의 구문으로 사용할 수 있으므로 미니 앱처럼 웹 애플리케이션을 작성할 수 있습니다. 이 설명서에 따르면 이미 미니 앱이 있는 경우 있습니다. 실험 결과, 현재 미니 앱에서는 안정적으로 작동하지 않았습니다. 아마도 다음과 같은 이유 때문일 수 있습니다. 최근에 컴파일러가 컴파일러가 WeChat 플랫폼

<ph type="x-smartling-placeholder">
</ph> `wx.request`, `wx.uploadFile` 등과 같이 지원하는 WeChat API가 나열된 Hera Mini 앱 프레임워크 문서 <ph type="x-smartling-placeholder">
</ph> 지원되는 WeChat API 목록을 보여주는 Hera Mini 앱 프레임워크 문서
를 통해 개인정보처리방침을 정의할 수 있습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> 양식 요소를 표시하는 브라우저에서 실행되도록 webweb으로 컴파일된 webweb 데모 미니 앱입니다. <ph type="x-smartling-placeholder">
</ph> 브라우저에서 실행되도록 webweb으로 컴파일된 webweb 데모 미니 앱입니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.

감사의 말씀

이 기사에 대해 리뷰한 사용자 조 메들리, 케이스 바스크, 밀리카 미하즐리야, 앨런 켄트, 그리고 키스 구입니다.