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;
<button> 요소가 아닌 방식에 유의하세요.
kbone-ui
kbone-ui 프로젝트(GitHub의 오픈소스)는 미니 앱 개발은 물론 kbone을 사용하여 Vue.js 개발을 용이하게 하는 UI 프레임워크입니다. kbone-ui 구성요소는 WeChat에 내장된 미니 앱 구성요소의 디자인과 분위기를 에뮬레이션합니다(위의 구성요소도 참고). 브라우저에서 직접 실행되는 데모를 사용하면 사용 가능한 구성요소를 살펴볼 수 있습니다.
WeUI
WeUI는 WeChat의 기본 시각적 환경과 일치하는 기본 스타일 라이브러리 집합입니다. 공식 WeChat 디자인팀은 사용자 인식을 보다 균일하게 인식하도록 WeChat 내부 웹페이지와 WeChat 미니 앱을 위한 디자인을 맞춤 제작했습니다. 여기에는 button, cell, dialog, progress, toast, article, actionsheet, icon와 같은 구성요소가 포함됩니다. WXSS로 스타일이 지정된 WeChat 미니 앱의 경우 weui-wxss (위의 스타일 지정 참고), 웹 앱용 weui.js, WeChat React 구성요소의 경우 react-weui 등 다양한 버전의 WeUI를 사용할 수 있습니다.
오미
Omi는 자체 선언한 프런트엔드 교차 프레임워크 프레임워크(GitHub의 오픈소스)입니다. 웹 구성요소, JSX, 가상 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는 Omi를 기반으로 개발된 교차 프레임워크 UI 구성요소 라이브러리(GitHub의 오픈소스)로, 표준 웹 구성요소의 맞춤 요소를 출력합니다.
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>
vConsole
vConsole 프로젝트는 모바일 웹페이지를 위한 확장 가능한 경량형 프런트엔드 개발자 도구를 제공합니다. 웹 앱 및 미니 앱에 직접 삽입할 수 있는 DevTools와 유사한 디버거를 제공합니다. 데모를 통해 기회를 확인할 수 있습니다. vConsole에는 로그, 시스템, 네트워크, 요소, 스토리지 탭이 있습니다.
Weweb
weweb 프로젝트(GitHub의 오픈소스)는 WeChat 미니 앱의 구문과 호환된다고 주장하는 Hera 미니 앱 프레임워크의 기본 프런트엔드 프레임워크이므로, 미니 앱 방식으로 웹 애플리케이션을 작성할 수 있습니다. 이 문서에서는 이미 미니 앱이 있는 경우 webweb을 통해 브라우저에서 미니 앱을 실행할 수 있다고 설명합니다. 제 실험에서 이 기능은 현재 미니 앱에서 안정적으로 작동하지 않았습니다. 이는 프로젝트에서 최근에 업데이트를 확인하여 컴파일러가 WeChat 플랫폼의 변경사항을 누락하도록 한 적이 없기 때문일 수 있습니다.
감사의 말씀
이 자료는 Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, Keith Gu가 검토했습니다.