Anterior: Applet micro Mall (C): Início fornecedor de electricidade ilimitada suspensa atualização alcançar API de dados dinâmica

veja resultados

Plano de desenvolvimento

1, para obter detalhes do produto layout de página (três módulos Para conseguir isso, a cabeça de imagens de produtos do carrossel, os preços das commodities e descrição da mercadoria, detalhes das commodities mostram) 2, API solicita dados de carga dinâmica de acordo com diferentes usuário clica mercadoria

Obtendo detalhes do produto modelo de dados API baseada na identificação do produto

Não são detalhados a seguir modelo de dados pode ser visto Oh!

home.js aumentar os eventos Ir

Lembre-se que nós fazemos em uma mercadoria Clique para ver detalhes do evento cobra-lo? Assim, juntamente com a função de salto detalhes do produto página, como mostrado abaixo:

detail.wxml

< swiper indicador de pontos = "{{indicatorDots}}" autoplay = "{{autoplay}}" = intervalo de "{{intervalo}}" duration = "{{duração}}" > < bloco WX: for = "{{goods.imgUrls}}" > < swiper item > < imagem src = "{{artigo}}" data-src = "{{artigo}}" bindtap = modo "previewImage" = "widthFix" > < / imagem > < / Swiper item > < / Bloco > < / Swiper > < ! - os preços das commodities e descrição da mercadoria - > < vista > < classe view = "product-name-wrap" > {{Goods.title}} < / View > < classe view = "produto-preço-wrap" > < vista > < p class = "produto-preço-novo" > ¥ {{goods.price}} < / P > < p class = "produto-preço-old" > Lista ¥ {{goods.privilegePrice}} < / P > < / View > < / View > < / View > < classe view = "detalhes" > < rolagem-view rolagem-y = "true" > < texto > Detalhes do produto < / Texto > < bloco WX: para-items = "{{goods.detailImg}}" wx: key = "nome" > < classe imagem = "image_detail" src = "{{artigo}}" mode = "widthFix" / > < / Bloco > < classe vista = "temporário" > < / View > < / Rolo-vista > < / View >

detail.wxss

página { exibir: Flex; flex-sentido: coluna; altura: 100%; } / * Conjunto de propriedades diretamente swiper * / swiper { / * Altura: 500rpx; * / altura: 750rpx; } imagem swiper item { largura: 100%; altura: 100%; } / ** ** preço da commodity / .product-preço-wrap { exibir: Flex; justificar-content: espaço-entre; / ** ** Justify / flex-sentido: fileira; Flex-wrap: envoltório; margem: 5px 5px; / * fronteira: 1rpx sólido vermelho; * / } .product-preço-wrap .product-preço-novo { Cor: vermelho; fonte de tamanho: 40rpx; margem: 10rpx; } .product-preço-wrap .product-preço de idade { color: # 888; text-decoration: line-through; padding-left: 5px; fonte de tamanho: 12 pixels; A linha-altura: 30px; fonte de peso: 300; } .product-name-wrap { margem: 0px 10px; fonte de tamanho: 14 px; color: # 404040; } .details { padding: 05px 5px 0; } .DETAIL { exibir: Flex; flex-sentido: coluna; margem superior: 15rpx; -margem inferior: 0rpx; } .title .DETAIL { fonte de tamanho: 40rpx; margem: 10rpx; color: black; text-align: justify; altura: 100rpx; } .Por .DETAIL { Cor: vermelho; fonte de tamanho: 40rpx; margem: 10rpx; } .line_flag { largura: 80rpx; altura: 1rpx; display: inline-bloco; margin: 20rpx auto; background-color: Gainsb; text-align: center; } .line { largura: 100%; altura: 2rpx; display: inline-bloco; margem: 20rpx 0rpx; background-color: Gainsb; text-align: center; } .DETAIL-nav { exibir: Flex; flex-sentido: fileira; ALIGN-itens: center; float: left; background-color: # fff; posição: fixo; inferior: 0; direita: 0; índice z: 1; largura: 100%; altura: 100rpx; } .button-verde { background-color: # 4caf50; / * Green * / } .button-vermelho { background-color: # f44336; / * vermelho * / } .button-addCar { background-color: # f44336; / * vermelho * / largura: 100%; } .image_detail { largura: 100%; / * Altura: 750rpx; * / } imagem .DETAIL-nav { largura: 70rpx; altura: 50rpx; margem: 20rpx 40rpx; } .line_nav { largura: 5rpx; altura: 100%; background-color: Gainsb; } / * Pegada * / .Temp { altura: 100rpx; }

detail.js

const Ajax = exigem (' ../../ utils / ajax.js'); utils const = exigem (' ../../ utils / util.js'); var imgUrls = ; var detailImg = ; var goodsId = nulo; bens var = null; Página ({/ ** * Página de dados inicial * / dados: { isLike: true, showDialog: false, produtos: nulo, indicatorDots: true, // se o painel de exibição indica o ponto autoplay: true, // se comutar automaticamente intervalo: 3000, // intervalo automático tempo de comutação, 3s Duração: 1000, quando o slide animado 1s // } Imagem de visualização // previewImage: função (e) { var corrente = e.target.dataset.src; wx.previewImage ({ : corrente, // http link para a imagem exibida atualmente urls: this.data.imgUrls // http liga necessidade de imagens de visualização Lista }) }, / ** * A função de Ciclo de Vida - ouvir página é carregada * / onLoad: function (options) { var que esta =; goodsId = options.goodsId; console.log ( 'goodsId:' + goodsId); // Carga Detalhes do produto that.goodsInfoShow (); }, goodsInfoShow: function (sucesso) { var que esta =; Ajax.Request ({ método: 'GET', url: 'bens / chave getGoodsInfo =' + utils.key + '& goodsId =' + goodsId, sucesso: dados = >  { var goodsItem = data.result; para (var i = 0; i <  goodsItem.shopGoodsImageList.length; i ++) { imgUrls  = GoodsItem.shopGoodsImageList .imgUrl; } var detalhes = goodsItem.details.split ( ";"); para (var j = 0; j <  details.length; j ++) { detailImg  = Detalhes ; } bens = { imgUrls: imgUrls, título: goodsItem.name, preço: goodsItem.price, privilegePrice: goodsItem.privilegePrice, detailImg: detailImg, imgURL: goodsItem.imgUrl, buyRate: goodsItem.buyRate, goodsId: goodsId, contar: 1, totalMoney: goodsItem.price, } that.setData ({ Produto: Artigos }) console.log (goods.title) } }) }, })

observação

dados de séries de micro-mall applet de micro-canais são adquiridas através de https dinâmico e presente, recomenda-se iniciar a leitura do primeiro capítulo. Podemos suportar esta série de artigos vai continuar a atualizá-lo, obrigado!

shopping série micro-programa pequeno micro-channel

loja Micro applet (a): https estruturas de quadros e navegação função

Micro-canal micro-applet Mall (2): O fornecedor de electricidade Início carrossel, navegação e classificação de alcançar nova venda

Applet micro Mall (C): Início fornecedor de electricidade ilimitada suspensa atualização alcançar API de dados dinâmica

follow Us

Se você precisar do código fonte pode se concentrar em "IT aliança de combate" e uma mensagem (micro fonte Mall, cinco palavras receberia download do código-fonte, tem que olhar para o código-fonte dentro do manual operacional terá muito menos desvios), também pode se juntar ao grupo e autor de troca mútua provocação oh ~ ~ ~