Projekty typu open source w miniaplikacji

Thomas Steiner

Uwaga: ten post jest częścią kolekcji artykułów, w której każdy artykuł opiera się na poprzednich. Jeśli trafiłeś(-aś) tu przypadkowo, zacznij czytać od początku.

kbone

Projekt kbone (open source na GitHubie) implementuje adapter, który symuluje środowisko przeglądarki w warstwie adaptacji, dzięki czemu kod napisany na potrzeby internetu może działać bez zmian w miniaplikacji. Dostępnych jest kilka szablonów początkowych (m.in. Vue, React i Preact), które ułatwiają deweloperom internetowym korzystającym z tych frameworków rozpoczęcie pracy.

Nowy projekt można utworzyć za pomocą narzędzia kbone-cli. Kreator zapyta, z jakiego frameworka chcesz skorzystać. Poniższy fragment kodu przedstawia wersję demonstracyjną Preact. W poniższym fragmencie kodu polecenie mp tworzy miniaplikację, polecenie web tworzy aplikację internetową, a polecenie 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 izomorficznie renderowany w miniaplikacji i aplikacji internetowej. Narzut miniaplikacji jest znaczny, co widać po strukturze 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;

Aplikacja w wersji demonstracyjnej szablonu Preact kbone otwarta w Narzędziach deweloperskich WeChat. Zwróć uwagę na złożoną strukturę DOM oraz na to, że przyciski plus i minus nie są elementami <button>.

Aplikacja w wersji demonstracyjnej szablonu Preact kbone otwarta w przeglądarce. Zwróć uwagę na strukturę DOM.

kbone-ui

Projekt kbone-ui (open source na GitHubie) to framework interfejsu, który ułatwia zarówno tworzenie miniaplikacji, jak i tworzenie aplikacji w Vue.js za pomocą kbone. Komponenty kbone-ui emulują wygląd i działanie wbudowanych komponentów miniaplikacji WeChat (patrz też Komponenty powyżej). Wersja demonstracyjna, która działa bezpośrednio w przeglądarce, umożliwia zapoznanie się z dostępnymi komponentami.

Wersja demonstracyjna kbone-ui przedstawiająca komponenty związane z formularzami.

WeUI

WeUI to zestaw podstawowych bibliotek stylów zgodnych z domyślnym wyglądem WeChat's. Oficjalny zespół projektowy WeChat dostosował projekty do wewnętrznych stron internetowych WeChat i miniaplikacji WeChat, aby ujednolicić sposób postrzegania przez użytkowników. Obejmuje 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 stylizowanych za pomocą WXSS (patrz Stylizowanie powyżej), weui.js dla aplikacji internetowych i react-weui dla komponentów WeChat React.

Aplikacja demonstracyjna WeUI przedstawiająca przełączniki.

Omi

Omi to framework frontendowy, który obsługuje wiele frameworków (open source na GitHubie. Łączy on komponenty internetowe, JSX, wirtualny DOM, styl funkcjonalny, obserwator lub Proxy w jeden framework o niewielkim rozmiarze i wysokiej wydajności. Jego celem jest umożliwienie deweloperom pisania komponentów raz i używania ich wszędzie, np. w Omi, React, Preact, Vue.js lub Angular. Pisanie komponentów Omi jest bardzo intuicyjne i prawie nie wymaga kodu.

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 obsługująca wiele platform (open source na GitHubie) opracowana na podstawie Omi, która generuje elementy niestandardowe standardowych komponentów internetowych.

Aplikacja w wersji demonstracyjnej Omiu przedstawiająca przełączniki.

WePY

WePY to framework, który umożliwia miniaplikacjom obsługę tworzenia komponentów. Dzięki wstępnej kompilacji deweloperzy mogą wybrać swój ulubiony styl tworzenia miniaplikacji. Szczegółowa optymalizacja frameworka oraz wprowadzenie obiektów typu Promise i funkcji asynchronicznych ułatwiają i przyspieszają programowanie projektów miniaplikacji. Jednocześnie WePY to rozwijający się framework, który w dużej mierze wchłonął niektóre zoptymalizowane narzędzia frontendowe oraz koncepcje i pomysły dotyczące projektowania frameworków, 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>

Dokumentacja „Pierwsze kroki” WePY.

vConsole

Projekt vConsole to lekkie, rozszerzalne narzędzie dla deweloperów frontendowych do stron internetowych na urządzeniach mobilnych. Oferuje debugger podobny do Narzędzi deweloperskich, który można wstrzyknąć bezpośrednio do aplikacji internetowych i miniaplikacji. Wersja demonstracyjna przedstawia możliwości. vConsole zawiera karty logów, systemu, sieci, elementów i miejsca na dane.

Aplikacja w wersji demonstracyjnej vConsole przedstawiająca eksplorator elementów.

weweb

Projekt weweb (open source na GitHubie) to podstawowy framework frontendowy frameworka miniaplikacji Hera, który jest zgodny ze składnią miniaplikacji WeChat, dzięki czemu możesz pisać aplikacje internetowe w sposób podobny do miniaplikacji. Dokumentacja obiecuje, że jeśli masz już miniaplikację, możesz ją uruchomić w przeglądarce dzięki weweb. W moich eksperymentach nie działało to niezawodnie w przypadku obecnych miniaplikacji, prawdopodobnie dlatego, że projekt nie był ostatnio aktualizowany, co powoduje, że kompilator nie uwzględnia zmian na platformie WeChat.

Dokumentacja frameworka miniaplikacji Hera przedstawiająca listę obsługiwanych interfejsów API WeChat.

Miniaplikacja demonstracyjna weweb skompilowana za pomocą weweb do uruchomienia w przeglądarce.

Sukces: w następnym rozdziale dowiesz się, jak programować w sposób podobny do miniaplikacji.

Podziękowania

Ten artykuł został sprawdzony przez Joe Medleya, Kayce Basques, Milicę Mihajliję, Alana Kenta, i Keitha Gu.