kingdex

[WeChat Mini Program] ภาพประกอบ Book of Kings

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

ดูตัวอย่าง

การแสดงเอฟเฟกต์

ประสบการณ์ออนไลน์

สแกนโค้ดมินิโปรแกรมด้านล่างบน WeChat เพื่อสัมผัสประสบการณ์ทันที:

กองเทคโนโลยี

• การออกแบบต้นแบบ: แบบร่าง
• การรวบรวมข้อมูลพื้นหลัง: node.js + Leancloud (ที่อยู่โอเพ่นซอร์ส)
• ส่วนหน้า: นิเวศวิทยาโปรแกรมขนาดเล็ก (WXML/WXSS/JavaScript...)

ใช้

ขั้นแรก คลิก Fork หรือปุ่มสีเขียว Clone or download ที่มุมขวาบนเพื่อดาวน์โหลดซอร์สโค้ด และใช้เครื่องมือสำหรับนักพัฒนา WeChat สำหรับการดีบักและการพัฒนา WeChat ยังจัดเตรียมเอกสารการพัฒนาโปรแกรมขนาดเล็ก ซึ่งมอบชุดโซลูชันที่ครบถ้วนตั้งแต่การลงทะเบียนมินิโปรแกรม เครื่องมือในการพัฒนา การพัฒนาและการแก้ไขจุดบกพร่องไปจนถึงการเปิดตัว การสร้างระบบนิเวศของตัวเองคล้ายกับ Apple

โปรเจ็กต์มีทั้งหมด 9 หน้า ซึ่งเกี่ยวข้องกับการแสดงรายการ รายละเอียดฮีโร่ การจำแนกอุปกรณ์ การกรองเงื่อนไขการจารึก และฟังก์ชันอื่นๆ เนื่องจากใช้บริการจัดเก็บข้อมูลของ Leancloud ในเบื้องหลัง จึงไม่ได้ใช้ Ajax API ของมินิโปรแกรม และ มีการแนะนำแบบลีนคลาวด์ sdk จำเป็นต้องอาศัยไฟล์ชื่อ leancloud.config.js ซึ่งอยู่ในโฟลเดอร์ utils เนื่องจากบริการของบุคคลที่สาม เช่น Leancloud มักจะได้รับการจ่ายเงินอย่างยืดหยุ่น และ King's Illustrated Book ได้รับการเผยแพร่อย่างเป็นทางการบน WeChat ฉันจึงผลักดัน รหัส leancloud.config.js ถูกละเว้น โปรดเข้าใจ

leancloud.config.js มีข้อมูล AppID และ AppKey ของแอปพลิเคชัน Leancloud:

 module . exports = {
  appId : '你的AppID' ,
  appKey : '你的AppKey'
}

ก่อนที่จะใช้โปรเจ็กต์ คุณต้องสร้างแอปพลิเคชัน Leancloud ของคุณเอง และสร้าง王者荣耀官网爬虫ที่ฉันเขียนไว้ก่อนหน้านี้เพื่อรับ leancloud.config.js

สรุป

เรามาพูดคุยกันสั้นๆ เกี่ยวกับการพัฒนามินิโปรแกรม WeChat กัน มีข่าวลือมากมายบนอินเทอร์เน็ตมาระยะหนึ่งแล้ว จากนั้นฉันก็ใช้เวลาดูเอกสารการพัฒนา นี่มัน Vue.js ใช่ไหม - เพียงดูตัวอย่างด้านล่าง

มินิโปรแกรม:

 Page ( {
	data : {
		list : [ ]
	} ,
	onload : function ( ) {
		this . setData ( {
			list : [ 1 , 2 , 3 ]
		} )
	}
} ) 

 < view wx:for =" {{ list }} " > {{ item }} </ view >

Vue.js:

 new Vue ( {
	data : {
		list : [ ]
	} ,
	mounted : function ( ) {
		this . list = [ 1 , 2 , 3 ]
	}
} ) 

 < view v-for =" item in list " > {{ item }} </ view >

แม้ว่า API จะดูคล้ายกัน แต่ก็ยังมีความแตกต่างที่ชัดเจน:

• แอปเพล็ตเป็นการผูกข้อมูลทางเดียว และไม่มีคำสั่ง v-model ที่คล้ายกับ vue
• นิพจน์การเชื่อมโยงข้อมูลรองรับเฉพาะวงเล็บปีกกาคู่ หากคุณเขียน wx:for="item in list" ข้อผิดพลาดจะถูกรายงาน
• ในการใช้งานออบเจ็กต์ข้อมูล คุณจะต้องเรียกใช้เมธอด setData เพื่อทริกเกอร์การอัปเดต แทนที่จะกำหนดโดยตรงเหมือนกับ vue
• การเชื่อมโยงเหตุการณ์จำเป็นต้องมีคำสั่งเทมเพลตเพื่อประกาศว่าจะสร้างฟองสบู่หรือไม่

แอปเพล็ตมีสองเธรด ซึ่งสอดคล้องกับสองโมดูลอิสระ: มุมมอง (มุมมอง) และ AppService (ตรรกะ) View ใช้เพื่อเรนเดอร์เทมเพลตและสไตล์ และ AppService ใช้เพื่อจัดการตรรกะทางธุรกิจ คำขอข้อมูล การเรียก API ฯลฯ นักเรียนที่สนใจสามารถดูได้ที่: "การวิเคราะห์สถาปัตยกรรมโปรแกรม WeChat Mini" นอกจากนี้ บทความสั้นๆ ของทีม Minion Food Delivery Team ก็มีประโยชน์เช่นกัน

เมื่อพูดถึง "King's Illustrated Book" นี่เป็นโปรแกรมเล็ก ๆ โปรแกรมแรกของฉัน สำหรับผู้ใช้ส่วนหน้าที่มีประสบการณ์ คุณสามารถเริ่มต้นได้ภายในวันเดียวโดยปฏิบัติตามเอกสารอย่างเป็นทางการ เมื่อเทียบกับการเขียนโค้ด ถือเป็นความท้าทายสำหรับฉันในการออกแบบ UI ต้นแบบของผลิตภัณฑ์ทั้งหมดให้เสร็จสิ้น รวมถึงเลย์เอาต์ การจับคู่สี และการโต้ตอบ ฉันยังคงอ้างอิงผลิตภัณฑ์จำนวนมากในเวลามากกว่าสิบวันและได้รับความเข้าใจที่ลึกซึ้งยิ่งขึ้นเกี่ยวกับการออกแบบ ได้ผลค่อนข้างน่าพอใจ

รหัสโอเพ่นซอร์สของโครงการนี้มีไว้เพื่อการเรียนรู้เท่านั้น และห้ามนำไปใช้ในเชิงพาณิชย์

การอนุญาตลิขสิทธิ์

จีพีแอล