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

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

ขอขอบคุณ

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