A criação de cartazes (posters) personalizados para compartilhamento é uma funcionalidade essencial em aplicações de WeChat Mini Program, permitindo que os usuários divulguem produtos ou conteúdos de forma visualmente atraente. Para simplificar esse processo, que nativamente exige manipulações complexas da API de Canvas, utilizaremos o plugin wxa-plugin-canvas.

Configuração Inicial

O primeiro passo consiste em integrar o componente ao seu projeto. Siga os passos abaixo:

1. Faça o download ou clone o repositório do plugin e mova a pasta para dentro do diretório components do seu projeto.
2. No arquivo de configuração .json da página onde o cartaz será exibido, registre o componente:

{
  "usingComponents": {
    "poster": "/components/wxa-plugin-canvas/poster/index"
  }
}

Estrutura da Interface (WXML)

Na camada de visualização, definiremos um botão para disparar a geração, o componente de cartaz oculto e uma área de pré-visualização para mostrar o resultado final ao usuário.

<!-- index.wxml -->
<view class="container">
  <button type="primary" bindtap="gerarCartaz">Criar Cartaz de Compartilhamento</button>
</view>

<!-- Componente gerador -->
<poster id="poster-component" config="{{configCartaz}}" bind:success="aoGerarSucesso" bind:fail="aoGerarErro"></poster>

<!-- Modal de visualização -->
<view wx:if="{{exibirModal}}" class="overlay">
  <view class="conteudo-modal">
    <image mode="widthFix" class="imagem-final" src="{{caminhoImagem}}"></image>
    <button class="btn-salvar" bindtap="salvarNoAlbum">Salvar na Galeria</button>
  </view>
</view>

Lógica de Implementação (JavaScript)

No arquivo .js, importamos o módulo do poster e configuramos os elementos visuais (textos, imagens e blocos) que comporão o design final. O plugin utiliza um objeto de configuração para desenhar no canvas de forma declarativa.

import Poster from '../../components/wxa-plugin-canvas/poster/poster.js';

Page({
  data: {
    exibirModal: false,
    caminhoImagem: '',
    configCartaz: {}
  },

  async gerarCartaz() {
    const urlBanner = "https://exemplo.com/produto.png";
    const urlQR = "https://exemplo.com/qrcode.png";

    // Obtém dimensões da imagem de fundo para cálculo proporcional
    wx.getImageInfo({
      src: urlBanner,
      success: (res) => {
        const alturaCalculada = (res.height * 750) / res.width;
        this.configurarDesenho(alturaCalculada, urlBanner, urlQR);
      },
      fail: (err) => console.error("Erro ao carregar imagem:", err)
    });
  },

  configurarDesenho(alturaDinamica, banner, qrcode) {
    const configuracao = {
      width: 750,
      height: alturaDinamica + 300,
      backgroundColor: '#f5f5f5',
      debug: false,
      blocks: [
        {
          x: 40,
          y: 40,
          width: 670,
          height: alturaDinamica + 220,
          borderWidth: 1,
          borderColor: '#dddddd',
          borderRadius: 12,
          backgroundColor: '#ffffff'
        }
      ],
      images: [
        {
          x: 60,
          y: 60,
          url: banner,
          width: 630,
          height: alturaDinamica
        },
        {
          x: 60,
          y: alturaDinamica + 80,
          url: qrcode,
          width: 180,
          height: 180
        }
      ],
      texts: [
        {
          x: 260,
          y: alturaDinamica + 120,
          text: "Smartphone Premium X1",
          fontSize: 36,
          color: '#222',
          width: 400
        },
        {
          x: 260,
          y: alturaDinamica + 180,
          text: "R$ 4.999,00",
          fontSize: 44,
          color: '#ff4400',
          fontWeight: 'bold'
        },
        {
          x: 260,
          y: alturaDinamica + 230,
          text: "Escaneie para ver detalhes",
          fontSize: 24,
          color: '#888'
        }
      ]
    };

    this.setData({ configCartaz: configuracao }, () => {
      Poster.create(true); 
    });
  },

  aoGerarSucesso(e) {
    this.setData({
      caminhoImagem: e.detail,
      exibirModal: true
    });
  },

  aoGerarErro(err) {
    wx.showToast({ title: 'Falha ao gerar cartaz', icon: 'none' });
    console.error(err);
  },

  salvarNoAlbum() {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.caminhoImagem,
      success: () => {
        wx.showModal({
          title: 'Sucesso',
          content: 'O cartaz foi salvo na sua galeria.',
          showCancel: false
        });
      },
      fail: () => {
        wx.showToast({ title: 'Erro ao salvar', icon: 'none' });
      }
    });
  }
});

Estilização (WXSS)

Para garantir que o cartaz seja exibido corretamente em uma camada sobreposta, utilizamos o seguinte CSS básico:

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.conteudo-modal {
  width: 85%;
  background: #fff;
  padding: 20rpx;
  border-radius: 15rpx;
  text-align: center;
}

.imagem-final {
  width: 100%;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.btn-salvar {
  background-color: #07c160;
  color: white;
  font-weight: 500;
}

O fluxo de trabalho apresentado utiliza o wxa-plugin-canvas para abstrair a renderização. Ao acionar a função Poster.create(), o componente processa o JSON de configuração e retorna um caminho de arquivo temporário através do evento bind:success, que pode então ser exibido ou salvo permanentemente no dispositivo do usuário.