Project open source aplikasi mini

kbone

Project kbone (open source di GitHub) mengimplementasikan adaptor yang menyimulasikan lingkungan browser di lapisan adaptasi, sehingga kode yang ditulis untuk web dapat berjalan tanpa perubahan di aplikasi mini. Beberapa {i>template <i}untuk mulai Vue, Bereaksi, dan Prakt) yang membuat pengalaman orientasi bagi pengembang web yang berasal dari kerangka kerja ini lebih mudah.

Project baru dapat dibuat dengan alat kbone-cli. Wizard akan bertanya framework apa yang akan memulai proyek Anda. Cuplikan kode di bawah menunjukkan demo Preact. Dalam cuplikan kode di bawah, mp membangun aplikasi mini, perintah web akan membuat 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 menunjukkan komponen penghitung sederhana yang kemudian dirender secara isomorfik dalam aplikasi web, aplikasi mini, dan aplikasi web. Overhead aplikasi mini signifikan, murni diukur dari DOM karena ada berbagai struktur penetapan harga.

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 kbone Preact dibuka di WeChat DevTools. Memeriksa struktur DOM menunjukkan overhead yang signifikan dibandingkan dengan aplikasi web.
Aplikasi demo template kbone Preact dibuka di WeChat DevTools. Perhatikan struktur DOM yang kompleks serta bagaimana tombol plus dan minus sebenarnya bukan elemen <button>.
Aplikasi demo template Preact kbone dibuka di browser web. Memeriksa struktur DOM menampilkan markup yang akan diharapkan berdasarkan kode komponen Preact.
Aplikasi demo template Preact kbone dibuka di browser web. Perhatikan struktur DOM.

Kbone-UI

Project kbone-ui (open source di GitHub) adalah framework UI yang memfasilitasi pengembangan aplikasi mini serta pengembangan Vue.js dengan kbone. Kbone-ui komponen mengemulasi tampilan dan nuansa Komponen aplikasi mini bawaan WeChat (lihat juga Komponen di atas). J demo yang berjalan langsung di browser memungkinkan Anda menjelajahi komponen yang tersedia.

Demo framework kbone-ui yang menunjukkan komponen terkait formulir seperti tombol pilihan, tombol akses, input, dan label.
Demo kbone-ui yang menunjukkan komponen terkait formulir.

WeUI

WeUI adalah serangkaian library gaya dasar yang sesuai dengan pengalaman visual default. Tim desain WeChat resmi telah menyesuaikan desain untuk internal WeChat halaman web dan aplikasi mini WeChat untuk memudahkan pengguna persepsi penggunaan produk menjadi lebih seragam. Rencana ini mencakup komponen seperti button, cell, dialog, progress, toast, article, actionsheet, dan icon. Ada adalah 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 menampilkan komponen terkait formulir, yaitu tombol.
Aplikasi demo WeUI yang menunjukkan tombol.

Omi

Omi adalah framework lintas framework frontend yang menyatakan dirinya sendiri (open source di GitHub. Ini menggabungkan Komponen Web, JSX, Virtual DOM, gaya fungsional, pengamat, atau Proxy ke dalam satu framework dengan ukuran kecil dan performa tinggi. Ini tujuannya adalah mengizinkan 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 khusus komponen web standar.

Demo framework Omiu yang menampilkan komponen terkait formulir, yaitu tombol.
Aplikasi demo Omiu yang menunjukkan tombol.

WePY

WePY adalah framework yang memungkinkan aplikasi mini mendukung pengembangan yang terdiri atas komponen-komponen. Melalui pra-kompilasi, developer dapat memilih pengembangan favorit mereka gaya untuk mengembangkan aplikasi mini. Pengoptimalan kerangka kerja dan pengenalan Semua promise dan fungsi asinkron mempermudah pengembangan project aplikasi mini, dan banyak lagi efisien. Pada saat yang sama, WePY juga merupakan framework yang terus berkembang, yang sebagian besar telah alat frontend yang dioptimalkan, serta konsep dan ide 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>
&#39;memulai&#39; WePY dokumentasi yang menunjukkan 
langkah-langkah pertama untuk memulai.
WePY "memulai" dokumentasi tambahan.

vConsole

Project vConsole menyediakan project yang ringan dan dapat diperluas alat developer frontend untuk halaman web seluler. Layanan ini menawarkan debugger mirip DevTools yang dapat yang dimasukkan langsung ke dalam aplikasi web dan aplikasi mini. J demo menampilkan peluang. vConsole termasuk tab untuk log, sistem, jaringan, elemen, dan penyimpanan.

vConsole. vConsole terbuka di bagian bawah dan memiliki tab untuk log, sistem, jaringan, elemen, dan penyimpanan.
Aplikasi demo vConsole yang menunjukkan penjelajah elemen.

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 layaknya aplikasi mini. Tujuan dokumentasi menjanjikan bahwa jika Anda sudah memiliki aplikasi mini, Anda dapat menjalankannya di browser berkat web. Dalam eksperimen saya, hasil ini tidak dapat diandalkan untuk aplikasi mini saat ini, kemungkinan besar karena proyek belum melihat pembaruan baru-baru ini yang menyebabkan kompilatornya melewatkan perubahan pada di platform WeChat.

Dokumentasi framework aplikasi mini Hera yang mencantumkan API WeChat yang didukungnya seperti `wx.request`, `wx.uploadFile`, dll.
Dokumentasi framework aplikasi mini Hera menunjukkan daftar API WeChat yang didukung.
Aplikasi mini demo weweb yang dikompilasi dengan weweb untuk dijalankan di browser menampilkan elemen formulir.
Aplikasi mini demo weweb yang dikompilasi dengan weweb untuk dijalankan di browser.

Ucapan terima kasih

Artikel ini telah ditinjau oleh Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, dan Keith Gu.