Dự án nguồn mở của ứng dụng nhỏ

Thomas Steiner

kbone

Dự án kbone (nguồn mở trên GitHub) triển khai một bộ chuyển đổi mô phỏng môi trường trình duyệt trong lớp thích ứng, nhờ đó, mã được viết cho web có thể chạy mà không cần thay đổi trong ứng dụng mini. Một số mẫu khởi động (trong đó có Vue, React và Preact) giúp nhà phát triển web có trải nghiệm làm quen dễ dàng hơn từ các khung này.

Bạn có thể tạo một dự án mới bằng công cụ kbone-cli. Một trình hướng dẫn sẽ hỏi bạn muốn sử dụng khung nào để bắt đầu dự án. Đoạn mã dưới đây cho thấy bản minh hoạ Preact. Trong đoạn mã dưới đây, lệnh mp tạo ứng dụng nhỏ, lệnh web tạo ứng dụng web và build tạo ứng dụng web chính thức.

npx kbone-cli init my-app
cd my-app
npm run mp
npm run web
npm run build

Đoạn mã dưới đây cho thấy một thành phần bộ đếm đơn giản, sau đó được hiển thị đồng dạng trong một ứng dụng mini và một ứng dụng web. Mức hao tổn của ứng dụng mini là đáng kể, chỉ xét từ cấu trúc 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;

giao diện người dùng kbone

Dự án kbone-ui (nguồn mở trên GitHub) là một khung giao diện người dùng hỗ trợ cả việc phát triển ứng dụng mini cũng như phát triển Vue.js bằng kbone. Các thành phần kbone-ui mô phỏng giao diện của các thành phần ứng dụng mini tích hợp sẵn của WeChat (cũng xem Thành phần ở trên). Bản minh hoạ chạy trực tiếp trong trình duyệt cho phép bạn khám phá các thành phần có sẵn.

WeUI

WeUI là một bộ thư viện kiểu cơ bản nhất quán với trải nghiệm hình ảnh mặc định của WeChat. Nhóm thiết kế chính thức của WeChat đã điều chỉnh thiết kế cho các trang web nội bộ của WeChat và ứng dụng nhỏ của WeChat để người dùng có cảm nhận đồng nhất hơn khi sử dụng. Gói này bao gồm các thành phần như button, cell, dialog, progress, toast, article, actionsheet và icon. Có nhiều phiên bản WeUI như weui-wxss dành cho các ứng dụng WeChat mini được tạo kiểu bằng WXSS (xem phần Tạo kiểu ở trên), weui.js dành cho ứng dụng web và react-weui dành cho các thành phần WeChat React.

Omi

Omi là một khung đa khung giao diện người dùng tự xác nhận (nguồn mở trên GitHub. Công cụ này hợp nhất các Thành phần web, JSX, DOM ảo, kiểu chức năng, trình quan sát hoặc Proxy thành một khung có kích thước nhỏ và hiệu suất cao. Mục đích của thư viện này là cho phép nhà phát triển viết thành phần một lần và sử dụng thành phần đó ở mọi nơi, chẳng hạn như Omi, React, Preact, Vue.js hoặc Angular. Việc viết các thành phần Omi rất trực quan và không có hầu hết mã nguyên mẫu.

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 là một thư viện thành phần giao diện người dùng trên nhiều khung (nguồn mở trên GitHub) được phát triển dựa trên Omi, giúp xuất các phần tử tuỳ chỉnh của các thành phần web tiêu chuẩn.

WePY

WePY là một khung cho phép các ứng dụng mini hỗ trợ phát triển thành phần. Thông qua tính năng biên dịch trước, nhà phát triển có thể chọn kiểu phát triển mà họ yêu thích để phát triển ứng dụng mini. Việc tối ưu hoá chi tiết khung này cũng như giới thiệu Lời hứa và các hàm không đồng bộ đều giúp việc phát triển các dự án ứng dụng nhỏ trở nên dễ dàng và hiệu quả hơn. Đồng thời, WePY cũng là một khung phát triển, phần lớn đã hấp thụ một số công cụ giao diện người dùng được tối ưu hoá và các khái niệm và ý tưởng thiết kế khung, chủ yếu là từ 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

Dự án vConsole cung cấp một công cụ nhẹ, có thể mở rộng cho nhà phát triển giao diện người dùng cho các trang web dành cho thiết bị di động. Công cụ này cung cấp một trình gỡ lỗi giống như DevTools có thể được chèn trực tiếp vào ứng dụng web và ứng dụng mini. Một bản minh hoạ sẽ giới thiệu các cơ hội này. vConsole bao gồm các thẻ cho nhật ký, hệ thống, mạng, phần tử và bộ nhớ.

weweb

Dự án weweb (nguồn mở trên GitHub) là khung giao diện người dùng cơ bản của khung ứng dụng Hera. Khung này tuyên bố tương thích với cú pháp của ứng dụng WeChat mini, vì vậy, bạn có thể viết ứng dụng web theo cách của ứng dụng mini. Tài liệu này hứa hẹn rằng nếu đã có ứng dụng mini, bạn có thể chạy ứng dụng đó trong trình duyệt nhờ weweb. Trong các thử nghiệm của tôi, phương pháp này không hoạt động đáng tin cậy đối với các ứng dụng mini hiện tại, rất có thể là do dự án chưa có bản cập nhật gần đây khiến trình biên dịch của ứng dụng bỏ lỡ các thay đổi trong nền tảng WeChat.

Lời cảm ơn

Bài viết này đã được Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent và Keith Gu xem xét.