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;
![Preact kbone şablon demo uygulaması WeChat Geliştirici Araçları'nda açıldı. DOM yapısının incelenmesi, web uygulamasına kıyasla önemli bir ek yük gösterir.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/the-preact-kbone-template-eae37ec329962.png?authuser=5&hl=tr)
<button>
öğeleri olmadığına dikkat edin.
![Preact kbone şablonu demo uygulaması web tarayıcısında açıldı. DOM yapısı incelendiğinde, Preact bileşen koduna göre beklenen işaretleme gösterilir.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/the-preact-kbone-template-d94e2420c64b4.png?authuser=5&hl=tr)
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.
![Radyo düğmeleri, anahtarlar, girişler ve etiketler gibi formla ilgili bileşenleri gösteren kbone-ui çerçevesinin demosu.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-kbone-ui-framew-a00bed5e707fd.png?authuser=5&hl=tr)
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.
![Formla ilgili bileşenleri, yani anahtarları gösteren WeUI çerçevesinin demosu.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-weui-framework-7609e8bee005e.png?authuser=5&hl=tr)
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).
![Formla ilgili bileşenleri, yani anahtarları gösteren Omiu çerçevesinin demosu.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-omiu-framework-8876538b48d1e.png?authuser=5&hl=tr)
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>
![Başlamaya ilişkin ilk adımları gösteren WePY "başlarken" belgeleri sayfası.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/wepy-getting-started-do-ebebe13bdb6ef.png?authuser=5&hl=tr)
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.
![vConsole demo uygulaması. Alt tarafta açılan vConsole'da günlükler, sistem, ağ, öğeler ve depolama sekmeleri bulunur.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/vconsole-demo-app-vcons-9b49c9717dbe8.png?authuser=5&hl=tr)
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.
!["wx.request", "wx.uploadFile" vb. desteklenen WeChat API'lerinin listelendiği Hera mini uygulama çerçevesiyle ilgili dokümanlar.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/documentation-the-hera-m-2a2d96d52891b.png?authuser=5&hl=tr)
![Tarayıcıda çalışmak üzere form öğelerini göstermek üzere weweb ile derlenen mini uygulama demosu.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/the-weweb-demo-mini-app-c-1eda42d616e02.png?authuser=5&hl=tr)
Teşekkür
Bu makale Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent ve Keith Gu tarafından incelenmiştir.