ترميز التطبيقات المصغّرة وتصميمها وبرمجتها وتحديثها

Thomas Steiner

اللغات الترميزية

كما هو موضح من قبل، بدلاً من استخدام HTML العادي، تتم كتابة التطبيقات المصغّرة باستخدام لهجات HTML. إذا كنت تعاملت من قبل مع استقراء وتوجيهات نصوص Vue.js، فستشعر على الفور، ولكن كانت هناك مفاهيم مماثلة كانت موجودة قبل ذلك في عمليات تحويل XML (XSLT). يمكنك الاطّلاع أدناه على عيّنات تعليمات برمجية من تطبيق WeChat WXML، ولكن المفهوم هو وهو نفسه لجميع منصات التطبيقات المصغّرة، ألا وهي منصة Alipay وAXML، وملفات Baidu عنصر Swan، فئة ByteDance ملف 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، وهي منصة Baidu وCSS، وبالنسبة إلى ByteDance، اللهجة على أنها تحويل النص إلى كلام (TTSS) والقاسم المشترك بينهما هو أنها تعمل على توسيع CSS باستخدام وحدات بكسل متجاوبة. عند كتابة CSS عادية، يحتاج المطورون إلى تحويل جميع وحدات البكسل للتكيّف مع شاشات الأجهزة المحمولة المختلفة العرض ونسب البكسل المختلفة. تتوافق تقنية "تحويل النص إلى كلام" (TTSS) مع وحدة rpx كطبقتها الأساسية، ما يعني وسيتولى التطبيق المصغَّر المهمة من المطور وتحويل الوحدات نيابةً عنه، بناءً على عرض الشاشة المحدد بـ 750rpx. على سبيل المثال، على هاتف Pixel 3a الذي يبلغ عرض الشاشة فيه 393px (ونسبة وحدات البكسل على الجهاز تبلغ 2.75)، لتصبح 200rpx المتجاوبة 104px على الجهاز الفعلي عند فحصه باستخدام "أدوات مطوري البرامج في Chrome" (393 بكسل / 750rpx * 200rpx ≈ 104 بكسل). في Android، نفس المفهوم يسمى وحدة بكسل مستقلة الكثافة

عند فحص ملف شخصي باستخدام &quot;أدوات مطوري البرامج في Chrome&quot; تم تحديد المساحة المتروكة السريعة الاستجابة بها باستخدام &quot;200rpx&quot; تُظهر أنّه &quot;104 بكسل&quot; على جهاز Pixel 3a.
فحص المساحة المتروكة الفعلية على جهاز 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;
}

بما أنّ المكوّنات (راجِع لاحقًا) لا تستخدم shadow DOM، فإنّ الأنماط المعلَن عنها في مدى الوصول إلى الصفحة إلى جميع المكونات. يتمثل تنظيم ملف ورقة الأنماط الشائع في استخدام ورقة أنماط جذر واحدة وأنماط عامة وأوراق أنماط فردية لكل صفحة خاصة بكل صفحة من التطبيق المصغّر. يمكن للأنماط باستخدام قاعدة @import تعمل مثل @import قاعدة CSS. كما هو الحال في HTML، كما يمكن الإعلان عن الأنماط المُضمنة، بما في ذلك استقراء النص الديناميكي (راجع before).

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

نص الفيديوهات

توافق التطبيقات المصغّرة مع "مجموعة فرعية آمنة" من لغة JavaScript التي تشمل دعمًا للوحدات التي تستخدم خيارات التي تذكر بـ CommonJS أو RequireJS. لا يمكن تنفيذ رمز JavaScript عبر eval() ولا يمكن إنشاء دوال باستخدام new Function() سياق تنفيذ البرمجة النصية هو V8 أو JavaScriptCore على الأجهزة وV8 أو NW.js في المحاكي. عادةً ما يكون الترميز باستخدام ES6 أو بنية أحدث، لأنّ أدوات مطوّري البرامج تُحوِّل الرمز تلقائيًا إلى ES5 إذا كان هدف الإصدار مع تطبيق WebView قديم (انظر لاحقًا). تشير رسالة الأشكال البيانية أن مستندات موفري التطبيقات المتميزين تذكر أن لغات البرمجة النصية الخاصة بهم الخلط بين لغة البرمجة JavaScript وتمييزها عن لغة JavaScript ومع ذلك، تشير هذه العبارة في الغالب إلى طريقة عمل الوحدات، أي أنها لا تتوافق مع معايير وحدات اللغة الإسبانية حتى الآن

كما ذكرنا من قبل، فإن مفهوم برمجة التطبيقات المصغّرة هو model-view-viewmodel (MVVM). تعمل الطبقة المنطقية وطبقة العرض على سلاسل محادثات مختلفة، مما يعني أن واجهة المستخدم لا تعطُّلها بسبب عمليات طويلة الأمد. في مصطلحات الويب، يمكنك التفكير في النصوص البرمجية التي تعمل في Web Worker:

يُطلق على لغة البرمجة النصية في WeChat WXS، وAlipay's وSJS، تستخدم ByteDance بالمثل SJS Baidu تتحدث عن JS عند الإشارة إلى رسائلهم. يجب تضمين هذه النصوص البرمجية باستخدام نوع خاص من العلامات، على سبيل المثال، <wxs> في WeChat. في المقابل، يستخدم تطبيق Quick App علامات <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);

واجهة برمجة تطبيقات جسر JavaScript

ويتيح جسر JavaScript الذي يربط التطبيقات المصغّرة بنظام التشغيل إمكانية تحقيق لاستخدام إمكانات نظام التشغيل (يمكنك الاطّلاع على الوصول إلى ميزات فعّالة. أُنشأها جون هنتر، الذي كان متخصصًا أيضًا عددًا من الطرق الملائمة. لإلقاء نظرة عامة، يمكنك الاطلاع على واجهات برمجة التطبيقات المختلفة من WeChat Alipay، Baidu، ByteDance, والتطبيق السريع.

يُعد اكتشاف الميزات أمرًا بسيطًا، نظرًا لأن جميع الأنظمة الأساسية توفر (ما يُعرف حرفيًا بذلك) canIUse() التي يبدو اسمها مستوحى من الموقع الإلكتروني caniuse.com. بالنسبة مثال، تعد صورة ByteDance tt.canIUse() تسمح بعمليات التحقق من الدعم لواجهات برمجة التطبيقات والطرق والمعلمات والخيارات والمكونات والسمات.

// 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 بانتظام عن تحديثات التطبيقات المصغّرة التي تم استخدامها مؤخرًا طالما كان تطبيق WeChat قيد التشغيل. إذا كانت ثم يتم تنزيل التحديث وتطبيقه بشكل متزامن في المرة التالية التي يبدأ فيها المستخدم تشغيل التطبيق المصغّر. يحدث التشغيل البارد للتطبيقات المصغَّرة عندما لا يكون التطبيق المصغّر قيد التشغيل في الوقت الحالي عندما يكون المستخدم فتحه (يفرض تطبيق WeChat التطبيقات المصغّرة بعد ظهورها في الخلفية لمدة 5 دقائق).
  2. يبحث WeChat أيضًا عن التحديثات عند بدء تشغيل تطبيق مصغّر على البارد. للتطبيقات المصغّرة التي لم يفتحها المستخدم يتم البحث عن التحديث وتنزيله بشكل متزامن لفترة طويلة. أثناء تنزيل التحديث، يتعين على المستخدم الانتظار. بعد انتهاء عملية التنزيل، يتم تطبيق التحديث وفتح التطبيق المصغّر. إذا كانت تعذُّر التنزيل، بسبب سوء اتصال بالشبكة مثلاً، يفتح التطبيق المصغّر بغض النظر عن ذلك. بالنسبة إلى التطبيقات المصغّرة التي فتحه المستخدم مؤخرًا، ويتم تنزيل أي تحديث محتمل بشكل غير متزامن في الخلفية وسيتم في المرة التالية التي يشغّل فيها المستخدم التطبيق المصغر.

يمكن للتطبيقات المصغّرة تفعيل التحديثات السابقة باستخدام واجهة برمجة التطبيقات UpdateManager. يوفر الوظائف التالية:

  • يتم إرسال إشعار إلى التطبيق المصغّر عند البحث عن تحديثات. (onCheckForUpdate)
  • إرسال إشعار إلى التطبيق المصغّر عند تنزيل تحديث وتوفّره (onUpdateReady)
  • يتم إرسال إشعار إلى التطبيق المصغّر عند تعذُّر تنزيل تحديث. (onUpdateFailed)
  • يسمح هذا الإذن للتطبيق المصغّر بتثبيت تحديث متوفّر تلقائيًا، ما يؤدي إلى إعادة تشغيل التطبيق. (applyUpdate)

يوفّر تطبيق WeChat أيضًا خيارات تخصيص إضافية للتحديث لمطوّري التطبيقات المصغّرة في نظامها الخلفي: 1- يتيح أحد الخيارات للمطوّرين إيقاف التحديثات المتزامنة للمستخدمين الذين لديهم بالفعل خيار معين الإصدار الأدنى من التطبيق المصغَّر المثبّت، وفرض أن تكون التحديثات غير متزامنة بدلاً من ذلك. 2. هناك خيار آخر يتيح للمطوّرين ضبط الحد الأدنى المطلوب للإصدار المصغَّر من تطبيقاتهم. سيؤدي هذا إلى تحديثات غير متزامنة من إصدار أقل من الحد الأدنى المطلوب للإصدار، يُرجى فرض إعادة تحميل التطبيق المصغّر بعد وتطبيق التحديث. كما سيؤدي إلى حظر فتح إصدار قديم من التطبيق المصغّر في حال تنزيل فشل التحديث.

شكر وتقدير

تمت مراجعة هذه المقالة بواسطة جو ميدلي، كايس باسك، ميليكا ميهاجيليجا، آلان كينت، وكيث جو.