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