Kbone
Projekt kbone (na GitHubie) implementuje adapter, który w warstwie adaptacyjnej symuluje środowisko przeglądarki, dzięki czemu kod napisany w internecie może działać w miniaplikacji bez wprowadzania zmian. Istnieje kilka szablonów startowych (w tym Vue, React i Preact), które ułatwiają wprowadzenie z tych platform.
Nowy projekt można utworzyć za pomocą narzędzia kbone-cli. Kreator pyta o platformę, na której zainicjujesz projekt. Fragment kodu poniżej pokazuje prezentację preact. We fragmencie kodu poniżej polecenie mp tworzy miniaplikację, polecenie web kompiluje aplikację internetową, a build tworzy produkcyjną aplikację internetową.
npx kbone-cli init my-app
cd my-app
npm run mp
npm run web
npm run build
Poniższy fragment kodu przedstawia prosty komponent licznika, który jest następnie renderowany izomorficznie w miniaplikacji i aplikacji internetowej. Przeciążenie miniaplikacji jest istotne, ponieważ wynika to z struktury 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
Projekt kbone-ui (open source na GitHubie) to platforma interfejsu, która ułatwia tworzenie miniaplikacji i tworzenie Vue.js za pomocą kbone. Komponenty kbone-ui emulują wygląd i styl wbudowanych minikomponentów WeChat (patrz Komponenty powyżej). Wersja demonstracyjna uruchomiona bezpośrednio w przeglądarce pozwala zapoznać się z dostępnymi komponentami.
WeUI
WeUI to zestaw podstawowych bibliotek stylów zgodnych z domyślnym interfejsem wizualnym WeChat. Zespół projektowy WeChat opracował spersonalizowane projekty wewnętrznych stron internetowych i miniaplikacji WeChat, aby ujednolicić postrzeganie tej aplikacji przez użytkowników. Zawiera komponenty takie jak button, cell, dialog, progress, toast, article, actionsheet i icon. Dostępne są różne wersje WeUI, np. weui-wxss dla miniaplikacji WeChat z technologią WXSS (patrz Styl powyżej), weui.js dla aplikacji internetowych i react-weui dla komponentów WeChat React.
Omi
Omi to samodzielna platforma wieloplatformowa frontendu (open source na GitHubie). Łączy ona komponenty Web, JSX, Virtual DOM, styl funkcjonalny, obserwator lub serwer proxy w jedną platformę o niewielkim rozmiarze i dużej wydajności. Jego celem jest umożliwienie programistom jednorazowego napisania komponentów i używania ich we wszystkich miejscach, takich jak Omi, React, Preact, Vue.js czy Angular. Pisanie komponentów Omi jest bardzo intuicyjne i nie wymaga powtórzeń.
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 to biblioteka komponentów interfejsu użytkownika (open source na GitHubie) opracowana na podstawie Omi, która wyświetla niestandardowe elementy standardowych komponentów sieciowych.
WePY
WePY to platforma, która umożliwia miniaplikacje w zakresie kompleksowego programowania. Dzięki wstępnej kompilacji deweloperzy mogą wybrać swój ulubiony styl tworzenia miniaplikacji. Szczegółowa optymalizacja platformy oraz wprowadzenie obietnic i funkcji asynchronicznych ułatwiają i zwiększają wydajność tworzenia miniprojektów aplikacji. Jednocześnie platforma WePY jest ciągle rozwijającą się platformą, która w dużej mierze wzięła udział w niektórych zoptymalizowanych narzędziach frontendowych oraz koncepcjach i pomysłach związanych z projektowaniem platformy, głównie z 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
Projekt vConsole udostępnia proste i rozszerzalne narzędzie dla programistów frontendu do obsługi mobilnych stron internetowych. Jest to debuger podobny do DevTools, który można wstawić bezpośrednio do aplikacji internetowych i miniaplikacji. Prezentacja prezentuje możliwości. vConsole zawiera karty logów, systemu, sieci, elementów i pamięci.
Weweb
Projekt weweb (open source w GitHubie) to bazowa platforma frontendowa platformy Hera, która według deklaracji jest zgodna ze składnią miniaplikacji WeChat, dzięki czemu można pisać aplikacje internetowe w formie miniaplikacji. W dokumentacji obiecujemy, że jeśli masz już miniaplikację, możesz uruchomić ją w przeglądarce dzięki technologii weweb. W moich eksperymentach nie działało to dobrze w przypadku obecnych miniaplikacji prawdopodobnie dlatego, że w projekcie nie pojawiły się ostatnio aktualizacje, które sprawiały, że kompilator nie uwzględniał zmian na platformie WeChat.
Podziękowania
Ten artykuł zrecenzowali Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent i Keith Gu.