โครงสร้าง อายุการใช้งาน และการรวมแพ็กเกจของโปรเจ็กต์

Thomas Steiner

โครงสร้างโปรเจ็กต์มินิแอป

เช่นเดียวกับภาษามาร์กอัป ภาษาการจัดรูปแบบ และองค์ประกอบ ด้วยแอปขนาดเล็ก โครงสร้างของโปรเจ็กต์ด้วยเช่นกัน รายละเอียดต่างๆ เช่น นามสกุลไฟล์หรือชื่อเริ่มต้นจะแตกต่างกันไป แนวคิดโดยรวมจะเหมือนกันสำหรับผู้ให้บริการ ซูเปอร์แอปทุกราย โครงสร้างของโครงการจะประกอบด้วย:

• ไฟล์รูท app.js ที่เริ่มต้นมินิแอป
• ไฟล์การกำหนดค่า app.json ที่ใกล้เคียงกับ ไฟล์ Manifest ของเว็บแอป
• ไฟล์ชีตสไตล์ทั่วไป app.css (ไม่บังคับ) ที่มีสไตล์เริ่มต้นที่ใช้ร่วมกัน
• ไฟล์ project.config.json ที่มีข้อมูลบิลด์

หน้าเว็บทั้งหมดจะเก็บไว้ในโฟลเดอร์ย่อยแต่ละโฟลเดอร์ใน pages โฟลเดอร์ โฟลเดอร์ย่อยของหน้าเว็บแต่ละโฟลเดอร์จะมีไฟล์ CSS, ไฟล์ JS, ไฟล์ HTML และไฟล์ JSON สำหรับการกําหนดค่า (ไม่บังคับ) ไฟล์ทั้งหมดต้องตั้งชื่อเหมือนกับโฟลเดอร์ที่เก็บไฟล์นั้นๆ ยกเว้นนามสกุลไฟล์ และแอปขนาดเล็กก็ต้องการเพียงตัวชี้ไปยังไดเรกทอรีในไฟล์ app.json (ไฟล์เหมือนไฟล์ Manifest) และค้นหาทรัพยากรย่อยทั้งหมดแบบไดนามิกได้ จากมุมมองของนักพัฒนาเว็บ มินิแอปจึงเป็นแอปหลายหน้า

├── 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

วงจรของแอปมินิ

แอปมินิต้องลงทะเบียนกับ Super App โดยเรียกใช้เมธอด App() ที่กำหนดไว้ทั่วโลก โปรดดูโครงสร้างโปรเจ็กต์ที่ระบุไว้ก่อน app.js วงจรชีวิตของมินิแอปประกอบด้วยเหตุการณ์ 4 รายการ ได้แก่ 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 ซึ่งนักพัฒนาซอฟต์แวร์จะไม่ต้องแตะต้องพารามิเตอร์การสร้างเลยหากเลือกที่จะไม่ทำ ไฟล์ที่ประมวลผลแล้วที่ได้ ได้รับการลงชื่อ เข้ารหัส และรวมแพ็กเกจไว้ในแพ็กเกจ (ย่อย) อย่างน้อย 1 แพ็กเกจ ก่อนที่จะอัปโหลด ไปยังเซิร์ฟเวอร์ของผู้ให้บริการ Super App แพ็กเกจย่อยมีไว้สำหรับการโหลดแบบเลื่อนเวลา จึงไม่ต้องดาวน์โหลดมินิแอปทั้งหมดพร้อมกัน รายละเอียดแพ็กเกจมีไว้เพื่อความเป็นส่วนตัวและไม่มีเอกสารประกอบ แต่แพ็กเกจบางรูปแบบ เช่น รูปแบบ wxapkg ของ WeChat ได้รับการวิศวกรรมย้อนกลับแล้ว

กิตติกรรมประกาศ

บทความนี้ได้รับการตรวจสอบโดย Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent และ Keith Gu