Kbone
Project kbone (open source di GitHub) menerapkan adaptor yang menyimulasikan lingkungan browser di lapisan adaptasi, sehingga kode yang ditulis untuk web dapat berjalan tanpa perubahan dalam aplikasi mini. Beberapa template awal (di antaranya Vue, React, dan Preact) yang mempermudah pengalaman orientasi bagi developer web yang berasal dari framework ini.
Project baru dapat dibuat dengan alat kbone-cli
. Wizard akan menanyakan framework tersebut untuk memulai
project. Cuplikan kode di bawah menunjukkan demo Preact. Dalam cuplikan kode di bawah, perintah mp
mem-build aplikasi mini, perintah web
mem-build aplikasi web, dan build
membuat
aplikasi web produksi.
npx kbone-cli init my-app
cd my-app
npm run mp
npm run web
npm run build
Cuplikan kode di bawah ini menampilkan komponen penghitung sederhana yang kemudian dirender secara isomorfis dalam aplikasi mini dan aplikasi web. Overhead aplikasi mini sangat signifikan, hanya dengan melihat struktur 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;
![Aplikasi demo template Preact kbone dibuka di WeChat DevTools. Memeriksa struktur DOM menunjukkan overhead yang signifikan dibandingkan dengan aplikasi web.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/the-preact-kbone-template-eae37ec329962.png?authuser=3&hl=id)
<button>
.
![Aplikasi demo template Preact kbone dibuka di browser web. Memeriksa struktur DOM akan menampilkan markup yang diharapkan berdasarkan kode komponen Preact.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/the-preact-kbone-template-d94e2420c64b4.png?authuser=3&hl=id)
kbone-ui
Project kbone-ui (open source di GitHub) adalah framework UI yang memfasilitasi pengembangan aplikasi mini serta pengembangan Vue.js dengan kbone. Komponen kbone-ui mengemulasi tampilan dan nuansa komponen aplikasi mini bawaan WeChat (lihat juga Komponen di atas). Demo yang berjalan langsung di browser memungkinkan Anda menjelajahi komponen yang tersedia.
![Demo framework kbone-UI yang menampilkan komponen terkait formulir seperti tombol pilihan, tombol akses, input, dan label.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-kbone-ui-framew-a00bed5e707fd.png?authuser=3&hl=id)
WeUI
WeUI adalah kumpulan library gaya dasar yang konsisten dengan pengalaman visual
default WeChat. Tim desain resmi WeChat telah menyesuaikan desain untuk halaman web internal
WeChat dan aplikasi mini WeChat agar persepsi pengguna tentang penggunaan menjadi lebih seragam. Ini mencakup komponen
seperti button
, cell
, dialog
, progress
, toast
, article
, actionsheet
, dan icon
. Ada
berbagai versi WeUI yang tersedia seperti weui-wxss untuk
aplikasi mini WeChat yang diberi gaya dengan WXSS (lihat Penataan gaya di atas),
weui.js untuk aplikasi web, dan
react-weui untuk komponen WeChat React.
![Demo framework WeUI yang menunjukkan komponen terkait formulir, yaitu switch.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-weui-framework-7609e8bee005e.png?authuser=3&hl=id)
Omi
Omi adalah framework lintas framework frontend yang diklaim sendiri (open source di GitHub. Platform ini menggabungkan Komponen Web, JSX, Virtual DOM, gaya fungsional, pengamat, atau Proxy ke dalam satu framework dengan ukuran kecil dan performa tinggi. Tujuannya adalah memungkinkan developer menulis komponen sekali dan menggunakannya di mana saja, seperti Omi, React, Preact, Vue.js, atau Angular. Menulis komponen Omi sangat intuitif dan bebas dari hampir semua boilerplate.
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 adalah library komponen UI lintas framework (open source di GitHub) yang dikembangkan berdasarkan Omi, yang menghasilkan elemen kustom komponen web standar.
![Demo framework Omiu yang menunjukkan komponen terkait formulir, yaitu switch.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-omiu-framework-8876538b48d1e.png?authuser=3&hl=id)
WePY
WePY adalah framework yang memungkinkan aplikasi mini mendukung pengembangan komponen. Melalui prakompilasi, developer dapat memilih gaya pengembangan favorit mereka untuk mengembangkan aplikasi mini. Pengoptimalan framework yang mendetail serta pengenalan Promise dan fungsi asinkron membuat pengembangan project aplikasi mini lebih mudah dan lebih efisien. Pada saat yang sama, WePY juga merupakan framework yang berkembang, yang sebagian besar telah menyerap beberapa alat frontend dan konsep desain framework yang dioptimalkan, sebagian besar dari 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>
![Halaman dokumentasi 'memulai' WePY yang menampilkan langkah pertama untuk memulai.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/wepy-getting-started-do-ebebe13bdb6ef.png?authuser=3&hl=id)
vConsole
Project vConsole menyediakan alat developer frontend yang ringan dan dapat diperluas untuk halaman web seluler. Alat ini menawarkan debugger seperti DevTools yang dapat dimasukkan langsung ke dalam aplikasi web dan aplikasi mini. Demo akan menampilkan peluang. vConsole mencakup tab untuk log, sistem, jaringan, elemen, dan penyimpanan.
![Aplikasi demo vConsole. vConsole terbuka di bagian bawah dan memiliki tab untuk log, sistem, jaringan, elemen, dan penyimpanan.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/vconsole-demo-app-vcons-9b49c9717dbe8.png?authuser=3&hl=id)
Weweb
Project weweb (open source di GitHub) adalah framework frontend yang mendasarinya dari framework aplikasi mini Hera yang mengklaim kompatibel dengan sintaksis aplikasi mini WeChat sehingga Anda dapat menulis aplikasi web layaknya aplikasi mini. Dokumentasi ini menjanjikan bahwa jika sudah memiliki aplikasi mini, Anda dapat menjalankannya di browser berkat weweb. Dalam eksperimen saya, hal ini tidak berfungsi dengan andal untuk aplikasi mini saat ini, kemungkinan besar karena project belum menerima update yang baru-baru ini menyebabkan compilernya melewatkan perubahan di platform WeChat.
![Dokumentasi framework aplikasi mini Hera yang mencantumkan API WeChat yang didukungnya, seperti `wx.request`, `wx.uploadFile`, dll.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/documentation-the-hera-m-2a2d96d52891b.png?authuser=3&hl=id)
![Aplikasi mini demo weweb dikompilasi dengan weweb untuk dijalankan di browser yang menampilkan elemen formulir.](https://web.dev/static/articles/mini-apps/mini-app-open-source-projects/image/the-weweb-demo-mini-app-c-1eda42d616e02.png?authuser=3&hl=id)
Ucapan terima kasih
Artikel ini ditinjau oleh Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, dan Keith Gu.