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;
<button> 요소가 아닌 점에 유의하세요.
<ph type="x-smartling-placeholder">KBone-ui
kbone-ui 프로젝트 (GitHub의 오픈소스)는 개발자가 는 미니 앱 개발과 kbone을 사용한 Vue.js 개발을 모두 지원합니다. kbone-ui 구성 요소는 포드의 디자인과 분위기를 WeChat의 내장된 미니 앱 구성요소 위의 구성요소도 참고하세요. 가 브라우저에서 직접 실행되는 데모를 사용하면 사용 가능한 구성요소를 살펴보겠습니다
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">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">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 type="x-smartling-placeholder">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 로그, 시스템, 네트워크, 요소, 스토리지 탭이 포함됩니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">웹
weweb 프로젝트 (GitHub의 오픈소스)는 오픈소스 프레임워크이며 호환된다고 주장하는 Hera 미니 앱 프레임워크 WeChat 미니 앱의 구문으로 사용할 수 있으므로 미니 앱처럼 웹 애플리케이션을 작성할 수 있습니다. 이 설명서에 따르면 이미 미니 앱이 있는 경우 있습니다. 실험 결과, 현재 미니 앱에서는 안정적으로 작동하지 않았습니다. 아마도 다음과 같은 이유 때문일 수 있습니다. 최근에 컴파일러가 컴파일러가 WeChat 플랫폼
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">감사의 말씀
이 기사에 대해 리뷰한 사용자 조 메들리, 케이스 바스크, 밀리카 미하즐리야, 앨런 켄트, 그리고 키스 구입니다.