kingdex
1.0.0
A inspiração vem do popular jogo para celular deste ano - Honor of Kings Ocasionalmente não é muito conveniente usar o celular para pesquisar dados de jogos online, então tive a ideia de desenvolver o "Livro Ilustrado King of Kings". " miniaplicativo. Rastreie dados do site oficial, integre heróis, equipamentos, inscrições e outras informações no miniaplicativo WeChat e consulte informações do jogo a qualquer hora e em qualquer lugar.
Digitalize o minicódigo do programa abaixo no WeChat para experimentá-lo imediatamente:
Primeiro, clique em Fork ou no botão verde Clone or download no canto superior direito para baixar o código-fonte e usar as ferramentas de desenvolvedor do WeChat para depuração e desenvolvimento. WeChat também fornece documentos de desenvolvimento de miniprogramas, fornecendo um conjunto completo de soluções desde registro de miniprogramas, ferramentas de desenvolvimento, desenvolvimento e depuração até o lançamento, criando seu próprio ecossistema semelhante ao da Apple.
O projeto tem um total de 9 páginas, envolvendo exibição de lista, detalhes do herói, classificação de equipamentos, filtragem de condições de inscrição e outras funções. Como o serviço de armazenamento do leancloud é usado em segundo plano, a API ajax do miniprograma não é usada e não é usada. Leancloud é introduzido. O SDK precisa contar com um arquivo chamado leancloud.config.js , que é colocado na pasta utils Como serviços de terceiros, como o leancloud, geralmente são pagos de forma flexível e o King's Illustrated Book foi lançado oficialmente no WeChat, eu pressionei. o código leancloud.config.js foi ignorado, por favor, entenda.
leancloud.config.js contém as informações AppID e AppKey do aplicativo leancloud:
module . exports = {
appId : '你的AppID' ,
appKey : '你的AppKey'
} Antes de usar o projeto, você precisa criar seu próprio aplicativo leancloud e construir王者荣耀官网爬虫que escrevi antes para obter dados. Ambos exigem o arquivo leancloud.config.js .
Vamos falar brevemente sobre o desenvolvimento de miniprogramas WeChat. Houve muito burburinho na Internet por um tempo, e então reservei um tempo para dar uma olhada nos documentos de desenvolvimento. ! Basta olhar o exemplo abaixo.
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 >Embora as APIs pareçam semelhantes, ainda existem diferenças óbvias:
wx:for="item in list" um erro será relatado.O applet possui duas threads, correspondendo a dois módulos independentes: View (visualização) e AppService (lógica). View é usado para renderizar modelos e estilos, e AppService é usado para lidar com lógica de negócios, solicitações de dados, chamadas de API, etc. Os alunos interessados podem consultar: "Análise da Arquitetura do Mini Programa WeChat". Além disso, os artigos do miniprograma da Minion Food Delivery Team também são bons.
Falando em "King's Illustrated Book", este é meu primeiro pequeno programa. Para usuários front-end experientes, você pode começar em um dia seguindo a documentação oficial. Em comparação com a codificação, foi um desafio para mim concluir o protótipo do design da interface do usuário de todo o produto, incluindo layout, correspondência de cores e interação. Referenciei muitos produtos em mais de dez dias e ainda adquiri uma compreensão mais profunda do design. ter o efeito final bastante satisfatório.
O código-fonte aberto deste projeto é apenas para referência de aprendizagem e o uso comercial é proibido.
GPL
