โครงสร้างโปรเจ็กต์แอปขนาดเล็ก
เช่นเดียวกับภาษามาร์กอัป ภาษาในการจัดรูปแบบ และคอมโพเนนต์ต่างๆ เช่นเดียวกับก่อนหน้านี้ โครงสร้างโปรเจ็กต์แอปขนาดเล็กทำให้รายละเอียดต่างๆ เช่น นามสกุลไฟล์หรือชื่อเริ่มต้นจะแตกต่างกันไป แนวคิดโดยรวมจะเหมือนกันสำหรับผู้ให้บริการ 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 ที่นักพัฒนาแอปเลือกที่จะไม่ใช้อย่างชัดแจ้ง จะไม่แตะพารามิเตอร์ของบิลด์เลย ท้ายที่สุดไฟล์ที่ประมวลผลได้จะมีการรับรอง เข้ารหัส และรวมแพ็กเกจไว้ในแพ็กเกจ (Sub) 1 แพ็กเกจหรือหลายแพ็กเกจ ซึ่งจะอัปโหลดไปที่เซิร์ฟเวอร์ของผู้ให้บริการ Super App แพ็กเกจย่อยมีไว้เพื่อการโหลดแบบ Lazy Loading ดังนั้นแอปมินิจึงไม่ต้องดาวน์โหลดพร้อมกันทั้งหมด รายละเอียดแพ็กเกจควรเป็นแบบส่วนตัวและไม่มีการบันทึก แต่รูปแบบแพ็กเกจบางรูปแบบ เช่น รูปแบบ wxapkg ของ WeChat ได้รับวิศวกรรมย้อนกลับ
กิตติกรรมประกาศ
บทความนี้ได้รับการตรวจสอบโดย Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent และ Keith Gu