sprite wxapp
v1.0.0
Esta é a versão do miniaplicativo WeChat do spritejs. Atualmente, ela suporta a maioria das funções do spritejs v 2.0.
A propriedade Sprite é atualizada automaticamente (em lote) e redesenhada
Use rpx como unidade padrão
API de animações da Web com suporte para animação
Mecanismo de evento de suporte
Após a versão v1.10.0, a versão do miniprograma suporta a instalação do NPM.
npm instalar @spritejs/wxapp --save
Em seguida, crie o pacote NPM no miniaplicativo WeChat.
Depois de instalado e construído, a maneira mais fácil de usar o SpriteJS é por meio do componente de cena integrado.
Registre o componente na configuração do miniprograma app.json:
"usingComponents": {"s-scene": "@spritejs/wxapp/scene"
}Em seguida, introduza o componente na página que deseja usar:
<ver> <s-scene id="container"layers="bglayer,fglayer"bindSceneCreated="onSceneCreated" </s-cena> </ver>
O parâmetro camadas indica quantas camadas criar e seus IDs. O padrão é padrão.
bindSceneCreated é o evento de retorno de chamada após a criação da cena, e as camadas criadas são retornadas no método de evento:
const { Sprite } = require('@spritejs/wxapp');Página({
onSceneCreated({ detalhe: camadas }) {const { bglayer, fglayer } = camadas;const s = new Sprite({ tamanho: [100, 100], pos: [300, 300], bgcolor: 'vermelho',}); fglayer.append(s);const s2 = new Sprite({ tamanho: [300, 300], posição: [200, 200], bgcolor: 'azul',});bglayer.append(s2);s.on('touchstart', () => { s.attr('bgcolor', 'verde');}) ;s.on('touchmove', () => { s.attr('bgcolor', 'yellow');});s.on('touchend', () => { s.attr('bgcolor', 'vermelho');});
},});Se não quiser usar componentes, você também pode criar a tela e depois construir a cena
<view class="scene-layout" id="container" catchtouchmove="noop">
<bloco wx:for="{{camadas}}" wx:key="{{item}}">
<canvas canvas-id="{{item}}" desabilitar-scroll="true"></canvas>
</bloco>
</ver> const spritejs = require('@spritejs/wxapp');Página({
dados: {camadas: ['fglayer'], eventOffset: [0, 0],
},
onTouchStart(event) {// Envia o evento touchstart this.scene.layer('fglayer').dispatchEvent(event, this.data.eventOffset);
},
onReady: function() {// Como o layout da cena do evento proxy pode ser deslocado em relação à janela, esse deslocamento precisa ser passado // para posicionar corretamente as coordenadas do evento const query = wx.createSelectorQuery();query .select( '.scene-layout').boundingClientRect().exec(([rect]) => { if(rect) {this.setData({ eventOffset: [rect.left, rect.top],}); }});const scene = new spritejs.Scene();this.scene = scene;const layer = scene.layer('fglayer');// Pré-carregar recursos scene.preload([ ' ../../assets/img/birds.png', require('../../assets/img/birds.json.js')]);const pássaro = novo spritejs.Sprite('bird1.png');bird.attr({ âncora: [0.5, 0.5], pos: [100, 200],});//Adicionar evento ontouch bird.on('touchstart', evt = > { console.log(evt)});// Animação de textura let i = 0; [`bird${i++%3+1}.png`];}, 100);//Adicionar texto const text = new spritejs.Label('Hellon World!');text.attr({ //anchor: [ 0,5, 0,5], fonte: '44px Arial', borda: [2, 'vermelho'],}); [100, 0]; // Reproduz uma animação de mudança text.animate([ {pos: posFrom}, {pos: posTo},], { duração: 2000}); // Adicione dois sprites a layerlayer.append (bird, texto);
},})Observe que quando você mesmo chama, você precisa definir o atributo canvas-id para ser consistente com o ID da camada criada ao criar a tela.
Diferente da versão web/node, o construtor Scene da versão mini programa só pode passar largura e altura, e a unidade é rpx. rpx é uma unidade exclusiva dos miniprogramas WeChat. Consulte a documentação para obter uma descrição detalhada.
const info = wx.getSystemInfoSync();const scene = new Scene(750, 1433);
Se usado através do carregamento de componentes, eventos como touchstart, touchend, touchmove, tap, longpress etc. são automaticamente proxy pela cena, para que você possa adicionar a função de processamento de evento correspondente ao elemento sprite para acionar o evento normalmente.
Se você mesmo criar a cena, precisará fazer proxy manualmente do evento:
<!--index.wxml--><view class="scene-layout" id="container">
<bloco wx:for="{{camadas}}" wx:key="{{item}}">
<canvas canvas-id="{{item}}" bindtouchstart="touched"></canvas>
</bloco>
</ver> const spritejs = require('@spritejs/wxapp')Página({
dados: {camadas: ['fglayer'], eventOffset: [0, 0],
},
tocado: function(event) {this.scene.layer('fglayer').delegateEvent(event, this.data.eventOffset);
},
onReady: function() {// Como o layout da cena do evento proxy pode ser deslocado em relação à janela, esse deslocamento precisa ser passado // para posicionar corretamente as coordenadas do evento const query = wx.createSelectorQuery();query .select( '.scene-layout').boundingClientRect().exec(([rect]) => { if(rect) {this.setData({ eventOffset: [rect.left, rect.top],}); }});const scene = new spritejs.Scene();this.scene = scene;const layer = scene.layer('fglayer');// Se usado em um componente personalizado, passe o segundo parâmetro é uma referência à instância do componente. // const camada = cena.layer('fglayer', this)
... },})O WeChat não oferece suporte à criação dinâmica de elementos, portanto, a tela deve ser criada primeiro no modelo e atribuída ao ID da tela correspondente.
Atualmente, ele não suporta o carregamento de URLs remotos e suporta apenas materiais de imagem locais. Além disso, a versão web/node do Sprite pode pré-carregar imagens e obter a largura e altura da imagem, para que o Sprite possa se adaptar à largura e altura por padrão. , embora a versão do miniaplicativo WeChat não use o Texturepacker para empacotar imagens, caso contrário, a largura e a altura padrão não poderão ser obtidas e a largura e a altura deverão ser especificadas antes que o objeto sprite possa ser exibido.
Observe também que quando scene.preload pré-carrega recursos de frames, o carregamento de frameData de um arquivo json não é suportado. Ele deve ser um objeto js. Você pode salvar frameData como js e solicitá-lo no aplicativo.
Além disso, as funções giradas e aparadas do empacotador de textura não são suportadas atualmente.
// O scene.preload da versão do miniaplicativo WeChat é síncrono scene.preload(['../../assets/img/birds.png', require('../../assets/img/birds.json .js' )])const sprite1 = new Sprite('bird1.png') sprite1.attr({
pos: [0, 0],})// Imagens carregadas de frames têm tamanhos padrão e podem ser exibidas normalmente scene.layer().append(sprite1)const sprite2 = new Sprite('../../assets/ img /rambda.png')sprite2.attr({
posição: [50, 50],
size: [100, 100], // Imagens sem quadros devem especificar largura e altura}) scene.layer().append(sprite2) Colocamos um exemplo do minijogo “Dez gotas de água” na pasta app .
Para depurar o código de exemplo, você pode iniciar a compilação do webpack
npm início
Em seguida, use as ferramentas de desenvolvedor do WeChat para depurar o código
WeChat não suporta a criação dinâmica de elementos Dom e não é compatível com d3 Atualmente, as funções do d3 não são suportadas (está planejado para ser adaptado através de shim no futuro).
O contexto do WeChat não suporta filtros, portanto os filtros não têm efeito.
A tela do WeChat não oferece suporte a gradientes (linearGradients e createRadialGradient). Se você usar o atributo gradiente em attr, ocorrerá um erro.
A tela do WeChat não oferece suporte à criação dinâmica de contexto, portanto, a otimização do cache não pode ser usada.
Como há um problema com o recorte do simulador do WeChat, a área de recorte do elemento sprite sob o simulador pode estar incorreta.
O globalAlpha da tela do WeChat possui apenas um setter e nenhum getter. Portanto, quando o miniprograma define o atributo de opacidade, ele não pode ser colocado em cascata. A opacidade do elemento filho substituirá o valor de opacidade do contêiner pai.
