kingdex
1.0.0
Die Inspiration stammt vom diesjährigen beliebten Handyspiel „Honor of Kings“. Gelegentlich ist es nicht sehr bequem, mit dem Handy online nach Spieldaten zu suchen, daher kam mir die Idee, das „King of Kings Illustrated Book“ zu entwickeln "Applet. Crawlen Sie Daten von der offiziellen Website, integrieren Sie Helden, Ausrüstung, Inschriften und andere Informationen in das WeChat-Applet und fragen Sie jederzeit und überall Spielinformationen ab.
Scannen Sie den folgenden Mini-Programmcode auf WeChat, um ihn sofort zu erleben:
Klicken Sie zunächst auf Fork oder die grüne Schaltfläche Clone or download in der oberen rechten Ecke, um den Quellcode herunterzuladen, und verwenden Sie die WeChat-Entwicklertools zum Debuggen und Entwickeln. WeChat bietet auch Miniprogramm-Entwicklungsdokumente und bietet einen vollständigen Lösungssatz von der Registrierung von Miniprogrammen über Entwicklungstools, Entwicklung und Debugging bis hin zur Veröffentlichung und schafft so ein eigenes Ökosystem ähnlich dem von Apple.
Das Projekt umfasst insgesamt 9 Seiten und umfasst Listenanzeige, Heldendetails, Geräteklassifizierung, Beschriftungsbedingungsfilterung und andere Funktionen. Da der Speicherdienst von Leancloud im Hintergrund verwendet wird, wird die Ajax-API des Miniprogramms nicht verwendet Leancloud wird eingeführt. Das SDK muss sich auf eine Datei mit dem Namen leancloud.config.js verlassen, die im Ordner utils “ abgelegt wird. Da Dienste von Drittanbietern wie Leancloud normalerweise flexibel bezahlt werden und „King's Illustrated Book“ offiziell auf WeChat veröffentlicht wurde, habe ich darauf gedrängt Der Code leancloud.config.js wurde ignoriert, bitte haben Sie Verständnis.
leancloud.config.js enthält die AppID- und AppKey-Informationen der Leancloud-Anwendung:
module . exports = {
appId : '你的AppID' ,
appKey : '你的AppKey'
} Bevor Sie das Projekt verwenden, müssen Sie Ihre eigene Leancloud-Anwendung erstellen und王者荣耀官网爬虫erstellen, den ich zuvor geschrieben habe, um Daten zu erhalten. Für beide ist die Datei leancloud.config.js erforderlich.
Lassen Sie uns kurz über die Entwicklung von WeChat-Miniprogrammen sprechen. Es gab eine Zeit lang viel Aufsehen im Internet, und dann habe ich mir die Zeit genommen, mir die Entwicklungsdokumente anzusehen, nicht wahr? ! Schauen Sie sich einfach das Beispiel unten an.
Miniprogramm:
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 >Obwohl die APIs ähnlich aussehen, gibt es dennoch offensichtliche Unterschiede:
wx:for="item in list" wird ein Fehler gemeldet.Das Applet verfügt über zwei Threads, die zwei unabhängigen Modulen entsprechen: View (Ansicht) und AppService (Logik). View wird zum Rendern von Vorlagen und Stilen verwendet, und AppService wird zum Verarbeiten von Geschäftslogik, Datenanforderungen, API-Aufrufen usw. verwendet. Interessierte Studierende können sich auf „Analyse der WeChat Mini-Programmarchitektur“ beziehen. Darüber hinaus sind auch die Mini-Programmartikel des Minion Food Delivery Teams gut.
Apropos „King's Illustrated Book“, das ist mein erstes kleines Programm. Für erfahrene Front-End-Benutzer können Sie an einem Tag loslegen, indem Sie der offiziellen Dokumentation folgen. Im Vergleich zum Codieren war es für mich eine Herausforderung, das Prototyp-UI-Design des gesamten Produkts fertigzustellen. In Bezug auf Layout, Farbabstimmung und Interaktion habe ich in mehr als zehn Tagen Referenzen für viele Produkte erstellt und ein tieferes Verständnis für das Design gewonnen. Das Endergebnis ist für mich immer noch recht zufriedenstellend.
Der Open-Source-Code dieses Projekts dient nur als Lernreferenz und die kommerzielle Nutzung ist untersagt.
GPL
