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

Thomas Steiner

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

كما ذكرنا سابقًا، يتم إنشاء التطبيقات المصغّرة باستخدام لهجات HTML بدلاً من HTML العادي. إذا سبق لك التعامل مع استيفاء النصوص والتوجيهات في Vue.js، ستشعر بأنّك في مكانك، ولكن كانت هناك مفاهيم مشابهة قبل ذلك بكثير في تحويلات XML‏ (XSLT). في ما يلي، يمكنك الاطّلاع على نماذج رموز من WXML في WeChat، ولكن المفهوم هو نفسه في جميع منصات التطبيقات المصغّرة، أي AXML في Alipay وSwan Element في Baidu وTTML في ByteDance (على الرغم من أنّ DevTools تسمّيها Bxml) وHTML في Quick App. كما هو الحال مع Vue.js، فإنّ المفهوم الأساسي لبرمجة التطبيقات المصغّرة هو نموذج عرض نموذج العرض (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],
  },
});

العرض الشرطي

يعمل العرض الشرطي مثل توجيه v-if في Vue.js.

<!-- 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. يُطلق على نظام CSS الخاص بـ Alipay اسم ACSS، وعلى نظام CSS الخاص بـ Baidu اسم CSS، أما نظام CSS الخاص بـ ByteDance، فيُطلق عليه اسم TTSS. والقاسم المشترك بينها هو أنّها توسّع CSS باستخدام وحدات بكسل متجاوبة. عند كتابة CSS العادي، يحتاج المطوّرون إلى تحويل جميع وحدات البكسل لتتلاءم مع شاشات الأجهزة الجوّالة المختلفة التي تتضمّن عروضًا ونسب بكسل مختلفة. تتيح خدمة تحويل النص إلى كلام استخدام وحدة rpx كطبقة أساسية، ما يعني أنّ التطبيق المصغّر يتولّى مهمة التحويل نيابةً عن المطوّرين، وذلك استنادًا إلى عرض شاشة محدّد يبلغ 750rpx. على سبيل المثال، على هاتف Pixel 3a بعرض شاشة يبلغ 393px (ونسبة وحدات البكسل على الجهاز تبلغ 2.75)، تصبح 200rpx المتجاوبة 104px على الجهاز الفعلي عند فحصها باستخدام &quot;أدوات مطوّري البرامج في Chrome&quot; (393 بكسل / 750 وحدة rpx * 200 وحدة rpx ≈ 104 بكسل). في نظام التشغيل Android، يُطلق على المفهوم نفسه اسم وحدة بكسل مستقلة عن الكثافة.

عند فحص طريقة عرض باستخدام &quot;أدوات مطوّري البرامج في Chrome&quot; تم تحديد مساحة الحشو التفاعلية بالبكسل فيها باستخدام `200rpx`، يتبيّن أنّها في الواقع `104px` على جهاز 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، يمكن أيضًا تحديد الأنماط بشكل مضمّن، بما في ذلك استيفاء النص الديناميكي (راجِع قبل).

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

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

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

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

يُطلق على لغة البرمجة النصية في WeChat اسم WXS، وفي Alipay اسم 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 Bridge

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

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

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

الإقرارات

تمت مراجعة هذه المقالة من قِبل جو ميدلي و كايس باسكس و ميليكا ميهايليا و آلان كينت و&quot;كيث غو&quot;.