بنية مشروع التطبيقات المصغّرة
كما هو الحال مع لغات الترميز ولغات التصميم والمكوّنات، تختلف التفاصيل مثل امتدادات الملفات أو الأسماء التلقائية أيضًا في بنية التطبيقات المصغرة. ومع ذلك، فإنّ الفكرة العامة متطابقة لجميع موفّري التطبيقات الشاملة. تتألف بنية المشروع دائمًا من:
- ملف جذر
app.js
لإعداد التطبيق المصغّر - ملفّ إعدادات
app.json
يتوافق تقريبًا مع بيان تطبيق الويب - ملف اختياري لجدول الأنماط العام
app.css
يتضمّن أنماطًا تلقائية مشترَكة - ملف
project.config.json
يحتوي على معلومات الإصدار
يتم تخزين جميع الصفحات في مجلدات فرعية فردية في مجلد
pages
. يحتوي كل مجلد فرعي للصفحة على ملف CSS وملف JS وملف HTML وملف اختياري
ملف JSON للإعدادات. يجب تسمية جميع الملفات مثل المجلد الذي تحتوي عليه، باستثناء امتدادات الملف. بهذه الطريقة، يحتاج التطبيق المصغّر إلى مؤشر إلى الدليل في ملف app.json
(الملف الذي يشبه البيان)، ويمكنه العثور على جميع الموارد الفرعية بشكل ديناميكي. من وجهة نظر مطوّر الويب، تكون التطبيقات المصغّرة هي تطبيقات متعددة الصفحات.
├── app.js # Initialization logic
├── app.json # Common configuration
├── app.css # Common style sheet
├── project.config.json # Project configuration
└── pages # List of pages
├── index # Home page
│ ├── index.css # Page style sheet
│ ├── index.js # Page logic
│ ├── index.json # Page configuration
│ └── index.html # Page markup
└── other # Other page
├── other.css # Page style sheet
├── other.js # Page logic
├── other.json # Page configuration
└── other.html # Page markup
مراحل نشاط التطبيق المصغّر
يجب تسجيل تطبيق صغير في التطبيق الفائق من خلال استدعاء طريقة App()
المحدّدة على مستوى التطبيق.
بالرجوع إلى بنية المشروع الموضّحة سابقًا، يحدث ذلك في
app.js
. تتألف دورة حياة التطبيقات المصغّرة بشكل أساسي من أربعة أحداث: launch
وshow
وhide
و
error
. يمكن تمرير معالِجات هذه الأحداث إلى طريقة App()
في شكل ملف تكوين، والذي يمكن أن يحتوي أيضًا على سمة globalData
تحتوي على بيانات يجب أن تكون متوفرة بشكلٍ عام في جميع الصفحات.
/* app.js */
App({
onLaunch(options) {
// Do something when the app is launched initially.
},
onShow(options) {
// Do something when the app is shown.
},
onHide() {
// Do something when the app is hidden.
},
onError(msg) {
console.log(msg);
},
globalData: "I am global data",
});
تختلف التفاصيل الفردية كالمعتاد، ولكن يبقى المفهوم نفسه ساريًا على WeChat و Alipay و Baidu و ByteDance و Quick App أيضًا.
مراحل النشاط في الصفحة
على غرار دورة حياة التطبيق، تتضمّن دورة حياة الصفحة أيضًا أحداث دورة حياة يمكن للمطوّر
الانتباه إليها والتفاعل معها. هذه الأحداث الأساسية هي load
وshow
وready
وhide
وunload
. توفّر بعض
الأنظمة الأساسية أحداثًا إضافية مثل pulldownrefresh
. يتمّ إعداد معالجات الأحداث في
طريقة Page()
المحدّدة لكلّ صفحة. بالنسبة إلى صفحات index
أو other
من
هيكل المشروع قبل، سيحدث ذلك في index.js
أو
other.js
على التوالي.
/* index.js */
Page({
data: {
text: "This is page data.",
},
onLoad: function (options) {
// Do something when the page is initially loaded.
},
onShow: function () {
// Do something when the page is shown.
},
onReady: function () {
// Do something when the page is ready.
},
onHide: function () {
// Do something when the page is hidden.
},
onUnload: function () {
// Do something when the page is closed.
},
onPullDownRefresh: function () {
// Do something when the user pulls down to refresh.
},
onReachBottom: function () {
// Do something when the user scrolls to the bottom.
},
onShareAppMessage: function () {
// Do something when the user shares the page.
},
onPageScroll: function () {
// Do something when the user scrolls the page.
},
onResize: function () {
// Do something when the user resizes the page.
},
onTabItemTap(item) {
// Do something when the user taps the page's tab.
},
customData: {
foo: "bar",
},
});
عملية التصميم
لا يتعامل المطوّر مع عملية إنشاء التطبيقات المصغّرة. في الخلفية، يستخدم الإطار
أدوات متخصّصة في المجال، مثل مُجمِّع Babel لعملية التحويل والتصغير وPostCSS لتحويل لغة CSS. تشبه تجربة الإنشاء تجربة استخدام
Next.js أو
create-react-app
، حيث لا يغيّر المطوّرون مَعلمات الإنشاء أبدًا، ما لم يكن
اختيارهم صراحةً هو عدم إجراء ذلك. أخيرًا، يتم توقيع الملفات التي تمت معالجتها
وتشفيرها وتعبئتها في حزمة واحدة أو عدة حِزم فرعية يتم تحميلها
بعد ذلك إلى خوادم مقدّمي التطبيقات الشاملة. تم تصميم الحِزم الفرعية للتحميل غير المتزامن، لذا ليس من الضروري تنزيل تطبيق صغير
كله دفعة واحدة. من المفترض أن تكون تفاصيل الحزمة خاصة ولا يتم تدوينها، ولكن تم الهندسة العكسية لبعض تنسيقات الحِزم، مثل تنسيق wxapkg
في WeChat.
الشكر والتقدير
تمت مراجعة هذه المقالة من قِبل جو ميدلي، كايسي باسكيز، ميليكا ميهايليا، آلان كينت، و"كيت غو".