kingdex

[Programme WeChat Mini] Livre illustré des rois

L'inspiration vient du jeu mobile populaire de cette année - Honor of Kings. Parfois, il n'est pas très pratique d'utiliser le téléphone mobile pour rechercher des données de jeu en ligne, j'ai donc eu l'idée de développer le livre illustré "King of Kings". "applet. Explorez les données du site officiel, intégrez les héros, l'équipement, les inscriptions et d'autres informations dans l'applet WeChat et interrogez les informations sur le jeu à tout moment et n'importe où.

Aperçu

Affichage des effets

Expérience en ligne

Scannez le code du mini-programme ci-dessous sur WeChat pour en faire l'expérience immédiatement :

pile technologique

• Conception du prototype : croquis
• Exploration des données en arrière-plan : node.js + leancloud (adresse open source)
• Front-end : Ecologie des mini programmes (WXML/WXSS/JavaScript...)

utiliser

Tout d'abord, cliquez sur Fork ou sur le bouton vert Clone or download dans le coin supérieur droit pour télécharger le code source et utilisez les outils de développement WeChat pour le débogage et le développement. WeChat fournit également des documents de développement de mini-programmes, fournissant un ensemble complet de solutions depuis l'enregistrement du mini-programme, les outils de développement, le développement et le débogage jusqu'à la publication, créant ainsi son propre écosystème similaire à celui d'Apple.

Le projet compte un total de 9 pages, impliquant l'affichage de la liste, les détails des héros, la classification des équipements, le filtrage des conditions d'inscription et d'autres fonctions. Étant donné que le service de stockage de leancloud est utilisé en arrière-plan, l'API ajax du mini programme n'est pas utilisée et. Leancloud est introduit. Le SDK doit s'appuyer sur un fichier nommé leancloud.config.js , qui est placé dans le dossier utils . Étant donné que les services tiers tels que leancloud sont généralement payés de manière flexible et que le livre illustré du roi a été officiellement publié sur WeChat, j'ai poussé. le code leancloud.config.js a été ignoré, veuillez comprendre.

leancloud.config.js contient les informations AppID et AppKey de l'application leancloud :

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

Avant d'utiliser le projet, vous devez créer votre propre application Leancloud et créer王者荣耀官网爬虫que j'ai écrit auparavant pour obtenir des données. Ils nécessitent tous deux le fichier leancloud.config.js .

Résumer

Parlons brièvement du développement des mini-programmes WeChat. Il y a eu beaucoup de buzz sur Internet pendant un moment, puis j'ai pris le temps de regarder les documents de développement. Bon sang, n'est-ce pas Vue.js ? ! Regardez simplement l’exemple ci-dessous.

Mini-programme :

 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 >

Bien que les API se ressemblent, il existe néanmoins des différences évidentes :

• L'applet est une liaison de données unidirectionnelle et ne fournit pas d'instructions de modèle V similaires à vue.
• Les expressions de liaison de données ne prennent en charge que les doubles accolades. Si vous écrivez wx:for="item in list" une erreur sera signalée.
• Pour faire fonctionner l'objet de données, vous devez appeler la méthode setData pour déclencher la mise à jour, au lieu de l'attribuer directement comme vue.
• Les événements de liaison nécessitent des directives de modèle pour déclarer s'il faut ou non créer des bulles.

L'applet comporte deux threads, correspondant à deux modules indépendants : View (view) et AppService (logique). View est utilisé pour restituer des modèles et des styles, et AppService est utilisé pour gérer la logique métier, les demandes de données, les appels d'API, etc. Les étudiants intéressés peuvent se référer à : « Analyse de l'architecture du mini programme WeChat ». De plus, les mini-articles sur le programme de l’équipe Minion Food Delivery sont également bons.

En parlant de "King's Illustrated Book", c'est mon premier petit programme. Pour les utilisateurs front-end expérimentés, vous pouvez commencer en une journée en suivant la documentation officielle. Par rapport au codage, c'était un défi pour moi de terminer la conception du prototype d'interface utilisateur de l'ensemble du produit, y compris la mise en page, la correspondance des couleurs et l'interaction. J'ai référencé de nombreux produits en plus de dix jours et j'ai encore acquis une compréhension plus approfondie de la conception. avoir l'effet final tout à fait satisfaisant.

Le code open source de ce projet est uniquement destiné à une référence d'apprentissage et son utilisation commerciale est interdite.

Autorisation du droit d'auteur

GPL