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, để mã được viết cho web có thể chạy mà không cần thay đổi trong ứng dụng thu nhỏ. Có một số mẫu khởi động (trong đó có Vue, React, và Preact) giúp trải nghiệm làm quen với ứng dụng cho nhà phát triển web sử dụng các khung này dễ dàng hơn.
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 khung nào để khởi chạy dự án. Đoạn mã bên dưới cho thấy bản minh hoạ Preact. Trong đoạn mã bên dưới, lệnh mp tạo ứng dụng thu nhỏ, lệnh web tạo ứng dụng web và build tạo ứng dụng web phát hành công khai.
npx kbone-cli init my-app
cd my-app
npm run mp
npm run web
npm run build
Đoạn mã bên dưới cho thấy một thành phần bộ đếm đơn giản, sau đó được kết xuất đồng hình trong một ứng dụng thu nhỏ và một ứng dụng web. Chi phí của ứng dụng thu nhỏ là đáng kể, chỉ dựa trên 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> phần tử.
kbone-ui
Dự án kbone-ui (nguồn mở trên GitHub) là một khung giao diện người dùng giúp phát triển cả ứng dụng thu nhỏ 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 thu nhỏ tích hợp của WeChat (xem thêm Thành phần ở trên). Một 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 hiện có.
WeUI
WeUI là một tập hợp các 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's. Nhóm thiết kế chính thức của WeChat đã điều chỉnh các thiết kế cho các trang web nội bộ của WeChat và các ứng dụng thu nhỏ của WeChat để giúp người dùng cảm nhận được cách sử dụng đồng nhất hơn. Khung 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 thu nhỏ của WeChat được tạo kiểu bằng WXSS (xem phần Tạo kiểu ở trên), weui.js cho các ứng dụng web và react-weui cho các thành phần WeChat React.
Omi
Omi là một khung tự tuyên bố là khung đa nền tảng giao diện người dùng (nguồn mở trên GitHub. Khung 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 có kích thước nhỏ và hiệu suất cao. Mục tiêu của khung 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 chúng ở 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à hầu như không có mã soạn sẵn.
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 đa nền tảng (nguồn mở trên GitHub) được phát triển dựa trên Omi, xuất 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 thu nhỏ hỗ trợ 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 để phát triển các ứng dụng thu nhỏ. Việc tối ưu hoá chi tiết khung và giới thiệu các Hàm Promise và async đều giúp việc phát triển các dự án ứng dụng thu 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, đã hấp thụ phần lớn một số công cụ và ý tưởng thiết kế khung giao diện người dùng được tối ưu hoá, 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ụ dành cho nhà phát triển giao diện người dùng nhẹ, có thể mở rộ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ư 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 thu nhỏ. Một 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ớ.
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 thu nhỏ Hera, được tuyên bố là tương thích với cú pháp của các ứng dụng thu nhỏ WeChat, vì vậy bạn có thể viết các ứng dụng web theo cách của các ứng dụng thu nhỏ. Tài liệu này hứa hẹn rằng nếu bạn đã có một ứng dụng thu nhỏ, bạn có thể kích hoạt ứng dụng đó trong trình duyệt nhờ weweb. Trong các thử nghiệm của tôi, điều này không hoạt động đáng tin cậy đối với các ứng dụng thu nhỏ hiện tại, rất có thể là do dự án này gần đây không có bản cập nhật nào khiến trình biên dịch 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.