Kbone
โปรเจ็กต์ kbone (โอเพนซอร์สบน GitHub) ติดตั้งอะแดปเตอร์ที่จำลองสภาพแวดล้อมของเบราว์เซอร์ในเลเยอร์การปรับเพื่อให้โค้ดที่เขียนขึ้นสำหรับเว็บทำงานได้โดยไม่มีการเปลี่ยนแปลงในมินิแอป มีเทมเพลตเริ่มต้นหลายรายการ (ในบรรดาเทมเพลตเริ่มต้นหลายรายการ (รวมถึง Vue, React และPreact) ซึ่งทำให้การเริ่มต้นใช้งานสำหรับนักพัฒนาเว็บมาจากเฟรมเวิร์กเหล่านี้
คุณจะสร้างโปรเจ็กต์ใหม่ได้ด้วยเครื่องมือ kbone-cli
วิซาร์ดจะถามเกี่ยวกับเฟรมเวิร์กเพื่อเริ่มโครงการ ข้อมูลโค้ดด้านล่างแสดงการสาธิตก่อนดำเนินการ ในข้อมูลโค้ดด้านล่าง คำสั่ง mp
จะสร้างมินิแอป คำสั่ง web
จะสร้างเว็บแอป และ build
จะสร้างเว็บแอปเวอร์ชันที่ใช้งานจริง
npx kbone-cli init my-app
cd my-app
npm run mp
npm run web
npm run build
ข้อมูลโค้ดด้านล่างแสดงคอมโพเนนต์ตัวนับที่เรียบง่ายซึ่งจะแสดงผลแบบอิสระในมินิแอปและเว็บแอป ส่วนเกินของมินิแอปนั้นสำคัญมาก โดยตัดสินจากโครงสร้าง 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;
kbone-ui
โปรเจ็กต์ kbone-ui (โอเพนซอร์สบน GitHub) เป็นเฟรมเวิร์ก UI ที่ช่วยทั้งการพัฒนาแอปขนาดเล็กและการพัฒนา Vue.js ด้วย kbone คอมโพเนนต์ kbone-ui จะจำลองรูปลักษณ์ของ คอมโพเนนต์มินิแอปในตัวของ WeChat (ดูคอมโพเนนต์ด้านบนได้เช่นกัน) การสาธิตที่ทำงานในเบราว์เซอร์โดยตรงจะช่วยให้คุณสำรวจคอมโพเนนต์ที่มีอยู่ได้
WeUI
WeUI คือชุดไลบรารีสไตล์พื้นฐานที่สอดคล้องกับประสบการณ์การใช้งานภาพเริ่มต้นของ WeChat ทีมออกแบบของ WeChat อย่างเป็นทางการได้ออกแบบหน้าเว็บภายในของ WeChat และแอปขนาดจิ๋วของ WeChat โดยเฉพาะ เพื่อให้ผู้ใช้รับรู้เกี่ยวกับการใช้งานที่เป็นแบบเดียวกันมากขึ้น ซึ่งรวมถึงคอมโพเนนต์ต่างๆ เช่น button
, cell
, dialog
, progress
, toast
, article
, actionsheet
และ icon
WeUI มีหลายเวอร์ชัน เช่น weui-wxss สำหรับ
มินิแอปของ WeChat ที่จัดรูปแบบด้วย WXSS (ดูการจัดรูปแบบด้านบน),
weui.js สำหรับเว็บแอป และ
react-weui สำหรับคอมโพเนนต์ WeChat React
โอมิ
Omi เป็นเฟรมเวิร์กแบบข้ามเฟรมเวิร์กเอนด์ที่เรียกตัวเองว่าเป็นเฟรมเวิร์ก (โอเพนซอร์สใน GitHub ซึ่งรวม Web Components, JSX, Virtual DOM, รูปแบบการทำงาน, ผู้สังเกตการณ์ หรือพร็อกซีเข้าเป็นเฟรมเวิร์กเดียวที่มีขนาดเล็กและมีประสิทธิภาพสูง โดยมีเป้าหมายเพื่อให้นักพัฒนาซอฟต์แวร์เขียนคอมโพเนนต์เพียงครั้งเดียวแล้วนำไปใช้ได้ทุกที่ เช่น Omi, React, Preact, Vue.js หรือ Angular การเขียนองค์ประกอบของ Omi นั้นง่ายมากและไม่มีต้นแบบเกือบทั้งหมด
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 เป็นไลบรารีคอมโพเนนต์ UI แบบข้ามเฟรมเวิร์ก (โอเพนซอร์สบน GitHub) ที่พัฒนาโดยอิงจาก Omi ซึ่งจะแสดงองค์ประกอบที่กำหนดเองขององค์ประกอบเว็บมาตรฐาน
WePY
WePY เป็นเฟรมเวิร์กที่ให้แอปขนาดเล็กสนับสนุนการพัฒนาคอมโพเนนต์ นักพัฒนาซอฟต์แวร์สามารถเลือกรูปแบบการพัฒนาที่ชื่นชอบ เพื่อพัฒนาแอปขนาดเล็กผ่านการคอมไพล์ล่วงหน้า การเพิ่มประสิทธิภาพแบบละเอียดของเฟรมเวิร์กและการแนะนำฟังก์ชัน "Promises" และ "Async" ล้วนแล้วแต่ทำให้การพัฒนาโปรเจ็กต์ขนาดเล็กของแอปต่างๆ ง่ายดายและมีประสิทธิภาพมากขึ้น ในขณะเดียวกัน WePY ก็เป็นเฟรมเวิร์กที่กำลังเติบโตอยู่เช่นกัน ซึ่งได้ข้อมูลส่วนใหญ่เกี่ยวกับเครื่องมือฟรอนท์เอนด์และแนวคิดในการออกแบบเฟรมเวิร์กที่เพิ่มประสิทธิภาพมาบางส่วน ซึ่งโดยส่วนใหญ่มาจาก 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
โปรเจ็กต์ vConsole มีเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ฟรอนท์เอนด์ที่ใช้งานง่ายและขยายได้สําหรับหน้าเว็บบนอุปกรณ์เคลื่อนที่ โดยมีโปรแกรมแก้ไขข้อบกพร่องที่คล้ายเครื่องมือสำหรับนักพัฒนาเว็บ ที่สามารถแทรกลงในเว็บแอปและมินิแอปได้โดยตรง การสาธิตจะแสดงโอกาสเหล่านั้น vConsole มีแท็บสำหรับบันทึก ระบบ เครือข่าย องค์ประกอบ และพื้นที่เก็บข้อมูล
Weweb
โปรเจ็กต์ weweb (โอเพนซอร์สใน GitHub) เป็นเฟรมเวิร์กฟรอนท์เอนด์ที่สำคัญของเฟรมเวิร์กขนาดเล็กของ Hera ซึ่งอ้างว่าเข้ากันได้กับไวยากรณ์ของแอปขนาดเล็กของ WeChat เพื่อให้คุณเขียนเว็บแอปพลิเคชันในรูปแบบของมินิแอปได้ เอกสารนี้ให้คำสัญญาว่าถ้าคุณมีแอปขนาดเล็กอยู่แล้ว คุณสามารถเรียกใช้ในเบราว์เซอร์ได้ด้วย weweb ในการทดสอบของผม วิธีการนี้ไม่เสถียรสำหรับ Mini App ในปัจจุบัน ส่วนใหญ่อาจเป็นเพราะโครงการยังไม่มีการอัปเดตที่ทำให้คอมไพเลอร์พลาดการเปลี่ยนแปลงในแพลตฟอร์ม WeChat ไปเมื่อเร็วๆ นี้
กิตติกรรมประกาศ
บทความนี้ได้รับการตรวจสอบโดย Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent และ Keith Gu