kbone
Dự án kbone (nguồn mở trên GitHub) triển khai một bộ chuyển đổi mô phỏng một môi trường trình duyệt trong tầng điều chỉnh để mã được viết cho web có thể chạy mà không cần trong một ứng dụng nhỏ. Một số mẫu dành cho người mới bắt đầu (trong đó có Vue, Phản ứng và Dự đoán) có giúp hướng dẫn ban đầu cho các nhà phát triển web đến từ các khung này một cách 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 xem khuôn khổ nào để khởi động
cho dự án. Đoạn mã dưới đây cho thấy bản minh hoạ Preact. Trong đoạn mã dưới đây, mp
lệnh sẽ 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 mà sau đó được kết xuất đẳng cấu trong một ứng dụng nhỏ và ứng dụng web. Mức hao tổn của ứng dụng nhỏ là rất quan trọng, chỉ được đánh giá dựa trên DOM cấu trúc.
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>.
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 nhỏ cũng như phát triển Vue.js với kbone. Giao diện người dùng KBone các thành phần mô phỏng giao diện của Các thành phần ứng dụng nhỏ tích hợp sẵn của WeChat (cũng xem Thành phần ở trên). Đáp 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 chính sách của WeChat
trải nghiệm hình ảnh mặc định. Nhóm thiết kế chính thức của WeChat đã thiết kế riêng các bản thiết kế cho WeChat nội bộ
các trang web và ứng dụng nhỏ WeChat để giúp người dùng nhận thức về việc sử dụng đồng nhất hơn. Bao gồm các thành phần
chẳng hạn như button, cell, dialog, progress, toast, article, actionsheet và icon. Có
có các phiên bản khác nhau của 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 Tạo kiểu ở trên),
weui.js cho ứng dụng web và
react-weui cho các thành phần của 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, Virtual DOM, 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 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 thành phần Omi rất trực quan và không có hầu hết 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");
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, kết quả đầu ra các phần tử tuỳ chỉnh của thành phần web chuẩn.
WePY
WePY là một khung cho phép các ứng dụng 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 bản phát triển mà họ yêu thích để phát triển các ứng dụng nhỏ. Việc tối ưu hoá chi tiết khung và giới thiệu Các lời hứa và chức năng 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 một cách hiệu quả. Đồng thời, WePY cũng là một khung đang phát triển, phần lớn đã hấp dẫn các công cụ giao diện người dùng được tối ưu hoá cũng như các ý tưởng 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 phiên bản gọn nhẹ, có thể mở rộng công cụ cho nhà phát triển ngoại vi đối với 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 ứng dụng web và ứng dụng nhỏ. Đáp 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ỏ 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 các ứng dụng web theo phong cách của các ứng dụng nhỏ. Chiến lược phát hành đĩa đơn tài liệu hứa rằng nếu bạn đã có một ứng dụng nhỏ, bạn có thể chạy ứng dụng đó trong trình duyệt nhờ vào 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 dự án không thấy các bản cập nhật gần đây, khiến trình biên dịch của dự án bỏ lỡ các thay đổi trong nền tảng WeChat.
Xác nhận
Bài viết này được đánh giá bởi Joe Medley thân mến! Kayce Basques, Milica Mihajlija, Alan Kent, và Keith Gu.