โครงสร้างโปรเจ็กต์ของแอปขนาดเล็ก
เช่นเดียวกับภาษามาร์กอัป ภาษาการจัดรูปแบบ และคอมโพเนนต์ก่อนหน้านี้ รายละเอียดต่างๆ เช่น นามสกุลไฟล์หรือชื่อเริ่มต้นก็มีโครงสร้างโปรเจ็กต์แอปขนาดเล็กด้วยเช่นกัน แต่แนวคิดในภาพรวมจะเหมือนกันสำหรับผู้ให้บริการ 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