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;
kbone-ui
פרויקט kbone-ui (קוד פתוח ב-GitHub) הוא מסגרת של ממשק משתמש שמסייעת לפיתוח של מיני אפליקציות וגם לפיתוח של 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 (ראו Styling למעלה), weui.js לאפליקציות אינטרנט ו-react-weui לרכיבי WeChat React.
אומי
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, שמפיקה פלט של אלמנטים מותאמים אישית של רכיבי אינטרנט סטנדרטיים.
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>
vConsole
פרויקט vConsole מספק כלי קל ומתרחב למפתחים של ממשקי קצה לדפי אינטרנט לנייד. הוא כולל כלי לניפוי באגים דמוי כלי פיתוח, שאפשר להחדיר ישירות לאפליקציות אינטרנט ולמיני-אפליקציות. הדגמה מציגה את ההזדמנויות. ה-vConsole כולל כרטיסיות ליומנים, למערכת, לרשת, לרכיבים ולאחסון.
weweb, וווב, ווב
פרויקט weweb (קוד פתוח ב-GitHub) הוא ה-framework שבבסיס אפליקציות המיני של Hera, שמתיימר להיות תואם לתחביר של אפליקציות המיני של WeChat, כך שאפשר לכתוב אפליקציות אינטרנט כמו מיני אפליקציות. המסמכים מבטיחים שאם כבר יש לכם מיני אפליקציה, תוכלו להריץ אותה בדפדפן הודות ל-weweb. בניסויים שלי זה לא עבד בצורה אמינה באפליקציות מיני קיימות, כנראה כי לא נמצאו עדכונים בפרויקט לאחרונה שגרמו למהדר שלו להחמיץ שינויים בפלטפורמת WeChat.
אישורים
המאמר הזה נכתב על ידי Joe Medley, Kayce Basques, Milica Mihajlija, אלן קנט וקית' גו.