ساختار پروژه، چرخه عمر، و بسته بندی

Thomas Steiner

ساختار پروژه مینی برنامه

مانند قبل در مورد زبان های نشانه گذاری، زبان های یک ظاهر طراحی و اجزای سازنده. با ساختار پروژه کوچک برنامه نیز، جزئیاتی مانند پسوند فایل یا نام های پیش فرض متفاوت است. با این حال، ایده کلی برای همه ارائه دهندگان برنامه های فوق العاده یکسان است. ساختار پروژه همیشه شامل موارد زیر است:

• یک فایل root app.js که برنامه کوچک را مقداردهی اولیه می کند.
• یک فایل پیکربندی app.json که تقریباً با مانیفست برنامه وب مطابقت دارد.
• یک فایل شیوه نامه مشترک اختیاری app.css با سبک های پیش فرض مشترک.
• یک فایل project.config.json که حاوی اطلاعات ساخت است.

همه صفحات در زیر پوشه های جداگانه در یک پوشه pages ذخیره می شوند. هر زیرپوشه صفحه شامل یک فایل CSS، یک فایل JS، یک فایل HTML و یک فایل پیکربندی اختیاری JSON است. همه فایل ها به غیر از پسوند فایل باید مانند پوشه حاوی آنها نامگذاری شوند. مانند آن، برنامه mini فقط به یک اشاره گر به دایرکتوری در فایل 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 مهندسی معکوس شده‌اند.

قدردانی ها

این مقاله توسط Joe Medley ، Kayce Basques ، Milica Mihajlija ، Alan Kent و Keith Gu بررسی شده است.