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) tersedia yang mempermudah pengalaman orientasi bagi developer web yang berasal dari framework ini.
Project baru dapat dibuat dengan alat kbone-cli. Wizard akan menanyakan framework yang akan digunakan 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 menunjukkan komponen penghitung sederhana yang kemudian dirender secara isomorfik di aplikasi mini dan aplikasi web. Overhead aplikasi mini sangat signifikan, hanya dilihat dari 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;
<button>.
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.
WeUI
WeUI adalah serangkaian 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 penggunaan pengguna lebih seragam. Ini mencakup komponen
seperti button, cell, dialog, progress, toast, article, actionsheet, dan icon. Ada
beberapa versi WeUI yang tersedia seperti weui-wxss untuk
aplikasi mini WeChat yang ditata gayanya dengan WXSS (lihat Gaya di atas),
weui.js untuk aplikasi web, dan
react-weui untuk komponen WeChat React.
Omi
Omi adalah framework lintas framework frontend yang diklaim sendiri (open source di GitHub. Framework ini menggabungkan Web Components, JSX, Virtual DOM, gaya fungsional, observer, 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 dari komponen web standar.
WePY
WePY adalah framework yang memungkinkan aplikasi mini mendukung pengembangan berbasis komponen. Melalui prakompilasi, developer dapat memilih gaya pengembangan favorit mereka untuk mengembangkan aplikasi mini. Pengoptimalan framework yang mendetail serta pengenalan Promise dan fungsi asinkron, semuanya menjadikan pengembangan project aplikasi mini lebih mudah dan efisien. Pada saat yang sama, WePY juga merupakan framework yang terus berkembang, yang sebagian besar telah menyerap beberapa alat frontend yang dioptimalkan serta ide dan konsep desain framework, 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>
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 aplikasi web dan aplikasi mini. Demo menampilkan peluang tersebut. vConsole menyertakan tab untuk log, sistem, jaringan, elemen, dan penyimpanan.
weweb
Project weweb (open source di GitHub) adalah framework frontend yang mendasari framework aplikasi mini Hera yang mengklaim kompatibel dengan sintaksis aplikasi mini WeChat, sehingga Anda dapat menulis aplikasi web dengan cara aplikasi mini. Dokumentasi menjanjikan bahwa jika sudah memiliki aplikasi mini, Anda dapat menjalankannya di browser berkat weweb. Dalam eksperimen saya, hal ini tidak berfungsi dengan baik untuk aplikasi mini saat ini, kemungkinan besar karena project belum melihat update baru-baru ini yang menyebabkan compiler-nya melewatkan perubahan di platform WeChat.
Ucapan terima kasih
Artikel ini ditinjau oleh Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, dan Keith Gu.