sprite wxapp
v1.0.0
Dies ist die WeChat-Applet-Version von SpriteJS. Sie unterstützt derzeit die meisten Funktionen von SpriteJS Version 2.0. Weitere Informationen finden Sie im Hilfedokument.
Sprite-Eigenschaften werden automatisch (im Stapel) aktualisiert und neu gezeichnet
Verwenden Sie rpx als Standardeinheit
Animationsunterstützung Web Animations API
Unterstützen Sie den Ereignismechanismus
Nach Version v1.10.0 unterstützt die Miniprogrammversion die NPM-Installation.
npm install @spritejs/wxapp --save
Erstellen Sie dann das NPM-Paket im WeChat-Applet.
Nach der Installation und Erstellung lässt sich SpriteJS am einfachsten über die integrierte Szenenkomponente verwenden.
Registrieren Sie die Komponente in der Miniprogrammkonfiguration app.json:
„usingComponents“: {“s-scene“: „@spritejs/wxapp/scene“
}Stellen Sie dann die Komponente auf der Seite vor, die Sie verwenden möchten:
<Ansicht> <s-scene id="container"layers="bglayer,fglayer"bindSceneCreated="onSceneCreated" ></s-szene> </view>
Der Parameter „layer“ gibt an, wie viele Layer erstellt werden sollen und welche IDs der Standardwert ist.
bindSceneCreated ist das Rückrufereignis nach dem Erstellen der Szene, und die erstellten Ebenen werden in der Ereignismethode zurückgegeben:
const { Sprite } = require('@spritejs/wxapp');Page({
onSceneCreated({ detail: Schichten }) {const { bglayer, fglayer } = Schichten;const s = new Sprite({ size: [100, 100], pos: [300, 300], bgcolor: 'red',}); fglayer.append(s);const s2 = new Sprite({ size: [300, 300], pos: [200, 200], bgcolor: 'blue',});bglayer.append(s2);s.on('touchstart', () => { s.attr('bgcolor', 'green');}) ;s.on('touchmove', () => { s.attr('bgcolor', 'yellow');});s.on('touchend', () => { s.attr('bgcolor', 'red');});
},});Wenn Sie keine Komponenten verwenden möchten, können Sie die Leinwand auch selbst erstellen und dann die Szene konstruieren
<view class="scene-layout" id="container" Catchtouchmove="noop">
<block wx:for="{{layers}}" wx:key="{{item}}">
<canvas canvas-id="{{item}}" disable-scroll="true"></canvas>
</block>
</view> const spritejs = require('@spritejs/wxapp');Page({
Daten: {layers: ['fglayer'], eventOffset: [0, 0],
},
onTouchStart(event) {// Touchstart-Ereignis auslösen this.scene.layer('fglayer').dispatchEvent(event, this.data.eventOffset);
},
onReady: function() {// Da das Szenenlayout des Proxy-Ereignisses möglicherweise relativ zum Fenster versetzt ist, muss dieser Versatz in // übergeben werden, um die Ereigniskoordinaten korrekt zu positionieren 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');// Ressourcen vorladen scene.preload([ ' ../../assets/img/birds.png', require('../../assets/img/birds.json.js')]);const Bird = new spritejs.Sprite('bird1.png');bird.attr({ Anchor: [0.5, 0.5], pos: [100, 200],});//Ontouch-Ereignis hinzufügen Bird.on('touchstart', evt = > { console.log(evt)});// Texturanimation let i = 0; setInterval(() => {bird.textures = [`bird${i++%3+1}.png`];}, 100);//Text hinzufügen const text = new spritejs.Label('Hellon World!');text.attr({ //anchor: [ 0,5, 0,5], Schriftart: '44px Arial', Rand: [2, 'rot'],}); const posFrom = [0, 0]; [100, 0]; // Eine Verschiebungsanimation abspielen text.animate([ {pos: posFrom}, {pos: posTo},], { duration: 2000}); Text);
},})Beachten Sie , dass Sie beim Erstellen der Leinwand das Attribut „canvas-id“ so festlegen müssen, dass es mit der ID der erstellten Ebene übereinstimmt, wenn Sie es selbst aufrufen.
Anders als bei der Web-/Knotenversion kann der Szenenkonstruktor der Miniprogrammversion nur Breite und Höhe übergeben, und die Einheit ist rpx. rpx ist eine einzigartige Einheit für WeChat-Miniprogramme. Eine detaillierte Beschreibung finden Sie in der Dokumentation.
const info = wx.getSystemInfoSync();const scene = new Scene(750, 1433); // Die Einheit ist rpx
Bei Verwendung über das Laden von Komponenten werden Ereignisse wie touchstart, touchend, touchmove, tap, longpress usw. automatisch von der Szene weitergeleitet, sodass Sie dem Sprite-Element die entsprechende Ereignisverarbeitungsfunktion hinzufügen können, um das Ereignis normal auszulösen.
Wenn Sie die Szene selbst erstellen, müssen Sie das Ereignis selbst manuell als Proxy bereitstellen:
<!--index.wxml--><view class="scene-layout" id="container">
<block wx:for="{{layers}}" wx:key="{{item}}">
<canvas canvas-id="{{item}}" bindtouchstart="touched"></canvas>
</block>
</view> const spritejs = require('@spritejs/wxapp')Page({
Daten: {layers: ['fglayer'], eventOffset: [0, 0],
},
berührt: function(event) {this.scene.layer('fglayer').delegateEvent(event, this.data.eventOffset);
},
onReady: function() {// Da das Szenenlayout des Proxy-Ereignisses möglicherweise relativ zum Fenster versetzt ist, muss dieser Versatz in // übergeben werden, um die Ereigniskoordinaten korrekt zu positionieren 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');// Bei Verwendung in einer benutzerdefinierten Komponente: Pass Der zweite Parameter ist ein Verweis auf die Komponenteninstanz. // const Layer = scene.layer('fglayer', this)
... },})WeChat unterstützt keine dynamische Erstellung von Elementen, daher muss der Canvas zunächst in der Vorlage erstellt und der entsprechenden Canvas-ID zugewiesen werden.
Derzeit wird das Laden von Remote-URLs nicht unterstützt, sondern nur lokales Bildmaterial. Darüber hinaus kann die Web-/Knotenversion von Sprite Bilder vorab laden und die Bildbreite und -höhe abrufen, sodass sich Sprite standardmäßig an die Breite und Höhe anpassen kann , während die WeChat-Applet-Version keinen Texturpacker zum Packen von Bildern verwendet. Andernfalls können die Standardbreite und -höhe nicht abgerufen werden und die Breite und Höhe muss angegeben werden, bevor das Sprite-Objekt angezeigt werden kann.
Beachten Sie außerdem, dass das Laden von FrameData aus einer JSON-Datei nicht unterstützt wird, wenn scene.preload ein JS-Objekt ist. Sie können FrameData als JS speichern und es dann in der App benötigen.
Darüber hinaus werden die rotierten und getrimmten Funktionen des Texture Packers derzeit nicht unterstützt.
// scene.preload der WeChat-Applet-Version ist synchron scene.preload(['../../assets/img/birds.png', require('../../assets/img/birds.json .js' )])const sprite1 = new Sprite('bird1.png') sprite1.attr({
pos: [0, 0],})// Von Frames geladene Bilder haben Standardgrößen und können normal angezeigt werden scene.layer().append(sprite1)const sprite2 = new Sprite('../../assets/ img /rambda.png')sprite2.attr({
Pos: [50, 50],
size: [100, 100], // Bilder ohne Frames müssen Breite und Höhe angeben}) scene.layer().append(sprite2) Wir haben ein Beispiel des Minispiels „Zehn Tropfen Wasser“ im app Ordner abgelegt.
Um den Beispielcode zu debuggen, können Sie die Webpack-Kompilierung starten
npm-Start
Verwenden Sie dann die WeChat-Entwicklertools, um den Code zu debuggen
WeChat unterstützt die dynamische Erstellung von Dom-Elementen nicht und ist nicht mit d3 kompatibel. Derzeit werden die Funktionen von d3 nicht unterstützt (eine Anpassung durch Shim ist in Zukunft geplant).
Der WeChat-Kontext unterstützt keine Filter, daher haben Filter keine Wirkung.
WeChat Canvas unterstützt keine Farbverläufe (linearGradients und createRadialGradient). Wenn Sie das Farbverlaufsattribut in attr verwenden, tritt ein Fehler auf.
Der Canvas von WeChat unterstützt keine dynamische Kontexterstellung, daher kann die Caching-Optimierung nicht verwendet werden.
Da beim Beschneiden des WeChat-Simulators ein Problem vorliegt, ist der Beschneidungsbereich des Sprite-Elements unter dem Simulator möglicherweise falsch.
Das globalAlpha der WeChat-Leinwand verfügt nur über einen Setter und keinen Getter. Wenn das Miniprogramm das Opazitätsattribut festlegt, kann es daher nicht kaskadiert werden. Die Opazität des untergeordneten Elements überschreibt den Opazitätswert des übergeordneten Containers.
