kingdex
1.0.0
La inspiración proviene del popular juego móvil de este año: Honor of Kings. De vez en cuando no es muy conveniente usar el teléfono móvil para buscar datos del juego en línea, así que se me ocurrió la idea de desarrollar el "Libro ilustrado King of Kings". " subprograma. Rastree datos del sitio web oficial, integre héroes, equipos, inscripciones y otra información en el subprograma WeChat y consulte información del juego en cualquier momento y en cualquier lugar.
Escanee el código del mini programa a continuación en WeChat para experimentarlo de inmediato:
Primero, haga clic en Fork o en el botón verde Clone or download en la esquina superior derecha para descargar el código fuente y utilizar las herramientas de desarrollo de WeChat para la depuración y el desarrollo. WeChat también proporciona documentos de desarrollo de miniprogramas, brindando un conjunto completo de soluciones desde el registro de miniprogramas, herramientas de desarrollo, desarrollo y depuración hasta su lanzamiento, creando su propio ecosistema similar al de Apple.
El proyecto tiene un total de 9 páginas, que incluyen visualización de listas, detalles de héroes, clasificación de equipos, filtrado de condiciones de inscripción y otras funciones. Dado que el servicio de almacenamiento de leancloud se usa en segundo plano, no se usa la API ajax del mini programa. Se presenta leancloud. El SDK debe depender de un archivo llamado leancloud.config.js , que se coloca en la carpeta utils . Dado que los servicios de terceros como leancloud generalmente se pagan de manera flexible y King's Illustrated Book se lanzó oficialmente en WeChat, lo presioné. El código leancloud.config.js fue ignorado, por favor comprenda.
leancloud.config.js contiene la información AppID y AppKey de la aplicación leancloud:
module . exports = {
appId : '你的AppID' ,
appKey : '你的AppKey'
} Antes de usar el proyecto, debe crear su propia aplicación leancloud y crear王者荣耀官网爬虫que escribí antes para obtener datos. Ambos requieren el archivo leancloud.config.js .
Hablemos brevemente sobre el desarrollo de los miniprogramas WeChat. Hubo mucho revuelo en Internet durante un tiempo, y luego me tomé el tiempo para mirar los documentos de desarrollo. Maldita sea, ¿no es Vue.js? ! Basta con mirar el ejemplo a continuación.
Miniprograma:
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 >Aunque las API parecen similares, todavía existen diferencias obvias:
wx:for="item in list" se informará un error.El subprograma tiene dos subprocesos, correspondientes a dos módulos independientes: View (vista) y AppService (lógica). View se usa para representar plantillas y estilos, y AppService se usa para manejar la lógica empresarial, solicitudes de datos, llamadas API, etc. Los estudiantes interesados pueden consultar: "Análisis de la arquitectura del mini programa WeChat". Además, los artículos del mini programa del Minion Food Delivery Team también son buenos.
Hablando de "King's Illustrated Book", este es mi primer programa pequeño. Para usuarios experimentados de front-end, puede comenzar en un día siguiendo la documentación oficial. En comparación con la codificación, fue un desafío para mí completar el diseño de la interfaz de usuario del prototipo de todo el producto, incluido el diseño, la combinación de colores y la interacción. Hice referencia a muchos productos en más de diez días y obtuve una comprensión más profunda del diseño. Tiene el efecto final.
El código fuente abierto de este proyecto es sólo para referencia de aprendizaje y el uso comercial está prohibido.
GPL
