Project open source aplikasi mini

Thomas Steiner

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;

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.

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.

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.

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>

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.

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.

Ucapan terima kasih

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