প্রকল্প গঠন, জীবনচক্র, এবং bundling

মিনি অ্যাপ প্রকল্পের কাঠামো

মার্কআপ ভাষা, স্টাইলিং ভাষা এবং উপাদানগুলির সাথে আগের মতো; মিনি অ্যাপ প্রজেক্ট স্ট্রাকচারের সাথেও, ফাইল এক্সটেনশন বা ডিফল্ট নামগুলির মত বিবরণ পরিবর্তিত হয়। সামগ্রিক ধারণা, যদিও, সমস্ত সুপার অ্যাপ প্রদানকারীর জন্য একই। প্রকল্প কাঠামো সর্বদা গঠিত:

  • একটি রুট ফাইল 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",
  },
});

নির্মাণ প্রক্রিয়া

মিনি অ্যাপ্লিকেশানগুলির বিল্ড প্রক্রিয়াটি বিকাশকারী থেকে দূরে সরানো হয়েছে৷ হুডের অধীনে, এটি ট্রান্সপিলেশন এবং মিনিফিকেশনের জন্য ব্যাবেল কম্পাইলার এবং পোস্টসিএসএস সিএসএস ট্রান্সফরমারের মতো শিল্প সরঞ্জাম ব্যবহার করছে। বিল্ড অভিজ্ঞতাটি Next.js বা create-react-app এর সাথে তুলনীয়, যেখানে ডেভেলপাররা, যদি তারা স্পষ্টভাবে না করতে চান, তাহলে কখনোই বিল্ড প্যারামিটার স্পর্শ করবেন না। ফলস্বরূপ প্রক্রিয়াকৃত ফাইলগুলি অবশেষে স্বাক্ষরিত, এনক্রিপ্ট করা হয় এবং এক বা একাধিক (সাব) প্যাকেজে প্যাকেজ করা হয় যা সুপার অ্যাপ প্রদানকারীদের সার্ভারে আপলোড করা হয়। সাবপ্যাকেজগুলি অলস লোড করার জন্য বোঝানো হয়েছে, তাই একটি মিনি অ্যাপ একবারে ডাউনলোড করতে হবে না। প্যাকেজিং বিশদগুলি ব্যক্তিগত এবং নথিভুক্ত নয়, তবে WeChat-এর wxapkg ফর্ম্যাটের মতো কিছু প্যাকেজ বিন্যাস বিপরীত-ইঞ্জিনিয়ার করা হয়েছে৷

স্বীকৃতি

এই নিবন্ধটি Joe Medley , Kayce Basques , Milica Mihajlija , Alan Kent , এবং Keith Gu দ্বারা পর্যালোচনা করা হয়েছে।