sprite wxapp
v1.0.0
Esta es la versión del subprograma WeChat de spritejs. Actualmente es compatible con la mayoría de las funciones de spritejs v 2.0. Para obtener más información, consulte el documento de ayuda.
La propiedad Sprite se actualiza automáticamente (por lotes) y se vuelve a dibujar
Utilice rpx como unidad predeterminada
Soporte de animación API de animaciones web
Mecanismo de eventos de soporte
Después de la versión v1.10.0, la versión mini del programa admite la instalación de NPM.
npm instala @spritejs/wxapp --save
Luego cree el paquete NPM en el subprograma WeChat.
Una vez instalado y creado, la forma más sencilla de utilizar SpriteJS es a través del componente de escena integrado.
Registre el componente en la configuración del mini programa app.json:
"usingComponents": {"s-scene": "@spritejs/wxapp/scene"
}Luego introduzca el componente en la página que desea utilizar:
<ver> <s-scene id="contenedor"capas="bglayer,fglayer"bindSceneCreated="onSceneCreated" >>s-escena> </vista>
Las capas de parámetros indican cuántas capas crear y sus ID. El valor predeterminado es el predeterminado.
bindSceneCreated es el evento de devolución de llamada después de crear la escena y las capas creadas se devuelven en el método del evento:
const { Sprite } = require('@spritejs/wxapp');Página({
onSceneCreated({ detalle: capas }) {const { bglayer, fglayer } = capas; const s = nuevo Sprite({ tamaño: [100, 100], pos: [300, 300], bgcolor: 'rojo',}); fglayer.append(s);const s2 = nuevo Sprite({ tamaño: [300, 300], pos: [200, 200], bgcolor: 'azul',});bglayer.append(s2);s.on('touchstart', () => { s.attr('bgcolor', 'verde');}) ;s.on('touchmove', () => { s.attr('bgcolor', 'amarillo');});s.on('touchend', () => { s.attr('bgcolor', 'rojo');});
},});Si no desea utilizar componentes, también puede crear el lienzo usted mismo y luego construir la escena.
<vista clase="diseño de escena" id="contenedor" catchtouchmove="noop">
<bloque wx:for="{{capas}}" wx:key="{{item}}">
<canvas canvas-id="{{item}}" enable-scroll="true"></canvas>
</bloque>
</vista> const spritejs = require('@spritejs/wxapp');Página({
datos: {capas: ['fglayer'], eventOffset: [0, 0],
},
onTouchStart(event) {// Enviar evento de inicio táctil this.scene.layer('fglayer').dispatchEvent(event, this.data.eventOffset);
},
onReady: function() {// Dado que el diseño de la escena del evento proxy puede estar desplazado en relación con la ventana, este desplazamiento debe pasarse // para posicionar correctamente las coordenadas del 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');// Precargar recursos scene.preload([ ' ../../assets/img/birds.png', require('../../assets/img/birds.json.js')]);const bird = nuevo spritejs.Sprite('bird1.png');bird.attr({ Anchor: [0.5, 0.5], pos: [100, 200],});//Agregar evento ontouch bird.on('touchstart', evt = > { console.log(evt)});// Animación de textura let i = 0; setInterval(() => { bird.textures = [`bird${i++%3+1}.png`];}, 100);//Agregar texto const text = new spritejs.Label('¡Hola mundo!');text.attr({ //anchor: [ 0.5, 0.5], fuente: '44px Arial', borde: [2, 'rojo'],}); const posFrom = [0, 0]; [100, 0]; // Reproduce una animación de cambio text.animate([ {pos: posFrom}, {pos: posTo},], {duración: 2000}); // Agrega dos sprites a Layerlayer.append (bird, texto);
},})Tenga en cuenta que cuando lo llama usted mismo, debe configurar el atributo canvas-id para que sea coherente con el ID de la capa creada al crear el lienzo.
A diferencia de la versión web/nodo, el constructor de escena de la versión mini del programa solo puede pasar ancho y alto, y la unidad es rpx. rpx es una unidad exclusiva de los mini programas de WeChat. Consulte la documentación para obtener una descripción detallada.
const info = wx.getSystemInfoSync();const scene = new Scene(750, 1433 // La unidad es rpx);
Si se usa a través de la carga de componentes, la escena representa automáticamente eventos como touchstart, touchend, touchmove, tap, longpress etc., por lo que puede agregar la función de procesamiento de eventos correspondiente al elemento sprite para activar el evento normalmente.
Si crea la escena usted mismo, deberá representar manualmente el evento usted mismo:
<!--index.wxml--><view class="diseño de escena" id="contenedor">
<bloque wx:for="{{capas}}" wx:key="{{item}}">
<canvas canvas-id="{{item}}" bindtouchstart="tocado"></canvas>
</bloque>
</vista> const spritejs = require('@spritejs/wxapp')Página({
datos: {capas: ['fglayer'], eventOffset: [0, 0],
},
tocado: función (evento) {this.scene.layer ('fglayer').delegateEvent (evento, this.data.eventOffset);
},
onReady: function() {// Dado que el diseño de la escena del evento proxy puede estar desplazado en relación con la ventana, este desplazamiento debe pasarse // para posicionar correctamente las coordenadas del 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');// Si se usa en un componente personalizado, pase el segundo parámetro es una referencia a la instancia del componente. // capa constante = escena.capa('fglayer', esto)
... },})WeChat no admite la creación dinámica de elementos, por lo que primero debe crear el lienzo en la plantilla y asignarlo al ID del lienzo correspondiente.
Actualmente, no admite la carga de URL remotas y solo admite materiales de imágenes locales. Además, la versión web/nodo de Sprite puede precargar imágenes y obtener el ancho y alto de la imagen, por lo que Sprite puede adaptarse al ancho y alto de forma predeterminada. , Mientras que la versión del subprograma WeChat no usa el paquete de texturas para empaquetar imágenes, de lo contrario no se pueden obtener el ancho y el alto predeterminados, y el ancho y el alto deben especificarse antes de que se pueda mostrar el objeto sprite.
También tenga en cuenta que cuando scene.preload precarga recursos de marcos, no se admite la carga de frameData desde un archivo json. Debe ser un objeto js. Puede guardar frameData como js y luego solicitarlo en la aplicación.
Además, las funciones de rotación y recorte del empaquetador de texturas no son compatibles actualmente.
// La escena.preload de la versión del subprograma WeChat es sincrónica scene.preload(['../../assets/img/birds.png', require('../../assets/img/birds.json .js' )])const sprite1 = nuevo Sprite('bird1.png') sprite1.attr({
pos: [0, 0],})// Las imágenes cargadas desde fotogramas tienen tamaños predeterminados y se pueden mostrar normalmente scene.layer().append(sprite1)const sprite2 = new Sprite('../../assets/ img /rambda.png')sprite2.attr({
posición: [50, 50],
tamaño: [100, 100], // Las imágenes sin marcos deben especificar ancho y alto}) scene.layer().append(sprite2) Hemos colocado un ejemplo del minijuego "Diez gotas de agua" en la carpeta app .
Para depurar el código de ejemplo, puede iniciar la compilación del paquete web.
inicio de npm
Luego use las herramientas de desarrollo de WeChat para depurar el código.
WeChat no admite la creación dinámica de elementos Dom y no es compatible con d3. Actualmente, las funciones de d3 no son compatibles por el momento (está previsto adaptarlas mediante shim en el futuro).
El contexto de WeChat no admite filtros, por lo que los filtros no tienen ningún efecto.
El lienzo de WeChat no admite gradientes (linearGradients y createRadialGradient). Si usa el atributo de gradiente en attr, se producirá un error.
El lienzo de WeChat no admite la creación dinámica de contexto, por lo que no se puede utilizar la optimización del almacenamiento en caché.
Dado que hay un problema con el recorte del simulador de WeChat, el área de recorte del elemento sprite puede ser incorrecta en el simulador.
El globalAlpha del lienzo de WeChat solo tiene un definidor y no un captador. Por lo tanto, cuando el mini programa establece el atributo de opacidad, no se puede conectar en cascada. La opacidad del elemento secundario sobrescribirá el valor de opacidad del contenedor principal.
