Mini uygulama açık kaynak projeleri

Thomas Steiner

kbone

kbone projesi (GitHub'da açık kaynak), web için yazılan kodun mini bir uygulamada değişiklik yapılmadan çalışabilmesi amacıyla uyum sağlama katmanında tarayıcı ortamını simüle eden bir bağdaştırıcı uygular. Bu çerçevelerden gelen web geliştiricilerinin ilk katılım deneyimini kolaylaştıran çeşitli başlangıç şablonları (Vue, React ve Preact dahil) mevcuttur.

kbone-cli aracıyla yeni bir proje oluşturulabilir. Bir sihirbaz, projenin hangi çerçeveyle başlatılacağını sorar. Aşağıdaki kod snippet'inde Preact demosu gösterilmektedir. Aşağıdaki kod snippet'inde mp komutu mini uygulamayı, web komutu web uygulamasını ve build komutu üretim web uygulamasını oluşturur.

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

Aşağıdaki kod snippet'inde, daha sonra bir mini uygulamada ve web uygulamasında eş biçimli olarak oluşturulan basit bir sayaç bileşeni gösterilmektedir. Yalnızca DOM yapısına bakıldığında mini uygulamanın yükü önemli düzeydedir.

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

kbone-ui projesi (GitHub'da açık kaynak), kbone ile hem mini uygulama geliştirmeyi hem de Vue.js geliştirmeyi kolaylaştıran bir kullanıcı arayüzü çerçevesidir. kbone-ui bileşenleri, WeChat'in yerleşik mini uygulama bileşenlerinin görünümünü ve tarzını taklit eder (yukarıdaki Bileşenler bölümüne de bakın). Doğrudan tarayıcıda çalışan bir demo ile mevcut bileşenleri keşfedebilirsiniz.

WeUI

WeUI, WeChat'in varsayılan görsel deneyimiyle tutarlı olan bir temel stil kitaplık grubudur. Resmi WeChat tasarım ekibi, kullanıcıların kullanım algısını daha tek tip hale getirmek amacıyla WeChat dahili web sayfaları ve WeChat mini uygulamalarına yönelik tasarımlar hazırladı. button, cell, dialog, progress, toast, article, actionsheet ve icon gibi bileşenleri içerir. WXSS ile stilize edilmiş WeChat mini uygulamaları için weui-wxss (yukarıdaki Stil bölümüne bakın), web uygulamaları için weui.js ve WeChat React bileşenleri için react-weui gibi farklı WeUI sürümleri mevcuttur.

Omi

Omi, kendi kendini tanımlayan bir ön uç çerçeveler çerçevesidir (GitHub'da açık kaynak. Web Bileşenleri, JSX, Sanal DOM, işlevsel stil, gözlemci veya Proxy'yi küçük boyut ve yüksek performans sunan tek bir çerçevede birleştirir. Amacıyla geliştiricilerin bileşenleri bir kez yazıp Omi, React, Preact, Vue.js veya Angular gibi her yerde kullanmasına olanak tanımaktır. Omi bileşenlerinin yazılması oldukça kolaydır ve neredeyse hiçbir ortak metin içermez.

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 Dili

Omiu, Omi'ye dayalı olarak geliştirilmiş, standart web bileşenlerinin özel öğelerini yayınlayan, çerçeveler arası bir kullanıcı arayüzü bileşen kitaplığıdır (GitHub'da açık kaynak).

WePY

WePY, mini uygulamaların bileşen tabanlı geliştirmeyi desteklemesine olanak tanıyan bir çerçevedir. Geliştiriciler, önceden derleme özelliğini kullanarak mini uygulamalar geliştirmek için en sevdikleri geliştirme stilini seçebilirler. Çerçevenin ayrıntılı optimizasyonu, Promise'lerin ve eşzamansız işlevlerin kullanıma sunulması, mini uygulama projelerinin geliştirilmesini daha kolay ve verimli hale getirir. Aynı zamanda, WePY büyümekte olan bir çerçevedir. Bu çerçeve, çoğu Vue.js olmak üzere bazı optimize edilmiş ön uç araçlarını ve çerçeve tasarımı kavramlarını ve fikirlerini büyük oranda benimsemiştir.

<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 projesi, mobil web sayfaları için hafif ve genişletilebilir bir ön uç geliştirici aracı sağlar. Doğrudan web uygulamalarına ve mini uygulamalara yerleştirilebilecek, DevTools benzeri bir hata ayıklayıcı sunar. Demo ile fırsatlar tanıtılır. vConsole'da günlükler, sistem, ağ, öğeler ve depolama alanı sekmeleri bulunur.

weweb

weweb projesi (GitHub'da açık kaynak), Hera mini uygulama çerçevesinin temel ön uç çerçevesidir. Bu çerçeve, WeChat mini uygulamalarının söz dizimiyle uyumlu olduğunu iddia eder. Böylece mini uygulamalar gibi web uygulamaları yazabilirsiniz. Belgelerde, halihazırda bir mini uygulamanız varsa weweb sayesinde bunu tarayıcıda çalıştırabileceğiniz belirtiliyor. Denemelerimizde bu yöntem, mevcut mini uygulamalarda güvenilir bir şekilde çalışmadı. Bunun nedeni büyük olasılıkla, projenin yakın zamanda güncellenmemesinden dolayı derleyicinin WeChat platformundaki değişiklikleri kaçırmasıdır.

Teşekkür ederiz

Bu makale; Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent ve Keith Gu tarafından incelendi.