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

Thomas Steiner

หมายเหตุ: โพสต์นี้เป็นส่วนหนึ่งของคอลเล็กชันบทความที่แต่ละบทความสร้างขึ้นโดยต่อยอดจากบทความก่อนหน้า หากคุณเพิ่งมาถึงที่นี่ คุณควรเริ่มอ่านตั้งแต่จุดเริ่มต้น

โครงสร้างโปรเจ็กต์ของแอปขนาดเล็ก

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

• ไฟล์รูท 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

วงจรของหน้า

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

ความสำเร็จ: บทถัดไปจะให้ข้อมูลเชิงลึกเกี่ยวกับความพยายามในการกําหนดมาตรฐานของแอปขนาดเล็ก

ข้อความแสดงการยอมรับ

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