Tencent Cloud WeDa (WeDa) บทนำรหัสต่ำ: ส่วนมือที่เป็นศูนย์จะสอนให้คุณพัฒนาแอพเพล็ต WeChat

ฉันต้องการพัฒนาโปรแกรมขนาดเล็กด้วยตัวเองแต่การได้เห็นโค้ดที่หนาแน่นการกำหนดค่าอินเทอร์เฟซที่ซับซ้อนและการปรับข้อต่อด้านหน้าและด้านหลังนั้นใหญ่หรือไม่?

ในอดีตฉันทำได้แค่จ้องมองถ้าฉันไม่เข้าใจการเขียนโปรแกรมแต่ตอนนี้ Tencent Cloud มีเครื่องมือระดับโปร-

WeDa แพลตฟอร์มการพัฒนารหัสต่ำ

。ข้อได้เปรียบที่ใหญ่ที่สุดคือ:

มันเปิดระบบนิเวศ WeChat ของ Tencent อย่างเป็นธรรมชาติ

。คุณไม่จำเป็นต้องศึกษาเครื่องมือสำหรับนักพัฒนา WeChat คุณไม่จำเป็นต้องกำหนดค่าเซิร์ฟเวอร์และฐานข้อมูลของคุณเองหรือแม้แต่ไม่สนใจชื่อโดเมนและใบรับรอง SSL

วันนี้เราไม่พูดถึงแนวคิดที่เป็นนามธรรมกันเตรียม WeChat คอมพิวเตอร์และถ้วยชาของคุณฉันจะพาคุณไปตั้งแต่เริ่มต้นลากและกำหนดค่าแอพเพล็ต WeChat ของคุณเอง

ขั้นตอนแรก: เข้าสู่สนามรบและทำความเข้าใจกับอินเทอร์เฟซของไมโคร

เบราว์เซอร์คอมพิวเตอร์เปิดเว็บไซต์อย่างเป็นทางการของ Tencent Cloud และค้นหาเพื่อเข้าสู่คอนโซล "WeDa รหัสต่ำขนาดเล็ก"

หากเป็นครั้งแรกระบบจะให้คุณเลือกเวอร์ชันทดลอง (โดยปกติจะมีโควต้าฟรีซึ่งเพียงพอสำหรับการฝึกฝนและพัฒนา)

คลิก "การจัดการแอปพลิเคชัน"-> "แอปพลิเคชันใหม่" เลือก "แอปพลิเคชันว่างใหม่" และตั้งชื่อให้เช่นแอปเพล็ตรหัสต่ำตัวแรกของฉันเลือก "แอปเพล็ต" สำหรับประเภทแอปพลิเคชัน

คลิกเพื่อเข้าสู่แอปและคุณจะเห็นโปรแกรมแก้ไขภาพที่สะดวกสบายมาก

อย่ากลัวปุ่มด้านในเราแบ่งออกเป็นสามพื้นที่หลัก:

ด้านซ้าย: ห้องสมุดส่วนประกอบ (กล่องชิ้นส่วนของคุณ) มีข้อความรูปภาพปุ่มช่องป้อนข้อมูลรายการฯลฯลากสิ่งที่คุณต้องการไปตรงกลางโดยตรงด้วยเมาส์

กลาง: ผ้าใบ (หน้าจอโทรศัพท์ของคุณ) นี่คือพื้นที่แสดงตัวอย่างแบบเรียลไทม์ส่วนใดที่คุณลากทางด้านซ้ายจะเข้ามาและตรงกลางจะแสดงลักษณะของโทรศัพท์แบบเรียลไทม์

ขวา: แผงคุณสมบัติ (ไขควงของคุณ) หลังจากเลือกส่วนตรงกลางแล้วคุณสามารถปรับขนาดสีระยะขอบหรือผูกข้อมูลทางด้านขวาได้

ขั้นตอนที่สอง: ฐานหลักใช้ "แบบจำลองข้อมูล" เพื่อสร้างฐานข้อมูลระบบคลาวด์

ในการพัฒนาโปรแกรมขนาดเล็กอินเทอร์เฟซที่ดูดีไม่เพียงพอต้องสามารถจัดเก็บข้อมูลได้ตัวอย่างเช่นวันนี้เราจะพาคุณไปสร้าง "ข้อเสนอแนะ/การรวบรวมความคิดเห็นของพนักงาน" ความคิดเห็นที่ผู้ใช้ส่งมาจะถูกบันทึกไว้ที่ไหน? สิ่งนี้ต้องใช้การเคลื่อนไหวหลักของไมโคร:

โมเดลข้อมูล

。

ในการสร้างไมโครคุณไม่จำเป็นต้องเข้าใจคำสั่ง SQL การสร้างฐานข้อมูลนั้นง่ายพอๆกับการเล่นตาราง Excel

คลิกที่ด้านซ้ายของตัวแก้ไขเพื่อเปลี่ยนเป็นแท็บ "โมเดลข้อมูล" (โดยปกติจะเป็นไอคอนที่คล้ายกับตารางขนาดเล็ก)

คลิก "สร้างแบบจำลองข้อมูลใหม่" และตั้งชื่อแบบฟอร์มข้อเสนอแนะ

คลิก "เพิ่มฟิลด์" เพื่อเพิ่มสามคอลัมน์เช่น Excel: ฟิลด์1: ชื่อเรียกว่าชื่อของผู้ป้อนกลับและเลือก "ข้อความบรรทัดเดียว" สำหรับประเภทฟิลด์2: ชื่อเรียกว่าหมายเลขติดต่อประเภทเลือก "หมายเลขโทรศัพท์" (ระบบจะช่วยคุณตรวจสอบรูปแบบโดยอัตโนมัติ) ฟิลด์3: ชื่อเรียกว่าเนื้อหาคำติชมและประเภทเลือก "ข้อความหลายบรรทัด"

คลิกบันทึกและเผยแพร่ตกลงฐานข้อมูลคลาวด์และอินเทอร์เฟซแบ็คเอนด์ของคุณถูกสร้างและเชื่อมโดยอัตโนมัติในพื้นหลังโดยไมโคร

ลำดับที่สาม

ย่อหน้า: ลากวางและผูก5นาทีเพื่อสะกดอินเทอร์เฟซแบบโต้ตอบ

หลังจากสร้างฐานข้อมูลแล้วเราจะกลับไปที่ผืนผ้าใบและสะกดอินเทอร์เฟซส่วนหน้า

1.สร้างอินเทอร์เฟซแบบฟอร์ม

ในคลังคอมโพเนนต์ทางด้านซ้ายให้ค้นหาหมวดหมู่ "แบบฟอร์ม"

อย่าลากช่องป้อนข้อมูลทีละช่องมีสิ่งประดิษฐ์ที่เรียกว่า "คอนเทนเนอร์แบบฟอร์ม" ลาก "คอนเทนเนอร์แบบฟอร์ม" ลงบนผืนผ้าใบของโทรศัพท์ตรงกลางโดยตรง

เลือกคอนเทนเนอร์แบบฟอร์มนี้และดูที่แผงคุณสมบัติทางด้านขวาในคอลัมน์ "แหล่งข้อมูล" ให้เลือกแบบจำลองข้อมูลที่เราเพิ่งสร้างแบบฟอร์มข้อเสนอแนะความคิดเห็น

ปาฏิหาริย์เกิดขึ้น: Weiqi จะจดจำฟิลด์ในฐานข้อมูลของคุณโดยอัตโนมัติและสร้างช่องป้อนข้อมูลสามช่องโดยอัตโนมัติบนหน้าจอโทรศัพท์ทันที "ชื่อคำติชม" "หมายเลขติดต่อ" และ "เนื้อหาคำติชม" รวมถึงปุ่ม "ส่ง" ที่ด้านล่างพวกเขาทั้งหมดจับคู่ให้คุณ!

2.อินเทอร์เฟซขัด (ปฏิเสธความงามของผู้ชายตรง)

คิดว่าอินเทอร์เฟซเริ่มต้นเร็วเกินไปหรือไม่?

เลือกหน้าด้านนอกสุดและเปลี่ยนสีพื้นหลังเป็นสีเทาอ่อนในแถบคุณสมบัติทางด้านขวา (เช่น # F7F8FA)

ที่ด้านบนของคอนเทนเนอร์แบบฟอร์มให้ลากคอมโพเนนต์ "รูปภาพ" จากคลังคอมโพเนนต์ทางด้านซ้ายอัปโหลดภาพแบนเนอร์ที่คุณออกแบบมาอย่างดีทางด้านขวา

ลากส่วนประกอบ "ข้อความ" อื่นเพิ่มขนาดตัวอักษรตัวหนาและเขียนว่า "ยินดีต้อนรับสู่การส่งความคิดเห็นที่มีค่าของคุณ" ปรับระยะขอบเล็กน้อย (ระยะขอบ/แพดดิ้ง) และอินเทอร์เฟซฟอร์มที่สวยงามระดับโรงงานขนาดใหญ่จะออกมา

ขั้นตอนที่สี่: การแก้ไขจุดบกพร่องร่วมด้วยคลิกเดียวเพื่อให้ข้อมูลเคลื่อนไหวได้อย่างแท้จริง

มีอินเทอร์เฟซแล้วข้อมูลจะเข้าสู่ตาราง Excel ได้อย่างไรเมื่อผู้ใช้คลิก "ส่ง"

ในความเป็นจริงเมื่อคุณใช้ "คอนเทนเนอร์แบบฟอร์ม" เพื่อผูกแหล่งข้อมูล Wechat ได้เขียนตรรกะให้คุณโดยค่าเริ่มต้นแล้วถ้าคุณไม่เชื่อเรามาทดสอบกัน:

คลิกปุ่ม "ดูตัวอย่าง" ที่มุมขวาบนของตัวแก้ไข

ในโปรแกรมจำลองป๊อปอัปเช่นเดียวกับผู้ใช้จริงให้ป้อนชื่อหมายเลขโทรศัพท์และเขียนข้อร้องเรียน

คลิกปุ่ม "ส่ง" ที่ด้านล่างและหน้าจะแจ้ง "ส่งสำเร็จ"

ในตอนนี้ให้ปิดการแสดงตัวอย่างกลับไปที่ "แบบจำลองข้อมูล" ทางด้านซ้ายคลิกที่แบบฟอร์มความคิดเห็นของคุณและเปลี่ยนไปที่แท็บ "การจัดการข้อมูล"

เห็นไหม? ข้อมูลที่คุณเพิ่งกรอกในเครื่องจำลองนั้นอยู่ในตารางอย่างเรียบร้อย! ในระหว่างกระบวนการทั้งหมดคุณยังไม่ได้เขียนบรรทัดใดๆของการดีมอดูเลตร่วมส่วนหน้าและส่วนหลังที่คล้ายกับ getInstance() หรือ wx.request()

ขั้นตอนที่ห้า: การเปิดตัวพิธีการศุลกากรขั้นสูงสุดไปยัง WeChat

ในอดีตในการเผยแพร่โปรแกรมขนาดเล็กที่พัฒนาแล้วคุณต้อง: ดาวน์โหลดเครื่องมือสำหรับนักพัฒนา WeChat ส่งออกแพ็คเกจรหัสอัปโหลดการตรวจสอบและกำหนดค่าชื่อโดเมนที่ถูกกฎหมายแต่ในไมโครแท็บ Tencent ได้เปิดช่องของตัวเองอย่างสมบูรณ์และการเปิดตัวใช้เวลาเพียงสองขั้นตอน

ขั้นตอนที่1: ผูกบัญชี WeChat Mini Program ของคุณ

ในการตั้งค่าคอนโซลไมโครคลิก "การอนุญาตโปรแกรมขนาดเล็ก" และสแกนรหัสด้วย WeChat ของคุณในฐานะผู้ดูแลระบบผูกบัญชีโปรแกรมขนาดเล็กที่คุณสมัครล่วงหน้าบนแพลตฟอร์มสาธารณะ WeChat

ขั้นตอนที่2: การเผยแพร่ในคลิกเดียว

กลับไปที่โปรแกรมแก้ไขไมโครคลิก "เผยแพร่" ที่มุมขวาบน

เลือก

ช่องทางการเผยแพร่คือ "WeChat Mini Program" กรอกหมายเลขเวอร์ชัน1.0.0และเขียนบันทึกการอัปเดต "เวอร์ชันเริ่มต้นออนไลน์"

คลิกตกลง. Weishang จะรวบรวมอินเทอร์เฟซการแสดงภาพของคุณโดยตรงในระบบคลาวด์เป็นรหัสเนทีฟที่ด้านล่างของ WeChat และส่งไปยังเจ้าหน้าที่ WeChat เพื่อตรวจสอบโดยอัตโนมัติ

โดยปกติสำหรับโฮมเพจส่วนตัวหรือแอพเพล็ตที่รวบรวมอย่างง่ายการตรวจสอบอย่างเป็นทางการจะใช้เวลาเพียงไม่กี่ชั่วโมงถึงหนึ่งวันหลังจากได้รับการอนุมัติผู้ใช้ WeChat มากกว่าหนึ่งพันล้านคนในประเทศจีนสามารถเปิดโปรแกรมขนาดเล็กที่คุณทำด้วยตัวเองได้โดยตรงโดยการค้นหาหรือสแกนโค้ด

สรุป

สาระสำคัญของ Tencent Cloud Micro คือการเปลี่ยนวิศวกรรมซอฟต์แวร์ที่ซับซ้อนให้กลายเป็น "ตัวต่อเลโก้" คุณต้องชี้แจงตรรกะทางธุรกิจเท่านั้น (ฉันต้องการจัดเก็บข้อมูลอะไร) และงานสกปรกที่เหลือจะถูกจัดการโดยแพลตฟอร์มที่ด้านล่าง

หลังจากทำความคุ้นเคยกับตรรกะของ "คอนเทนเนอร์แบบฟอร์มโมเดลข้อมูล" ชุดนี้แล้วคุณสามารถสรุปข้อสรุปและลองเพิ่ม "ส่วนประกอบรายการ" สำหรับการแสดงรายการและ "การควบคุมสิทธิ์" สำหรับการจัดการภายในขององค์กรรากฐานที่เป็นศูนย์ไม่ใช่สิ่งที่ทำให้สะดุดอีกต่อไปตราบใดที่คุณมีความคิดคุณสามารถเป็นนักพัฒนาเต็มสแต็กได้ในบ่ายวันนี้