kbone
kbone projesi (GitHub'da açık kaynaklıdır), uyarlama katmanında bir tarayıcı ortamını simüle eden bir bağdaştırıcı uygular. Böylece web için yazılan kod, mini uygulamada değişiklik yapılmadan çalıştırılabilir. Bu çerçevelerden gelen web geliştiricilerin oryantasyon sürecini kolaylaştıran çeşitli başlangıç şablonları (Vue, React ve Preact gibi) mevcuttur.
kbone-cli aracıyla yeni bir proje oluşturulabilir. Bir sihirbaz, projeyi hangi çerçeveyle başlatmak istediğinizi sorar. Aşağıdaki kod snippet'inde Preact demosunu görebilirsiniz. Aşağıdaki kod snippet'inde mp komutu mini uygulamayı, web komutu web uygulamasını oluşturur 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, önce basit bir sayaç bileşeni gösterilir, ardından bu bileşen izomorfik olarak bir mini uygulamada ve bir web uygulamasında oluşturulur. Yalnızca DOM yapısına bakıldığında mini uygulamanın ek yükünün önemli olduğu görülür.
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> öğeleri olmadığına dikkat edin.
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ü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ı bir dizi temel stil kitaplığıdır. Resmi WeChat tasarım ekibi, kullanıcıların kullanım algısını daha tekdüze hale getirmek için WeChat'in dahili web sayfaları ve WeChat mini uygulamaları için özel tasarımlar hazırladı. button, cell, dialog, progress, toast, article, actionsheet ve icon gibi bileşenleri içerir. WeUI'nin farklı sürümleri mevcuttur. Örneğin, 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.
Omi
Omi, kendisini ön uçta çerçeveler arası bir çerçeve olarak tanımlıyor (GitHub'da açık kaynaklı). Web Components, JSX, Virtual DOM, işlevsel stil, observer veya Proxy'yi küçük boyutlu ve yüksek performanslı tek bir çerçevede birleştirir. Bu çerçeve, geliştiricilerin bileşenleri bir kez yazıp her yerde (ör. Omi, React, Preact, Vue.js veya Angular) kullanmasına olanak tanımayı amaçlar. Omi bileşenleri yazmak çok kolaydır ve neredeyse tüm standart kodlardan arındırılmıştır.
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, Omi'ye dayalı olarak geliştirilmiş, çerçeveler arası bir kullanıcı arayüzü bileşen kitaplığıdır (GitHub'da açık kaynaklıdır). Omi, standart web bileşenlerinin özel öğelerini oluşturur.
WePY
WePY, mini uygulamaların bileşenlere ayrılmış geliştirmeyi desteklemesini sağlayan bir çerçevedir. Ön derleme sayesinde geliştiriciler, mini uygulamalar geliştirmek için en sevdikleri geliştirme stilini seçebilir. Çerçevenin ayrıntılı optimizasyonu ve Promises ile async işlevlerinin kullanıma sunulması, mini uygulama projelerinin geliştirilmesini kolaylaştırır ve daha verimli hale getirir. Aynı zamanda WePY de büyüyen bir çerçeve olup çoğunlukla Vue.js'den olmak üzere bazı optimize edilmiş ön uç araçlarını ve çerçeve tasarım konseptlerini ve fikirlerini büyük ölçüde bünyesine katmıştır.
<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 alanıyla ilgili sekmeler 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, web uygulamalarını mini uygulamalar gibi yazabilirsiniz. Belgelerde, halihazırda bir mini uygulamanız varsa weweb sayesinde tarayıcıda çalıştırabileceğiniz belirtiliyor. Denemelerimde bu yöntem, mevcut mini uygulamalarda güvenilir bir şekilde çalışmadı. Bunun nedeni büyük olasılıkla projenin son zamanlarda güncellenmemiş olması ve bu nedenle derleyicisinin WeChat platformundaki değişiklikleri kaçırmasıdır.
Teşekkür
Bu makale Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent ve Keith Gu tarafından incelenmiştir.