Mini uygulama açık kaynak projeleri

Kbone

kbone projesi (GitHub'da açık kaynak), uyarlama katmanında tarayıcı ortamını simüle eden bir adaptör uygular. Böylece, web için yazılan kod mini uygulamada değişiklik olmadan çalışabilir. Web geliştiricilerinin ilk katılım deneyimini kolaylaştırmak için Vue, React ve Preact) başlangıç şablonları bulunur.

kbone-cli aracıyla yeni proje oluşturulabilir. Bir sihirbaz, projenin hangi çerçeveyle başlatılacağını sorar. Aşağıdaki kod snippet'inde Preact demo gösterilmektedir. Aşağıdaki kod snippet'inde mp komutu mini uygulamayı, web komutu web uygulamasını, build ise ü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'i, daha sonra bir mini uygulamada ve bir web uygulamasında izomorfik olarak oluşturulan basit bir sayaç bileşenini göstermektedir. Mini uygulamanın ek yükü, tamamen DOM yapısından yola çıkarak oldukça önemlidir.

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) hem mini uygulama geliştirmeyi hem de kbone ile 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 ve tarzını emüle eder (yukarıdaki Bileşenler bölümüne de bakın). Doğrudan tarayıcıda çalışan bir demo mevcut bileşenleri keşfetmenizi sağlar.

WeUI

WeUI, WeChat'in varsayılan görsel deneyimi ile tutarlı olan bir dizi temel stil kitaplığıdır. Resmi WeChat tasarım ekibi, kullanıcıların WeChat dahili web sayfaları ve WeChat mini uygulamaları için tasarımları uyarlayarak kullanıcıların genel kullanım algısını artırdı. button, cell, dialog, progress, toast, article, actionsheet ve icon gibi bileşenler içerir. WXSS ile stilize edilen WeChat mini uygulamaları için weui-wxss (yukarıdaki Stil konusuna 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 Dili

Omi, ön uç çerçeveler arası çerçeveler olduğunu iddia eden bir çerçevedir (GitHub'da açık kaynaktır. Web Bileşenleri, JSX, Sanal DOM, fonksiyonel stil, gözlemci veya Proxy ayarlarını küçük boyuta ve yüksek performansa sahip tek bir çerçevede birleştirir. Amacı, geliştiricilerin bileşenleri bir kez yazmalarını ve bunları Omi, React, Preact, Vue.js veya Angular gibi her yerde kullanmalarını sağlamaktı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 temel alınarak geliştirilmiş, çerçeveler arası kullanıcı arayüzü bileşeni kitaplığıdır (GitHub'da açık kaynak).

WePY

WePY, mini uygulamaların bileşen geliştirmeyi desteklemesine olanak tanıyan bir çerçevedir. Geliştiriciler, derleme öncesi video kullanarak en sevdikleri geliştirme stillerini seçerek mini uygulamalar geliştirebilirler. Çerçevenin ayrıntılı optimizasyonu, Promise ve eşzamansız işlevlerin kullanıma sunulması, mini uygulama projelerinin geliştirilmesini daha kolay ve verimli hale getirir. Aynı zamanda birçok optimize edilmiş ön uç araçları ile çerçeve tasarımı kavramlarını ve fikirlerini çoğunlukla Vue.js'den edinmiş olan WePY aynı zamanda büyüyen bir çerçevedir.

<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ı sunar. Doğrudan web uygulamalarına ve mini uygulamalara eklenebilen, Geliştirici Araçları benzeri bir hata ayıklayıcı sunar. Demo, fırsatları gösterir. vConsole; günlükler, sistem, ağ, öğeler ve depolama sekmeleri içerir.

Weweb

weweb projesi (GitHub'da açık kaynak), WeChat mini uygulamalarının söz dizimiyle uyumlu olduğunu iddia eden Hera mini uygulama çerçevesinin temel ön uç çerçevesidir. Bu sayede, mini uygulamalar gibi web uygulamaları yazabilirsiniz. Belgeler, mini bir uygulamanız varsa weweb sayesinde tarayıcıda çalıştırabileceğinizi garanti ediyor. Denemelerimde bu, mevcut mini uygulamalarda güvenilir şekilde çalışmadı. Bunun nedeni muhtemelen projenin, son zamanlarda derleyicisinin WeChat platformundaki değişiklikleri atlamasına neden olan güncellemeler görmemiş olmasıdır.

Teşekkür

Bu makale Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent ve Keith Gu tarafından incelenmiştir.