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 di aplikasi mini. Beberapa template starter (di antaranya Vue, React, dan Preact) ada yang mempermudah pengalaman aktivasi 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 proyek. Cuplikan kode di bawah menunjukkan demo Preact. Pada cuplikan kode di bawah, perintah mp
membangun aplikasi mini, perintah web membangun 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 cukup signifikan, jika 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 dan pengembangan Vue.js dengan kbone. Komponen kbone-ui meniru 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 sekumpulan 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 terhadap penggunaan lebih seragam. Ini mencakup komponen
seperti button, cell, dialog, progress, toast, article, actionsheet, dan icon. Tersedia berbagai versi WeUI seperti weui-wxss untuk
aplikasi mini WeChat yang ditata dengan WXSS (lihat Penataan di atas),
weui.js untuk aplikasi web, dan
react-weui untuk komponen WeChat React.
Omi
Omi adalah framework lintas framework frontend yang memproklamirkan diri sendiri (open source di GitHub. Framework ini menggabungkan Komponen Web, JSX, Virtual DOM, gaya fungsional, pengamat, atau Proxy menjadi 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 hampir bebas dari 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.
WePY
WePY adalah framework yang memungkinkan aplikasi mini mendukung pengembangan berbasis komponen. Melalui pra-kompilasi, developer dapat memilih gaya pengembangan favorit mereka untuk mengembangkan aplikasi mini. Pengoptimalan framework yang mendetail serta pengenalan fungsi asinkron dan Promise membuat pengembangan project aplikasi mini menjadi lebih mudah dan efisien. Pada saat yang sama, WePY juga merupakan framework yang berkembang, yang sebagian besar telah menyerap beberapa konsep dan ide desain framework serta alat frontend 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>
vConsole
Project vConsole menyediakan alat developer frontend yang ringan dan dapat di-extend untuk halaman web seluler. Alat ini menawarkan debugger seperti DevTools yang dapat disisipkan langsung ke aplikasi web dan aplikasi mini. Demo menampilkan peluang. vConsole mencakup tab untuk log, sistem, jaringan, elemen, dan penyimpanan.
weweb
Project weweb (open source di GitHub) adalah framework frontend dasar dari framework aplikasi mini Hera yang diklaim kompatibel dengan sintaksis aplikasi mini WeChat, sehingga Anda dapat menulis aplikasi web dengan cara aplikasi mini. Dokumentasi menjanjikan bahwa jika Anda 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 melihat update baru-baru ini sehingga kompilernya melewatkan perubahan di platform WeChat.
Ucapan terima kasih
Artikel ini ditinjau oleh Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, dan Keith Gu.