kbone, קבון
בפרויקט kbone (קוד פתוח ב-GitHub) מוטמע מתאם שמדמה סביבת דפדפן בשכבת ההתאמה, כדי שהקוד שנכתב באינטרנט יוכל לפעול בלי לבצע שינויים במיני-אפליקציה. יש כמה תבניות למתחילים (כולל Vue, React ו-Preact) שמאפשרות למפתחי אתרים להגיע בצורה קלה יותר מהמסגרות האלה.
אפשר ליצור פרויקט חדש באמצעות הכלי kbone-cli
. אשף שואל באיזו מסגרת להתחיל את הפרויקט. קטע הקוד הבא מציג את ההדגמה של Preact. בקטע הקוד שבהמשך, הפקודה 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;
![אפליקציית ההדגמה של התבנית Preact kbone נפתחה ב-WeChat DevTools. בדיקה של מבנה ה-DOM מראה תקורה משמעותית בהשוואה לאפליקציית האינטרנט.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/the-preact-kbone-template-eae37ec329962.png?authuser=5&hl=he)
<button>
.
![אפליקציית ההדגמה של התבנית Preact kbone נפתחה בדפדפן האינטרנט. בדיקה של מבנה ה-DOM מציגה את תגי העיצוב הצפויים על סמך קוד הרכיב של Preact.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/the-preact-kbone-template-d94e2420c64b4.png?authuser=5&hl=he)
kbone-ui
פרויקט kbone-ui (קוד פתוח ב-GitHub) הוא מסגרת של ממשק משתמש שמסייעת לפיתוח של מיני אפליקציות וגם לפיתוח של Vue.js באמצעות kbone. רכיבי kbone-ui מדמה את המראה והתחושה של הרכיבים המובנים במיני אפליקציות של WeChat (ראו גם את הקטע רכיבים למעלה). הדגמה שפועלת ישירות בדפדפן מאפשרת לבדוק את הרכיבים הזמינים.
![הדגמה של המסגרת של kbone-ui שמציגה רכיבים שקשורים לטפסים כמו לחצני בחירה, מתגים, מקורות קלט ותוויות.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-kbone-ui-framew-a00bed5e707fd.png?authuser=5&hl=he)
WeUI
WeUI היא קבוצה של ספריות סגנון בסיסיות שמתאימות לחוויית המשתמש החזותית המוגדרת כברירת מחדל ב-WeChat. צוות העיצוב הרשמי של WeChat יצר עיצובים מותאמים אישית לדפי אינטרנט פנימיים של WeChat ולאפליקציות מיני של WeChat, כדי לתפיסת המשתמשים לגבי השימוש באופן אחיד יותר. היא כוללת רכיבים כמו button
, cell
, dialog
, progress
, toast
, article
, actionsheet
ו-icon
. יש גרסאות שונות של WeUI, כמו weui-wxss לאפליקציות מיני של WeChat בסגנון WXSS (ראו Styling למעלה), weui.js לאפליקציות אינטרנט ו-react-weui לרכיבי WeChat React.
![הדגמה של מסגרת WeUI שמציגה רכיבים הקשורים לטפסים, כלומר מתגים.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-weui-framework-7609e8bee005e.png?authuser=5&hl=he)
אומי
Omi היא מסגרת עצמאית להצהרה עצמית על שימוש במסגרות חזית (קוד פתוח ב-GitHub). המערכת ממזגת רכיבי אינטרנט, JSX, DOM, סגנון פונקציונלי, צופה או שרת proxy ל-framework אחד בעל קנה מידה קטנטן וביצועים גבוהים. המטרה היא לאפשר למפתחים לכתוב רכיבים פעם אחת ולהשתמש בהם בכל מקום, למשל 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 היא ספריית רכיבים של ממשק משתמש ב-framework (קוד פתוח ב-GitHub) שפותחה על סמך Omi, שמפיקה פלט של אלמנטים מותאמים אישית של רכיבי אינטרנט סטנדרטיים.
![הדגמה של המסגרת של Omiu שמוצגים בה רכיבים שקשורים לטפסים, בעיקר מתגים.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-omiu-framework-8876538b48d1e.png?authuser=5&hl=he)
WePY
WePY היא מסגרת שמאפשרת למיני-אפליקציות לתמוך בפיתוח ממוסד. באמצעות הידור מראש, המפתחים יכולים לבחור את סגנון הפיתוח המועדף עליהם כדי לפתח מיני אפליקציות. בזכות האופטימיזציה המפורטת של המסגרת ובזכות השימוש בהבטחות ובפונקציות אסינכרוניות, תהליך הפיתוח של פרויקטים קטנים באפליקציות הוא קל ויעיל יותר. במקביל ל-WePY היא גם מסגרת הולכת וגדלה, שספגה בעיקר כמה כלים ורעיונות לעיצוב framework שעברו אופטימיזציה, בעיקר מ-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>
![דף התיעוד בנושא 'תחילת העבודה' של WePY שמציג את השלבים הראשונים בדרך.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/wepy-getting-started-do-ebebe13bdb6ef.png?authuser=5&hl=he)
vConsole
פרויקט vConsole מספק כלי קל ומתרחב למפתחים של ממשקי קצה לדפי אינטרנט לנייד. הוא כולל כלי לניפוי באגים דמוי כלי פיתוח, שאפשר להחדיר ישירות לאפליקציות אינטרנט ולמיני-אפליקציות. הדגמה מציגה את ההזדמנויות. ה-vConsole כולל כרטיסיות ליומנים, למערכת, לרשת, לרכיבים ולאחסון.
![אפליקציית הדגמה של vConsole. ה-vConsole נפתח בחלק התחתון ומכיל כרטיסיות ליומנים, למערכת, לרשת, לרכיבים ולאחסון.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/vconsole-demo-app-vcons-9b49c9717dbe8.png?authuser=5&hl=he)
weweb, וווב, ווב
פרויקט weweb (קוד פתוח ב-GitHub) הוא ה-framework שבבסיס אפליקציות המיני של Hera, שמתיימר להיות תואם לתחביר של אפליקציות המיני של WeChat, כך שאפשר לכתוב אפליקציות אינטרנט כמו מיני אפליקציות. המסמכים מבטיחים שאם כבר יש לכם מיני אפליקציה, תוכלו להריץ אותה בדפדפן הודות ל-weweb. בניסויים שלי זה לא עבד בצורה אמינה באפליקציות מיני קיימות, כנראה כי לא נמצאו עדכונים בפרויקט לאחרונה שגרמו למהדר שלו להחמיץ שינויים בפלטפורמת WeChat.
![תיעוד של ה-framework של אפליקציית Hera Mini עם רשימת ממשקי ה-API של WeChat שנתמכים, כמו 'wx.request' , 'wx.uploadFile' וכו'.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/documentation-the-hera-m-2a2d96d52891b.png?authuser=5&hl=he)
![המיני-אפליקציה של Webweb הדגמה, שנערכה באמצעות webweb, להפעלה בדפדפן שבו מוצגים רכיבי טופס.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/the-weweb-demo-mini-app-c-1eda42d616e02.png?authuser=5&hl=he)
אישורים
המאמר הזה נכתב על ידי Joe Medley, Kayce Basques, Milica Mihajlija, אלן קנט וקית' גו.