Projekty typu open source w miniaplikacji

Thomas Steiner

Kbone

Projekt kbone (open source w GitHub) implementuje adapter, który symuluje w warstwie adaptacyjnej, tak aby kod napisany do internetu mógł działać bez w miniaplikacji. Kilka szablonów początkowych (w tym Vue, Reaguj, Preakcja), które dla programistów stron internetowych korzystających z tych platform.

Nowy projekt można utworzyć za pomocą narzędzia kbone-cli. Kreator pyta, jaką platformę zainicjować w projektach AI. Fragment kodu poniżej pokazuje prezentację Preact. We fragmencie kodu poniżej mp tworzy miniaplikację, polecenie web tworzy aplikację internetową, a build tworzy rozszerzenie produkcyjnej wersji aplikacji internetowej.

npx kbone-cli init my-app
cd my-app
npm run mp
npm run web
npm run build

Fragment kodu poniżej pokazuje prosty komponent licznika, który jest następnie renderowany izomorficznie w z miniaplikacjami i aplikacją internetową. Koszty z miniaplikacji są znaczne – jak widać w DOM. do jego struktury.

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;

. .

Kbone-UI

Projekt kbone-ui (open source w GitHub) to platforma UI, Ułatwia tworzenie miniaplikacji oraz kodowanie Vue.js przy użyciu kbone. Interfejsy KBone-UI komponenty naśladują wygląd i sposób działania Wbudowane komponenty miniaplikacji WeChat (zobacz też Komponenty powyżej). O demonstracja uruchamiana bezpośrednio w przeglądarce, przyjrzymy się dostępnym komponentom.

WeUI

WeUI to zestaw podstawowych bibliotek stylów zgodnych z zasadami WeChat domyślny interfejs wizualny. Oficjalny zespół projektowy WeChat przygotował dostosowane projekty do użytku wewnętrznego w serwisie WeChat. strony internetowe i miniaplikacje WeChat, bardziej jednolite postrzeganie korzystania. Zawiera komponenty na przykład button, cell, dialog, progress, toast, article, actionsheet i icon. OK to różne wersje WeUI, np. weui-wxss, miniaplikacje WeChat z użyciem WXSS (patrz Styl powyżej). weui.js w przypadku aplikacji internetowych oraz react-weui dla komponentów WeChat React.

Omi

Omi to samodzielna platforma do obsługi wielu ramek frontendu (open source na GitHubie. Łączy komponenty sieciowe, JSX, Virtual DOM, styl funkcjonalny, obserwator lub serwer proxy w jednej platformie o niewielkim rozmiarze i wysokiej wydajności. To pozwala programistom na jednorazowe pisanie komponentów i używanie ich wszędzie – na przykład w Omi, React, Preact Vue.js czy Angular. Pisanie komponentów Omi jest bardzo intuicyjne i nie zawiera powtarzalnych elementów.

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 międzyplatformowego (open source z GitHub) opracowanego na bazie Omi, który generuje elementów niestandardowych standardowych komponentów sieciowych.

WePY

WePY to platforma, która umożliwia miniaplikacji programowanie złożone. Dzięki wstępnej kompilacji deweloper może wybrać ulubiony tytuł do tworzenia miniaplikacji. Szczegółowa optymalizacja struktury i wprowadzenie Obietnice i funkcje asynchroniczne ułatwiają i ułatwiają tworzenie miniprojektów aplikacji efektywne. Jednocześnie WePY to platforma rozwijająca się, która w dużej mierze pochłania zoptymalizowane narzędzia frontendu oraz koncepcje i pomysły projektowania 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 zapewnia prostszy, rozszerzalny frontendowej wersji narzędzia dla programistów frontendu dla mobilnych stron internetowych. Zawiera debuger podobny do Narzędzi deweloperskich, wstrzykiwanych bezpośrednio do aplikacji internetowych i miniaplikacji. O demo pokazuje dostępne możliwości. Konsola vConsole zawiera karty dzienników, systemu, sieci, elementów i pamięci.

Weweb

Projekt weweb (open source w GitHub) to podstawowa platforma frontendu platforma miniaplikacji Hera, która rzekomo jest zgodna dzięki składni miniaplikacji WeChat, można więc pisać aplikacje internetowe tak samo jak miniaplikacje. zgodnie z dokumentacją obiecuje, że jeśli masz już miniaplikację, możesz ją uruchomić w przeglądarce dzięki Weweb Z moich eksperymentów wynikało, że w aktualnych miniaplikacjach nie działa to zbyt dobrze. w projekcie nie zarejestrowano ostatnio aktualizacji, przez co kompilator przeoczył Platforma WeChat.

.

.

Podziękowania

Ten artykuł zrecenzował(a) Joe Medley Kayce Basques Milica Mihajlija, Alan Kent, i Keith Gu.