ประสบการณ์การใช้งานของนักพัฒนาแอป
ตอนนี้ฉันได้พูดถึงมินิแอป โดยตัวมันเอง แล้ว ฉันจึงอยากจะมุ่งเน้นไปที่ประสบการณ์ของนักพัฒนาแอปสำหรับแพลตฟอร์มซูเปอร์แอปต่างๆ การพัฒนามินิแอปในทุกแพลตฟอร์มเกิดขึ้นใน IDE ที่แพลตฟอร์มซูเปอร์แอปให้บริการฟรี แม้ว่าจะมีมากกว่านี้ แต่ฉันอยากจะมุ่งเน้นไปที่ 4 แพลตฟอร์มที่ได้รับความนิยมมากที่สุด และแพลตฟอร์มที่ 5 สำหรับ Quick App เพื่อใช้ในการเปรียบเทียบ
IDE ของมินิแอป
IDE ส่วนใหญ่มีให้บริการเป็นภาษาจีนเท่านั้น เช่นเดียวกับซูเปอร์แอป คุณควรติดตั้งเวอร์ชันภาษาจีน ไม่ใช่เวอร์ชันภาษาอังกฤษ (หรือเวอร์ชันต่างประเทศ) ที่บางครั้งอาจมีให้บริการ เนื่องจากเวอร์ชันภาษาอังกฤษอาจไม่ใช่เวอร์ชันล่าสุด หากคุณเป็นนักพัฒนาแอป macOS โปรดทราบว่า IDE บางตัวไม่ได้ลงชื่อ ซึ่งหมายความว่า macOS จะปฏิเสธที่จะเรียกใช้โปรแกรมติดตั้ง คุณสามารถข้ามขั้นตอนนี้ได้โดยต้องยอมรับความเสี่ยงเอง ตามที่ระบุไว้ในความช่วยเหลือของ Apple
- เครื่องมือสำหรับนักพัฒนาเว็บของ WeChat
- เครื่องมือสำหรับนักพัฒนาเว็บของ Alipay
- เครื่องมือสำหรับนักพัฒนาเว็บของ Baidu
- เครื่องมือสำหรับนักพัฒนาเว็บของ ByteDance
- เครื่องมือสำหรับนักพัฒนาเว็บของ Quick App
โปรเจ็กต์เริ่มต้นของมินิแอป
ผู้ให้บริการซูเปอร์แอปทุกรายมีแอปเดโมให้ดาวน์โหลดและทดสอบได้ทันที และบางครั้งก็ผสานรวมอยู่ในวิซาร์ด "โปรเจ็กต์ใหม่" ของ IDE ต่างๆ ด้วย เพื่อให้คุณเริ่มต้นพัฒนามินิแอปได้อย่างรวดเร็ว
ขั้นตอนการพัฒนา
หลังจากเปิด IDE และโหลดหรือสร้างมินิแอป (เดโม) แล้ว ขั้นตอนแรกคือการเข้าสู่ระบบเสมอ โดยปกติคุณเพียงแค่ต้องสแกนคิวอาร์โค้ดด้วยซูเปอร์แอป (ที่คุณเข้าสู่ระบบอยู่แล้ว) ที่ IDE สร้างขึ้น คุณไม่จำเป็นต้องป้อนรหัสผ่านบ่อยนัก เมื่อเข้าสู่ระบบแล้ว IDE จะทราบข้อมูลประจำตัวของคุณและอนุญาตให้คุณเริ่มเขียนโปรแกรม แก้ไขข้อบกพร่อง ทดสอบ และส่งแอปเพื่อรับการตรวจสอบ ในส่วนต่อไปนี้ คุณจะเห็นภาพหน้าจอของ IDE ทั้ง 5 รายการที่กล่าวถึงในย่อหน้าด้านบน
อย่างที่คุณเห็น องค์ประกอบพื้นฐานของ IDE ทั้งหมดมีความคล้ายคลึงกันมาก คุณจะมีโปรแกรมแก้ไขโค้ด
ที่อิงตาม Monaco Editor ซึ่งเป็นโปรเจ็กต์เดียวกัน
กับที่ขับเคลื่อน VS Code IDE ทั้งหมดมีดีบักเกอร์ ที่อิงตามส่วนหน้าของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome พร้อม การแก้ไขบางอย่าง ซึ่งจะกล่าวถึงในภายหลัง (ดูดีบักเกอร์) IDE โดยตัวมันเอง ได้รับการ
ติดตั้งใช้งานเป็นNW.js หรือElectron ส่วน
เครื่องจำลองใน IDE ได้รับการติดตั้งใช้งานเป็น
แท็ก <webview> ของ NW.js หรือ
แท็ก <webview> ของ Electron ซึ่งอิงตาม
แท็ก <webview> ของ Chromium หากสนใจการทำงานภายในของ IDE คุณสามารถตรวจสอบ IDE ได้อย่างง่ายดายด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โดยใช้แป้นพิมพ์ลัด Control+Alt+I (หรือ
Command+Option+I ใน Mac)
<webview> ของ Electron
การทดสอบและการแก้ไขข้อบกพร่องด้วยเครื่องจำลองและอุปกรณ์จริง
เครื่องจำลองเทียบได้กับโหมดอุปกรณ์ ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คุณสามารถจำลองอุปกรณ์ Android และ iOS ต่างๆ เปลี่ยนสเกลและการวางแนวอุปกรณ์ รวมถึงจำลองสถานะเครือข่ายต่างๆ แรงกดดันของหน่วยความจำ เหตุการณ์การอ่านบาร์โค้ด การสิ้นสุดที่ไม่คาดคิด และโหมดมืด
แม้ว่าเครื่องจำลองในตัวจะเพียงพอที่จะให้ความรู้สึกคร่าวๆ เกี่ยวกับลักษณะการทำงานของแอป แต่การทดสอบในอุปกรณ์จริงก็ทดแทนไม่ได้ เช่นเดียวกับเว็บแอปทั่วไป การทดสอบมินิแอปที่อยู่ระหว่างการพัฒนาทำได้ง่ายๆ เพียงแค่สแกนคิวอาร์โค้ด ตัวอย่างเช่น ในเครื่องมือสำหรับนักพัฒนาเว็บของ ByteDance การสแกนคิวอาร์โค้ดที่ IDE สร้างขึ้นแบบไดนามิกด้วยอุปกรณ์จริงจะนำไปสู่มินิแอปเวอร์ชันที่โฮสต์บนระบบคลาวด์ ซึ่งสามารถทดสอบในอุปกรณ์ได้ทันที วิธีที่ ByteDance ใช้คือ URL ที่อยู่เบื้องหลังคิวอาร์โค้ด (ตัวอย่าง) จะเปลี่ยนเส้นทางไปยังหน้าเว็บที่โฮสต์ (ตัวอย่าง) ซึ่งมีลิงก์ที่มีสคีม URI พิเศษ เช่น snssdk1128:// เพื่อแสดงตัวอย่างมินิแอปในซูเปอร์แอปต่างๆ ของ ByteDance เช่น Douyin หรือ Toutiao (นี่คือ ตัวอย่าง)
ผู้ให้บริการซูเปอร์แอปรายอื่นๆ จะไม่ผ่านหน้าเว็บกลาง แต่จะเปิดตัวอย่างโดยตรง
ฟีเจอร์ที่น่าสนใจยิ่งกว่าคือการแก้ไขข้อบกพร่องระยะไกลในการแสดงตัวอย่างในระบบคลาวด์ หลังจากสแกนคิวอาร์โค้ดพิเศษที่ IDE สร้างขึ้น มินิแอปจะเปิดขึ้นในอุปกรณ์จริง โดยมีหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ทำงานบนคอมพิวเตอร์เพื่อการแก้ไขข้อบกพร่องระยะไกล
ดีบักเกอร์
การแก้ไขข้อบกพร่องขององค์ประกอบ
ประสบการณ์การแก้ไขข้อบกพร่องของมินิแอปจะคุ้นเคยมากสำหรับทุกคนที่เคยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome อย่างไรก็ตาม มีความแตกต่างที่สำคัญบางประการที่ทำให้เวิร์กโฟลว์เหมาะกับมินิแอป IDE ของมินิแอปมีแผงที่ปรับแต่งเองซึ่งเหมาะกับภาษา HTML เฉพาะของตนเอง แทนที่จะใช้แผง องค์ประกอบของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ตัวอย่างเช่น ในกรณีของ WeChat แผงนี้เรียกว่าWxml ซึ่งย่อมาจาก WeiXin Markup Language ในเครื่องมือสำหรับนักพัฒนาเว็บของ Baidu แผงนี้เรียกว่า Swan Element เครื่องมือสำหรับนักพัฒนาเว็บของ ByteDance เรียกว่า Bxml Alipay ตั้งชื่อว่า AXML และ Quick App อ้างอิง แผงนี้ว่า UX ฉันจะเจาะลึก ภาษา Markup เหล่านี้ ในภายหลัง
<image> ด้วยเครื่องมือสำหรับนักพัฒนาเว็บของ WeChat
องค์ประกอบที่กำหนดเองเบื้องหลัง
การตรวจสอบ WebView ในอุปกรณ์จริงผ่าน about://inspect/#devices
เผยให้เห็นว่าเครื่องมือสำหรับนักพัฒนาเว็บของ WeChat จงใจปกปิดความจริง ในกรณีที่เครื่องมือสำหรับนักพัฒนาเว็บของ WeChat แสดง an
<image> สิ่งที่ฉันกำลังดูอยู่จริงคือองค์ประกอบที่กำหนดเองที่เรียกว่า <wx-image> โดยมี <div>
เป็นองค์ประกอบย่อยเพียงรายการเดียว สิ่งที่น่าสนใจคือองค์ประกอบที่กำหนดเองนี้ไม่ได้ใช้
Shadow DOM ซึ่งจะกล่าวถึงคอมโพเนนต์เหล่านี้เพิ่มเติมในภายหลัง
<image> ด้วยเครื่องมือสำหรับนักพัฒนาเว็บของ WeChat เผยให้เห็นว่าองค์ประกอบนี้เป็นองค์ประกอบที่กำหนดเอง <wx-image>
การแก้ไขข้อบกพร่องของ CSS
ความแตกต่างอีกอย่างหนึ่งคือหน่วยความยาวใหม่ rpx สำหรับพิกเซลที่ปรับเปลี่ยนตามอุปกรณ์ในภาษา CSS ต่างๆ
(จะกล่าวถึงหน่วยนี้ เพิ่มเติมในภายหลัง) เครื่องมือสำหรับนักพัฒนาเว็บของ WeChat ใช้หน่วยความยาว CSS ที่ไม่ขึ้นกับอุปกรณ์เพื่อให้การพัฒนาสำหรับอุปกรณ์ขนาดต่างๆ เป็นไปอย่างเป็นธรรมชาติมากขึ้น
200rpx 0) ของมุมมองด้วยเครื่องมือสำหรับนักพัฒนาเว็บของ WeChat
การตรวจสอบประสิทธิภาพ
ประสิทธิภาพเป็นสิ่งสำคัญอันดับแรกสำหรับมินิแอป จึงไม่น่าแปลกใจที่เครื่องมือสำหรับนักพัฒนาเว็บของ WeChat และเครื่องมือสำหรับนักพัฒนาเว็บอื่นๆ บางตัวมีเครื่องมือตรวจสอบที่ได้รับแรงบันดาลใจจาก Lighthouse ในตัว พื้นที่ที่มุ่งเน้นของการตรวจสอบคือทั้งหมด ประสิทธิภาพ ประสบการณ์ และแนวทางปฏิบัติแนะนำ คุณสามารถปรับแต่งมุมมองของ IDE ได้ ในภาพหน้าจอด้านล่าง ฉันได้ซ่อนตัวแก้ไขโค้ดชั่วคราวเพื่อให้มีพื้นที่หน้าจอมากขึ้นสำหรับเครื่องมือตรวจสอบ
การจำลอง API
การจำลองการตอบกลับของ API เป็นส่วนหนึ่งของเครื่องมือสำหรับนักพัฒนาเว็บของ WeChat โดยตรง แทนที่จะกำหนดให้นักพัฒนาแอปตั้งค่าบริการแยกต่างหาก นักพัฒนาแอปสามารถตั้งค่าปลายทาง API และการตอบกลับจำลองที่ต้องการผ่านอินเทอร์เฟซที่ใช้งานง่าย
คำขอบคุณ
บทความนี้ได้รับการตรวจสอบโดย Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, และ Keith Gu.