store miniprogram
1.0.0
Há algum tempo, criei um site de shopping no lado do PC imitando o Xiaomi Mall. Recentemente li a documentação do miniprograma WeChat, então comecei a fazer uma versão do miniprograma WeChat.
Este projeto reutiliza o backend do vue-store e adiciona a API de login do miniaplicativo WeChat com base no servidor da loja original.
Eu uso meu tempo livre em aulas online para aprender e fazer isso ao mesmo tempo. Se você tiver alguma dúvida ou boa sugestão, sinta-se à vontade para enviar problemas.
Por ser feito com uma conta de teste, não existe uma versão de visualização online.
Versão web para PC: vue-store.
Back-end: servidor de loja.
Se você acha que este projeto é bom, clique em
Starno canto superior direito para apoiá-lo. ^_^
Para distinguir o miniprograma oficial do Xiaomi Mall, chamei este projeto de Xiaomi. Este projeto não tem nada a ver com o site oficial da Xiaomi. É puramente um projeto pessoal. Se você precisar comprar produtos da Xiaomi, acesse a loja oficial da Xiaomi.
O projeto contém 4 tabBars: página inicial, página de descoberta (ou seja, página de exibição do produto), carrinho de compras e a minha. Há também a página de detalhes do produto, minha coleção, página de liquidação de pedidos e meu pedido.
Ele realiza exibição de produtos, consulta de classificação de produtos, pesquisa de palavras-chave de produtos, exibição de informações detalhadas de produtos, carrinho de compras do usuário, liquidação de pedidos, pedidos de usuários e lista de coleta de usuários.
O projeto como um todo refere-se à implementação do vue-store e basicamente implementa todas as suas funções. Pode-se dizer que é sua versão do miniaplicativo WeChat.
O back-end reutiliza o back-end do vue-store e adiciona a API de login do miniaplicativo WeChat com base no servidor da loja original.
Front-end: miniaplicativo WeChat nativo
Back-end: Node.js , Koa框架
Banco de dados: Mysql
Quando o miniaplicativo é iniciado, ele chama wx.login para obter as credenciais de login ( code ), depois envia o código de volta ao servidor back-end do projeto, chama a interface auth.code2Session e troca o identificador exclusivo do usuário OpenID e a chave de sessão chave_sessão . Em seguida, registre o OpenID no banco de dados do projeto para gerar um user_id exclusivo para este sistema, que é usado para verificação de negócios neste projeto.
A página inicial é principalmente para exibição de produtos, com um carrossel mostrando produtos recomendados, uma grade de nove quadrados de categorias de produtos populares e uma exibição de produtos populares por categoria.
A página de todos os produtos integra toda a exibição do produto, consulta de classificação do produto e exibição dos resultados da pesquisa do produto com base em palavras-chave.
A página de detalhes do produto exibe principalmente informações detalhadas de um determinado produto, onde os usuários podem adicionar seus produtos favoritos ao carrinho de compras ou à lista de favoritos.
O carrinho de compras utiliza omix para gerenciamento de status global, que permite funções como adicionar, excluir, aumentar o número de itens no carrinho de compras, selecionar itens para liquidação e selecionar todos os itens do carrinho de compras para liquidação.
Após o usuário selecionar o produto a ser adquirido no carrinho de compras e clicar no botão “Ir para Finalizar Compra”, ele chegará a esta página. Aqui o usuário seleciona o endereço de entrega, confirma as informações relevantes sobre o pedido e, em seguida, confirma a compra.
Os usuários podem adicionar seus produtos favoritos à lista de favoritos clicando no botão Adicionar Curtir na página de detalhes do produto.
Exibir todos os pedidos feitos pelo usuário.
请clone项目到本地
git clone https://github.com/hai-27/store-miniprogram.git
导入项目到微信开发者工具即可
Autor hai-27
31 de março de 2020
