kbone
Dự án kbone (nguồn mở trên GitHub) triển khai bộ chuyển đổi mô phỏng môi trường trình duyệt trong lớp thích ứng để mã viết cho web có thể chạy mà không cần thay đổi trong ứng dụng nhỏ. Một số mẫu khởi động (trong số đó có Vue, React và Preact) tồn tại giúp trải nghiệm làm quen của nhà phát triển web qua các khung này dễ dàng hơn.
Bạn có thể tạo dự án mới bằng công cụ kbone-cli. Trình hướng dẫn sẽ hỏi khung để 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 kết xuất đẳng hình trong ứng dụng nhỏ và ứng dụng web. Mức hao tổn của ứng dụng thu nhỏ là rất đáng kể, chỉ khi đánh giá 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;
<button>.
kbone-ui
Dự án kbone-ui (nguồn mở trên GitHub) là khung giao diện người dùng hỗ trợ cả việc phát triển ứng dụng nhỏ lẫn 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 nhỏ tích hợp sẵn trong WeChat (xem thêm phần Các 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 tập hợp các thư viện kiểu cơ bản, phù hợp 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 đã thiết kế riêng cho các trang web nội bộ
của WeChat và các ứng dụng nhỏ của WeChat nhằm giúp cho nhận thức của người dùng về việc sử dụng các ứng dụng này trở nên thống nhất hơn. API 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 cho các ứng dụng nhỏ trên WeChat được tạo kiểu bằng WXSS (xem phần Định kiểu ở trên), weui.js cho ứng dụng web và react-weui cho các thành phần Phản ứng WeChat.
Omi
Omi là một khung giao diện người dùng tự xác nhận quyền sở hữu trên nhiều khung (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 vào một khung với kích thước nhỏ và hiệu suất cao. Mục tiêu của API này là cho phép nhà phát triển viết các thành phần một lần và sử dụng các 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ó gần như tất cả các 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");
Tiếng 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, cho ra 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 nhỏ hỗ trợ quá trình phát triển theo thành phần. Thông qua quá trình biên dịch trước, nhà phát triển có thể chọn kiểu phát triển yêu thích của họ để phát triển các ứng dụng nhỏ. Việc tối ưu hoá chi tiết khung cũng như việc giới thiệu Promise cũng như 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 đang phát triển, chủ yếu tiếp nhận một số công cụ giao diện người dùng được tối ưu hoá cũng như các khái niệm và ý tưởng thiết kế khung, chủ yếu 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ụ gọn nhẹ dành cho nhà phát triển giao diện người dùng có thể mở rộng và dùng cho các trang web dành cho thiết bị di động. Công cụ này cung cấp trình gỡ lỗi giống Công cụ cho nhà phát triển có thể được chèn trực tiếp vào các ứng dụng web và ứng dụng nhỏ. Bản minh hoạ cho thấy các cơ hội. vConsole bao gồm các thẻ cho nhật ký, hệ thống, mạng, phần tử và bộ nhớ.
web
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 nhỏ của Hera tuyên bố là tương thích với cú pháp của các ứng dụng nhỏ WeChat, vì vậy, bạn có thể viết ứng dụng web theo cách ứng dụng nhỏ. Tài liệu này hứa hẹn rằng nếu đã có một ứng dụng nhỏ, bạn có thể chạy ứng dụng đó trong trình duyệt nhờ web. Trong các thử nghiệm của tôi, tính năng này hoạt động không ổn định đối với các ứng dụng nhỏ hiện tại, có thể là do gần đây dự án không thấy các bản cập nhật khiến trình biên dịch bỏ lỡ các thay đổi trong nền tảng WeChat.
Xác nhận
Bài viết này đã được Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent và Keith Gu xem xét.