sprite wxapp
v1.0.0
هذا هو إصدار برنامج WeChat الصغير من spritejs وهو يدعم حاليًا معظم وظائف spritejs v 2.0. للحصول على التفاصيل، يرجى الرجوع إلى مستند المساعدة.
يتم إعادة رسم تحديثات خاصية Sprite تلقائيًا (مجمعة).
استخدم rpx كوحدة افتراضية
الرسوم المتحركة تدعم واجهة برمجة تطبيقات الرسوم المتحركة على الويب
دعم آلية الحدث
بعد الإصدار v1.10.0، يدعم إصدار البرنامج المصغر تثبيت NPM.
تثبيت npm @spritejs/wxapp --حفظ
ثم قم ببناء حزمة NPM في تطبيق WeChat الصغير.
بمجرد التثبيت والإنشاء، فإن أسهل طريقة لاستخدام SpriteJS هي من خلال مكون المشهد المدمج.
قم بتسجيل المكون في app.json لتكوين البرنامج المصغر:
"usingComponents": {"s-scene": "@spritejs/wxapp/scene"
}ثم قم بتقديم المكون على الصفحة التي تريد استخدامها:
<عرض> <s-scene id = "container"layers = "bglayer، fglayer"bindSceneCreated = "onSceneCreated" ><</s-المشهد> </عرض>
تشير طبقات المعلمات إلى عدد الطبقات التي سيتم إنشاؤها ومعرفاتها. الإعداد الافتراضي هو.
bindSceneCreated هو حدث رد الاتصال بعد إنشاء المشهد، ويتم إرجاع الطبقات التي تم إنشاؤها في طريقة الحدث:
const { Sprite } = require('@spritejs/wxapp');Page({
onSceneCreated({ التفاصيل: طبقات }) {const { bglayer, fglayer } = طبقات;const s = new Sprite({ size: [100, 100], pos: [300, 300], bgcolor: 'red',}); fglayer.append(s);const s2 = new Sprite({ الحجم: [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');});
},});إذا كنت لا تريد استخدام المكونات، يمكنك أيضًا إنشاء اللوحة القماشية بنفسك ثم إنشاء المشهد
<عرض الطبقة = "المشهد تخطيط" id = "حاوية" كاتش تاتش موف = "نوب">
<block wx:for="{{layers}}" wx:key="{{item}}">
<canvas Canvas-id="{{item}}" Disable-scroll="true"></canvas>
</بلوك>
</عرض> const spritejs = require('@spritejs/wxapp');Page({
البيانات: {الطبقات: ['fglayer']، إيفينت أوفست: [0، 0]،
},
onTouchStart(event) {// إرسال حدث touchstart this.scene.layer('fglayer').dispatchEvent(event, this.data.eventOffset);
},
onReady: function() {// نظرًا لأن تخطيط المشهد لحدث الوكيل قد يتم إزاحته بالنسبة للنافذة، فيجب تمرير هذه الإزاحة // لوضع إحداثيات الحدث بشكل صحيح const query = wx.createSelectorQuery();query .select( '.scene-layout').boundingClientRect().exec(([rect]) => { if(rect) {this.setData({ eventsOffset: [rect.left, rect.top],}); }});const scene = new spritejs.Scene();this.scene = scene;const Layer = scene.layer('fglayer');// التحميل المسبق للموارد scene.preload([ ' ../../assets/img/birds.png', require('../../assets/img/birds.json.js')]);constbird = new spritejs.Sprite('bird1.png');bird.attr({ مرساة: [0.5, 0.5], pos: [100, 200],});// إضافة حدث ontouch Bird.on('touchstart', evt = > { console.log(evt)});// الرسوم المتحركة للنسيج Let i = 0; setInterval(() => {bird.textures = [`bird${i++%3+1}.png`];}, 100);// أضف نص const text = new spritejs.Label('Hellon World!');text.attr({ //anchor: [ 0.5, 0.5]، الخط: '44px Arial'، الحد: [2، 'red']،})؛ const posFrom = [0, 0]; [100, 0]; // تشغيل الرسوم المتحركة النصية text.animate([ {pos: posFrom}, {pos: posTo},], { Duration: 2000}); // أضف اثنين من النقوش المتحركة إلى Layerlayer.append (bird, نص)؛
},})لاحظ أنه عندما تستدعيها بنفسك، فإنك تحتاج إلى تعيين سمة معرف اللوحة القماشية لتكون متسقة مع معرف الطبقة التي تم إنشاؤها عند إنشاء اللوحة القماشية.
يختلف مُنشئ المشهد في إصدار البرنامج المصغر عن إصدار الويب/العقدة، حيث يمكنه فقط تمرير العرض والارتفاع، والوحدة هي rpx. rpx هي وحدة فريدة لبرامج WeChat mini. يرجى الرجوع إلى الوثائق للحصول على وصف تفصيلي.
const info = wx.getSystemInfoSync();const scene = new Scene(750, 1433); // الوحدة هي rpx
إذا تم استخدامها من خلال تحميل المكونات، فإن الأحداث مثل touchstart, touchend, touchmove, tap, longpress وما إلى ذلك يتم توكيلها تلقائيًا بواسطة المشهد، حتى تتمكن من إضافة وظيفة معالجة الحدث المقابلة إلى عنصر الصورة المتحركة لتشغيل الحدث بشكل طبيعي.
إذا قمت بإنشاء المشهد بنفسك، فستحتاج إلى وكيل الحدث يدويًا بنفسك:
<!--index.wxml--><view class="scene-layout" id="container">
<block wx:for="{{layers}}" wx:key="{{item}}">
<canvas Canvas-id="{{item}}" bindtouchstart="touched"></canvas>
</بلوك>
</عرض> const spritejs = require('@spritejs/wxapp')Page({
البيانات: {الطبقات: ['fglayer']، إيفينت أوفست: [0، 0]،
},
تم لمسها: الوظيفة (الحدث) {this.scene.layer('fglayer').delegateEvent(event, this.data.eventOffset);
},
onReady: function() {// نظرًا لأن تخطيط المشهد لحدث الوكيل قد يتم إزاحته بالنسبة للنافذة، فيجب تمرير هذه الإزاحة // لوضع إحداثيات الحدث بشكل صحيح const query = wx.createSelectorQuery();query .select( '.scene-layout').boundingClientRect().exec(([rect]) => { if(rect) {this.setData({ eventsOffset: [rect.left, rect.top],}); }});const scene = new spritejs.Scene();this.scene = scene;const Layer = scene.layer('fglayer');// إذا تم استخدامه في مكون مخصص، فسيتم تمريره المعلمة الثانية مرجع لمثيل المكون. // طبقة const = مشهد. طبقة ('fglayer'، هذا)
... },})لا يدعم WeChat الإنشاء الديناميكي للعناصر، لذا يجب إنشاء اللوحة القماشية في القالب أولاً وتعيينها لمعرف اللوحة المقابل.
حاليًا، لا يدعم تحميل عناوين URL البعيدة ويدعم فقط مواد الصور المحلية، بالإضافة إلى ذلك، يمكن لإصدار الويب/العقدة من Sprite تحميل الصور مسبقًا والحصول على عرض الصورة وارتفاعها، بحيث يمكن للكائن أن يتكيف مع العرض والارتفاع بشكل افتراضي. ، في حين أن إصدار برنامج WeChat الصغير لا يستخدم Texturepacker لحزم الصور، وإلا فلن يمكن الحصول على العرض والارتفاع الافتراضيين، ويجب تحديد العرض والارتفاع قبل عرض كائن الكائن.
لاحظ أيضًا أنه عندما يقوم Scene.preload بتحميل موارد الإطارات مسبقًا، لا يتم دعم تحميل بيانات الإطارات من ملف json، ويجب أن يكون كائنًا js. ويمكنك حفظ بيانات الإطارات بتنسيق js ثم طلبها في التطبيق.
بالإضافة إلى ذلك، فإن الوظائف المدورة والمقتطعة لأداة تعبئة النسيج غير مدعومة حاليًا.
// مشهد التحميل المسبق لإصدار WeChat الصغير هو مشهد متزامن.preload(['../../assets/img/birds.png', require('../../assets/img/birds.json .js' )])const sprite1 = new Sprite('bird1.png') sprite1.attr({
pos: [0, 0],})// الصور المحملة من الإطارات لها أحجام افتراضية ويمكن عرضها بشكل طبيعي scene.layer().append(sprite1)const sprite2 = new Sprite('../../assets/ img /rambda.png')sprite2.attr({
نقاط البيع: [50، 50]،
الحجم: [100، 100]، // يجب أن تحدد الصور غير الإطارات العرض والارتفاع}) scene.layer().append(sprite2) لقد وضعنا مثالاً للعبة المصغرة "Ten Drops of Water" في مجلد app .
لتصحيح كود المثال، يمكنك البدء في تجميع حزمة الويب
بداية npm
ثم استخدم أدوات مطور WeChat لتصحيح التعليمات البرمجية
لا يدعم WeChat الإنشاء الديناميكي لعناصر Dom وهو غير متوافق مع d3. حاليًا، وظائف d3 غير مدعومة (من المخطط أن يتم تكييفها من خلال shim في المستقبل).
لا يدعم سياق WeChat المرشحات، لذلك ليس للمرشحات أي تأثير.
لا تدعم لوحة WeChat التدرجات (linearGradients وcreateRadialGradient). إذا كنت تستخدم سمة التدرج في attr، فسيحدث خطأ.
لا تدعم لوحة WeChat الإنشاء الديناميكي للسياق، لذلك لا يمكن استخدام تحسين التخزين المؤقت.
نظرًا لوجود مشكلة في قص محاكي WeChat، فقد تكون منطقة القطع لعنصر الكائنات الموجودة أسفل المحاكي غير صحيحة.
تحتوي لوحة قماش WeChat العالمية على أداة ضبط فقط ولا تحتوي على مُحضر. لذلك، عندما يقوم البرنامج المصغر بتعيين سمة العتامة، لا يمكن تتاليها، حيث ستحل عتامة العنصر الفرعي محل قيمة العتامة للحاوية الرئيسية.
