תגי עיצוב, עיצוב, סקריפטים ועדכון של מיני אפליקציות

Thomas Steiner

הערה: הפוסט הזה הוא חלק מאוסף מאמרים שבהם כל מאמר מבוסס על כתבות קודמות. אם הגעתם לכאן לפני זמן קצר, כדאי להתחיל לקרוא מהתחלה.

Markup languages

כפי שתואר קודם, במקום ב-HTML פשוט, אפליקציות קטנות נכתבות באמצעות דיאלקטים של HTML. אם שטיפלתם אי פעם באינטרפולציה של טקסט ובהוראות Vue.js, תרגישו באופן מיידי, אבל היו מושגים דומים לפני כן בטרנספורמציות XML (XSLT). למטה אפשר לראות דוגמאות קוד מתוך WeChat WXML, אבל הקונספט הוא באופן זהה בכל פלטפורמות מיני של אפליקציות, כלומר Alipay. AXML, Swan Element, ByteDance's TTML (למרות בכלי הפיתוח שקוראים לזה Bxml), HTML. בדיוק כמו ב-Vue.js, הבסיס הקונספט של תכנות אפליקציות מיני הוא model-view-viewmodel (MVVM).

קישור נתונים

קישור הנתונים תואם ל-Vue.js אינטרפולציה של טקסט.

<!-- wxml -->
<view>{{message}}</view>

// page.js
Page({
  data: {
    message: "Hello World!",
  },
});

רינדור רשימה

רינדור רשימות פועל כמו הוראת v-for של Vue.js.

<!-- wxml -->
<view wx:for="{{array}}">{{item}}</view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5],
  },
});

רינדור מותנה

רינדור מותנה פועל כמו Vue.js הוראת v-if.

<!-- wxml -->
<view wx:if="{{view == 'one'}}">One</view>
<view wx:elif="{{view == 'two'}}">Two</view>
<view wx:else="{{view == 'three'}}">Three</view>

// page.js
Page({
  data: {
    view: "three",
  },
});

תבניות

במקום לדרוש מהצורך שכפול content של תבנית HTML, אפשר להשתמש בתבניות WXML באופן הצהרתי דרך המאפיין is שמקשר להגדרת תבנית.

<!-- wxml -->
<template name="person">
  <view>
    First Name: {{firstName}}, Last Name: {{lastName}}
  </view>
</template>

<template is="person" data="{{...personA}}"></template>
<template is="person" data="{{...personB}}"></template>
<template is="person" data="{{...personC}}"></template>

// page.js
Page({
  data: {
    personA: { firstName: "Alice", lastName: "Foo" },
    personB: { firstName: "Bob", lastName: "Bar" },
    personC: { firstName: "Charly", lastName: "Baz" },
  },
});

עיצוב

העיצוב מתבצע באמצעות ניבים של CSS. השם של WeChat WXSS. השם של Alipay נקרא ACSS. ל-CSS, ול-ByteDance, נקרא TTSS. המשותף שלהם הוא שהם מרחיבים את ה-CSS באמצעות פיקסלים רספונסיביים. אם אתם כותבים CSS רגיל, מפתחים צריכים להמיר את כל יחידות הפיקסלים כדי להסתגל למסכים שונים של מכשירים ניידים מידות רוחב ויחסי פיקסלים שונים. TTSS תומך ביחידה rpx כשכבת הבסיס שלה, כלומר המיני אפליקציה משתלטת על העבודה של המפתח וממירה את היחידות בשמו, על סמך רוחב מסך שצוין של 750rpx. לדוגמה, בטלפון Pixel 3a עם רוחב מסך של 393px (ויחס הפיקסלים של המכשיר של 2.75), העיצוב של 200rpx הרספונסיביות הופך ל-104px במכשיר האמיתי אם הוא נבדק באמצעות כלי הפיתוח ל-Chrome (393 פיקסלים / 750rpx * 200rpx ≈ 104px). ב-Android, אותו קונספט נקרא פיקסל שלא תלוי בדחיסות.

מתבצעת בדיקה של המרווח הפנימי בפועל במכשיר Pixel 3a באמצעות כלי הפיתוח ל-Chrome.

/* app.wxss */
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0; /* ← responsive pixels */
  box-sizing: border-box;
}

מכיוון שרכיבים (ראו בהמשך) לא משתמשים ב-DOM צל, לכן סגנונות שהוצהרו על היקף החשיפה של הדף לכל הרכיבים. הארגון הנפוץ של קובץ גיליון סגנונות הוא הבעלים של גיליון סגנונות בסיס אחד עבור סגנונות גלובליים וגיליונות סגנונות בודדים לכל דף שמיועדים באופן ספציפי לכל דף של גרסת המיני של האפליקציה. הסגנונות יכולים לייבא באמצעות כלל @import שפועל כמו @import כלל CSS. כמו ב-HTML, אפשר גם להצהיר על סגנונות מוטבעים, כולל אינטרפולציה של טקסט דינמי (ראו before).

<view style="color:{{color}};" />

כתיבת סקריפטים

מיני אפליקציות תומכות בקבוצת משנה בטוחה של JavaScript, שכולל תמיכה במודולים שמבוססים על תחביר שמזכיר את CommonJS או RequireJS. לא ניתן להריץ קוד JavaScript דרך eval() ולא ניתן ליצור פונקציות עם new Function(). ההקשר של ביצוע סקריפטים הוא V8 או JavaScriptCore במכשירים, וב-V8 או NW.js בסימולטור. בדרך כלל אפשר לכתוב קוד עם תחביר ES6 או חדש יותר, מכיוון שכלי הפיתוח הספציפיים מעבירים באופן אוטומטי את הקוד ל-ES5 אם יעד ה-build מערכת הפעלה עם הטמעת WebView ישנה יותר (ראו בהמשך). בתיעוד של ספקי האפליקציות-העל מצוין במפורש ששפות הסקריפט שלהם אינן להבדיל מ-JavaScript, עם זאת, ההצהרה הזו מתייחסת בעיקר באופן שבו מודולים פועלים, כלומר שהם לא תומכים עדיין יש מודולים של ES.

כפי שצוין קודם, קונספט התכנות של מיני אפליקציות הוא model-view-viewmodel (MVVM). השכבה הלוגית ושכבת התצוגה רצות בשרשורים שונים. כלומר, ממשק המשתמש לא נחסמות בגלל פעולות ממושכות. במונחי אינטרנט, אפשר לחשוב על סקריפטים שפועלים Web Worker.

שפת הסקריפטים של WeChat נקראת WXS, Alipay SJS, כמו של ByteDance. SJS. מערכת Baidu מדברת על JS כהפניה שלו. צריך לכלול את הסקריפטים האלה באמצעות סוג מיוחד של תג, לדוגמה, <wxs> ב- WeChat. לעומת זאת, האפליקציה המהירה משתמשת בתגי <script> רגילים וב-ES6 תחביר JS.

<wxs module="m1">
  var msg = "hello world";
  module.exports.message = msg;
</wxs>

<view>{{m1.message}}</view>

אפשר לטעון את המודולים גם דרך המאפיין src או לייבא אותם דרך require().

// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
};
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>

// /pages/logic.wxs
var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

ממשק API של גשר JavaScript

גשר ה-JavaScript שמחבר בין אפליקציות קטנות למערכת ההפעלה מאפשר כדי להשתמש ביכולות של מערכת ההפעלה (מידע נוסף זמין במאמר גישה לתכונות מתקדמות). הוא יש גם כמה שיטות נוחות. לסקירה כללית של ממשקי ה-API השונים של WeChat, Alipay, Baidu, ByteDance, ואפליקציה מהירה.

זיהוי התכונות הוא פשוט, מכיוון שכל הפלטפורמות מספקות שיטה canIUse() ששמה נראה בהשראת האתר caniuse.com. עבור לדוגמה, "ByteDance" tt.canIUse() מאפשר בדיקות תמיכה עבור ממשקי API, שיטות, פרמטרים, אפשרויות, רכיבים ומאפיינים.

// Testing if the `<swiper>` component is supported.
tt.canIUse("swiper");
// Testing if a particular field is supported.
tt.canIUse("request.success.data");

הצלחה: הפרק הבא מציג את רכיבי מיני של אפליקציה.

עדכונים

לאפליקציות מיני אין מנגנון עדכון סטנדרטי (דיון בנושא תקן כלשהו). בכל פלטפורמות מיני של האפליקציות יש מערכת קצה עורפי שמאפשרת למפתחי אפליקציות קטנים להעלות גרסאות חדשות של את האפליקציות המינימליות שלהם. לאחר מכן, סופר-אפליקציית משתמשת במערכת הקצה העורפי הזו כדי לבדוק אם יש עדכונים ולהוריד אותם. כמה אפליקציות-על לבצע עדכונים ברקע בלבד, בלי שאפליקציית המיני-אפליקציה עצמה תשפיע על העדכון . אפליקציות-על אחרות נותנות יותר שליטה במיני אפליקציות עצמן.

למשל, דוגמה לתהליך מתוחכם. בפסקאות הבאות מתואר מנגנון העדכון של WeChat למיני אפליקציות בצורה מפורטת יותר. WeChat בודק אם יש עדכונים זמינים בשני התרחישים הבאים:

1. כל עוד WeChat פועל, אנחנו בודקים בקביעות אם יש עדכונים עבור אפליקציות מיני שהיו בשימוש לאחרונה. אם נמצא עדכון, מתבצעת הורדה של העדכון ומיושמת באופן סינכרוני בפעם הבאה שהמשתמש מפעיל את הדפדפן במצב התחלתי (cold start) מיני אפליקציה. הפעלה של מיני אפליקציות במצב התחלתי (cold start) מתרחשת כשגרסת המיני של האפליקציה לא פועלת כרגע כשהמשתמש פתח אותה (WeChat באילוץ סגירה של מיני אפליקציות אחרי שהיו ברקע במשך 5 דקות).
2. WeChat גם בודק אם יש עדכונים כאשר מיני אפליקציה מופעלת במצב התחלתי (cold start). באפליקציות קטנות שהמשתמש לא פתח במשך זמן רב, העדכון נבדק ומוריד באופן סינכרוני. במהלך הורדת העדכון, המשתמש צריך להמתין. כשההורדה תסתיים, העדכון יוחל ואפליקציית המיני תיפתח. אם ההורדה נכשלה, למשל בגלל קישוריות רשת לא טובה, גרסת המיני של האפליקציה תיפתח ללא קשר. לאפליקציות קטנות שהמשתמש פתח לאחרונה, מתבצעת הורדה אסינכרונית של עדכון פוטנציאלי ברקע, בפעם הבאה שהמשתמש יפעיל את גרסת המיני של האפליקציה במצב התחלתי (cold start).

אפשר להביע הסכמה לקבלת עדכונים קודמים באמצעות מיני אפליקציות באמצעות ה-API של UpdateManager. היא מספקת את הפונקציונליות הבאה:

• נשלחת התראה למיני אפליקציה כשמתבצעת בדיקה של עדכונים. (onCheckForUpdate)
• שולחת התראה למיני אפליקציה כשהורדת עדכון זמין. (onUpdateReady)
• מודיעה למיני אפליקציה אם לא ניתן להוריד עדכון. (onUpdateFailed)
• מאפשרת לאפליקציית המיני להתקין לפי הגדרת האדמין עדכון זמין. עדכון זמין יגרום להפעלה מחדש של האפליקציה. (applyUpdate)

WeChat מספקת גם אפשרויות נוספות להתאמה אישית של עדכונים עבור מפתחי אפליקציות קטנים במערכת הקצה העורפי שלה: 1. אפשרות אחת מאפשרת למפתחים לבטל את הסכמתם לעדכונים סינכרוניים עבור משתמשים שכבר יש להם את הגרסה המינימלית של אפליקציית המיני שהותקנה, ובמקום זאת מאלצת את העדכונים להיות אסינכרוניים. 2. אפשרות אחרת מאפשרת למפתחים להגדיר גרסת מיני מינימלית נדרשת של האפליקציה. הפעולה הזו עדכונים אסינכרוניים מגרסה ישנה יותר מהגרסה המינימלית הנדרשת, יאלץ טעינה מחדש של אפליקציית המיני לאחר החלת העדכון. כמו כן, תיחסם האפשרות לפתוח גרסה ישנה יותר של המיני אפליקציה אם מורידים העדכון נכשל.

אישורים

המאמר הזה נבדק על ידי ג'ו מדלי, קייס בסקית, Milica Mihajlija, אלן קנט, וקית גו.