WeChat-Applet
WeChat-Entwicklung
Eine Einführung in WeChat-Minispiele basierend auf WeChat-Entwicklungstools
Eine Einführung in WeChat-Minispiele basierend auf WeChat-Entwicklungstools
Jul 26, 2018 pm 03:04 PM
Der Artikel erkl?rt es ausführlich, sodass Sie schnell loslegen k?nnen , gehen Sie zur Download-Seite für Entwicklertools und laden Sie das entsprechende Installationspaket entsprechend Ihrem Betriebssystem herunter und installieren Sie es. Als N?chstes k?nnen Sie WeChat-Minispiele entwickeln.
Dein erstes Minispiel
Erstelle ein neues Projekt, w?hle das Miniprogrammprojekt und dann die Festplatte aus Pfad, in dem der Code gespeichert ist. Derzeit ist für das Minispiel keine ?ffentliche Registrierung m?glich. Sie k?nnen klicken, um das Minispiel im AppID-losen Modus zu erleben. Geben Sie Ihrem Projekt einen sch?nen Namen und aktivieren Sie abschlie?end ?Schnellstartvorlage für ein Spiel erstellen“ (Hinweis: Sie müssen ein leeres Verzeichnis ausw?hlen, um diese Option zu nutzen). Klicken Sie auf ?OK“ und Sie erhalten Ihr erstes Projekt. Es ist ein kleines Spiel.
Klicken Sie im oberen Menü auf ?Kompilieren“, um eine Vorschau Ihres ersten Minispiels in der IDE anzuzeigen.
Echte Ger?tevorschau
Klick-Tool Sie k?nnen die Leistung dieses Minispiels in der Simulatoroberfl?che auf der linken Seite des Tools sehen, indem Sie auf die Schaltfl?che ?Kompilieren“ klicken. Klicken Sie auf die Vorschau-Schaltfl?che, um Ihr erstes Minispiel auf Ihrem Telefon durch WeChat-Scannen zu erleben.
Dateistruktur
Nur ??Minispiele Die folgenden zwei notwendigen Dateien:
game.js Minispiel-Eintragsdatei
Spiel .json-Konfigurationsdatei
Konfiguration
Kleine Spieleentwickler schreiben in das Stammverzeichnis Eine game.json-Datei ist konfiguriert. Entwicklertools und Clients müssen diese Konfiguration lesen, um die zugeh?rigen Schnittstellenrendering- und Eigenschaftseinstellungen abzuschlie?en.
Ger?teausrichtung
Beispielkonfiguration
1 23 4
| console.log(canvas.width, canvas.height) |
| 1 | var context = canvas.getContext('2d') context.fillStyle = 'red' context.fillRect(0, 0, 100, 100)< /td> |
此時創(chuàng)建的 canvas 已經(jīng)顯示在了屏幕上，且與屏幕等寬等高。
1 | console.log(canvas.width, canvas.height) |
但是由于沒有在 canvas 上進行繪制，所以 canvas 是透明的。使用 2d 渲染上下文的進行簡單的繪制，可以在屏幕左上角看到一個 100x100 的紅色矩形。
1 2 3 | var context = canvas.getContext('2d') context.fillStyle = 'red' context.fillRect(0, 0, 100, 100) |
通過 Canvas.getContext() 方法可以獲取 2d 或 WebGL 渲染上下文 RenderingContext，調(diào)用渲染上下文的繪制方法可以在 Canvas 上進行繪制。小游戲基本上支持 2d 和 WebGL 1.0 所有的屬性和方法，詳情請見 RenderingContext。由于使用 WebGL 的繪制過程較為復(fù)雜，所以本文中的示例代碼都以 2d 渲染上下文的繪制方法編寫。
通過設(shè)置 width 和 height 屬性可以改變 Canvas 對象的寬高，但這也會導(dǎo)致 Canvas 內(nèi)容的清空和渲染上下文的重置。
1 2 | canvas.width = 300 canvas.height = 300 |
顯示圖片
通過 wx.createImage() 接口，可以創(chuàng)建一個 Image 對象。Image 對象可以加載圖片。當(dāng) Image 對象被繪制到 Canvas 上時，圖片才會顯示在屏幕上。
1 | varimage = wx.createImage() |
設(shè)置 Image 對象的 src 屬性可以加載一張本地圖片或網(wǎng)絡(luò)圖片，當(dāng)圖片加載完畢時會執(zhí)行注冊的 onload 回調(diào)函數(shù)，此時可以將 Image 對象繪制到 Canvas 上。
1 2 3 4 5 | image.onload = function () {
console.log(image.width, image.height)
context.drawImage(image, 0, 0)
}
image.src = 'logo.png' |
創(chuàng)建多個 Canvas
在整個小游戲運行期間，首次調(diào)用 wx.createCanvas 接口創(chuàng)建的是一個上屏 Canvas。在這個 canvas 上繪制的內(nèi)容都將顯示在屏幕上。而第二次、第三次等后幾次調(diào)用 wx.createCanvas 創(chuàng)建的都會是離屏 Canvas。在離屏 Canvas 上繪制的內(nèi)容僅僅只是繪制到了這個離屏 Canvas 上，并不會顯示在屏幕上。
以如下代碼為例，運行后會發(fā)現(xiàn)屏幕上并沒有在 (0, 0) 的位置顯示 100x100 的紅色矩形。因為我們是在一個離屏的 Canvas 繪制的。
1 2 3 4 5 | var screenCanvas = wx.createCanvas() var offScreenCanvas = wx.createCanvas() var offContext = offScreenCanvas.getContext('2d') offContext.fillStyle = 'red' offContext.fillRect(0, 0, 100, 100) |
為了讓這個紅色矩形顯示在屏幕上，我們需要把離屏的 offScreenCanvas 繪制到上屏的 screenCanvas 上。
1 2 | var screenContext = screenCanvas.getContext('2d') screenContext.drawImage(offScreenCanvas, 0, 0) |
動畫
在 JavaScript 中，一般通過 setInterval/setTimeout/requestAnimationFrame 來實現(xiàn)動畫效果。小游戲?qū)@些 API 提供了支持：
setInterval()
setTimeout()
requestAnimationFrame()
clearInterval()
clearTimeout()
cancelAnimationFrame()
另外，還可以通過 wx.setPreferredFramesPerSecond() 修改執(zhí)行 requestAnimationFrame 回調(diào)函數(shù)的頻率，以降低性能消耗。
觸摸事件
響應(yīng)用戶與屏幕的交互是游戲中必不可少的部分，小游戲參照 DOM 中的 TouchEvent 提供了以下監(jiān)聽觸摸事件的 API：
wx.onTouchStart()
wx.onTouchMove()
wx.onTouchEnd()
wx.onTouchCancel()
01 02 03 04 05 06 07 08 09 10 11 12 13 14 | wx.onTouchStart(function (e) {
console.log(e.touches)
})
wx.onTouchMove(function (e) {
console.log(e.touches)
})
wx.onTouchEnd(function (e) {
console.log(e.touches)
})
wx.onTouchCancel(function (e) {
console.log(e.touches) |
相關(guān)文章:
微信公眾平臺開發(fā)實現(xiàn)2048游戲的方法，公眾2048
相關(guān)視頻：
Das obige ist der detaillierte Inhalt vonEine Einführung in WeChat-Minispiele basierend auf WeChat-Entwicklungstools. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Tutorial zur Verwendung von Dewu
Mar 21, 2024 pm 01:40 PM
Dewu APP ist derzeit eine sehr beliebte Marken-Shopping-Software, aber die meisten Benutzer wissen nicht, wie sie die Funktionen in Dewu APP verwenden. Nachfolgend finden Sie eine Zusammenfassung des Dewuduo-Tutorials Interessierte Benutzer k?nnen vorbeikommen und einen Blick darauf werfen! Tutorial zur Verwendung von Dewu [20.03.2024] Verwendung des Dewu-Ratenkaufs [20.03.2024] So erhalten Sie Dewu-Gutscheine [20.03.2024] So finden Sie den manuellen Kundendienst von Dewu [2024-03- 20] So überprüfen Sie den Abholcode von Dewu [20.03.2024] Wo Sie Dewu kaufen k?nnen [20.03.2024] So er?ffnen Sie Dewu VIP [20.03.2024] So beantragen Sie die Rückgabe oder den Umtausch von Dewu
Tutorial zu DisplayX (Monitortestsoftware).
Mar 04, 2024 pm 04:00 PM
Das Testen eines Monitors beim Kauf ist ein wesentlicher Bestandteil, um den Kauf eines besch?digten Monitors zu vermeiden. Heute werde ich Ihnen beibringen, wie Sie den Monitor mit Software testen. Methodenschritt 1. Suchen Sie zun?chst auf dieser Website nach der DisplayX-Software, laden Sie sie herunter, installieren Sie sie und ?ffnen Sie sie. Sie werden dann viele Erkennungsmethoden sehen, die den Benutzern zur Verfügung gestellt werden. 2. Der Benutzer klickt auf den regul?ren Volltest. Der erste Schritt besteht darin, die Helligkeit des Displays zu testen. Der Benutzer stellt die Anzeige so ein, dass die K?stchen deutlich sichtbar sind. 3. Klicken Sie dann mit der Maus, um den n?chsten Link einzugeben. Wenn der Monitor jeden schwarzen und wei?en Bereich unterscheiden kann, bedeutet dies, dass der Monitor immer noch in Ordnung ist. 4. Klicken Sie erneut mit der linken Maustaste und Sie sehen den Graustufentest des Monitors. Je glatter der Farbübergang, desto besser der Monitor. 5. Darüber hinaus haben wir in der DisplayX-Software
Im Sommer müssen Sie unbedingt versuchen, einen Regenbogen zu schie?en
Jul 21, 2024 pm 05:16 PM
Nach dem Regen im Sommer k?nnen Sie oft ein wundersch?nes und magisches besonderes Wetterbild sehen – den Regenbogen. Dies ist auch eine seltene Szene, die man in der Fotografie antreffen kann, und sie ist sehr fotogen. Für das Erscheinen eines Regenbogens gibt es mehrere Bedingungen: Erstens sind genügend Wassertr?pfchen in der Luft und zweitens scheint die Sonne in einem niedrigeren Winkel. Daher ist es am einfachsten, einen Regenbogen am Nachmittag zu sehen, nachdem der Regen nachgelassen hat. Allerdings wird die Bildung eines Regenbogens stark von Wetter, Licht und anderen Bedingungen beeinflusst, sodass sie im Allgemeinen nur von kurzer Dauer ist und die beste Betrachtungs- und Aufnahmezeit sogar noch kürzer ist. Wenn Sie also auf einen Regenbogen sto?en, wie k?nnen Sie ihn dann richtig aufzeichnen und qualitativ hochwertige Fotos machen? 1. Suchen Sie nach Regenb?gen. Zus?tzlich zu den oben genannten Bedingungen erscheinen Regenb?gen normalerweise in Richtung des Sonnenlichts, das hei?t, wenn die Sonne von Westen nach Osten scheint, ist es wahrscheinlicher, dass Regenb?gen im Osten erscheinen.
Welche Software ist Photoshopcs5? -tutorial zur Verwendung von Photoshopcs5
Mar 19, 2024 am 09:04 AM
PhotoshopCS ist die Abkürzung für Photoshop Creative Suite. Es handelt sich um eine von Adobe hergestellte Software, die h?ufig im Grafikdesign und in der Bildverarbeitung verwendet wird. Lassen Sie mich Ihnen heute erkl?ren, was Photoshopcs5 ist und wie Sie Photoshopcs5 verwenden. 1. Welche Software ist Photoshop CS5? Adobe Photoshop CS5 Extended ist ideal für Profis in den Bereichen Film, Video und Multimedia, Grafik- und Webdesigner, die 3D und Animation verwenden, sowie Profis in den Bereichen Technik und Wissenschaft. Rendern Sie ein 3D-Bild und fügen Sie es zu einem zusammengesetzten 2D-Bild zusammen. Bearbeiten Sie Videos einfach
Ein einfaches Tutorial zum Konvertieren von englischen Buchstaben voller Breite in Buchstaben halber Breite
Mar 25, 2024 pm 09:21 PM
Wenn wir zur Eingabe von Englisch einen Computer verwenden, sto?en wir manchmal auf den Unterschied zwischen englischen Buchstaben voller Breite und englischen Buchstaben halber Breite. Englische Buchstaben in voller Breite beziehen sich auf die Zeichen, die durch Drücken der Umschalttaste und der Tastenkombination für englische Buchstaben eingegeben werden, wenn die Eingabemethode im chinesischen Modus ist. Sie nehmen eine Zeichenbreite in voller Breite ein. Englische Buchstaben mit halber Breite beziehen sich auf Zeichen, die direkt eingegeben werden, wenn die Eingabemethode im englischen Modus ist, und nehmen eine halbe Zeichenbreite ein. In einigen F?llen müssen wir m?glicherweise englische Buchstaben voller Breite in Buchstaben halber Breite umwandeln. Hier ist eine einfache Anleitung: ?ffnen Sie zun?chst einen Texteditor oder einen anderen
PHP-Tutorial: So konvertieren Sie den Typ int in einen String
Mar 27, 2024 pm 06:03 PM
PHP-Tutorial: So konvertieren Sie den Int-Typ in einen String. In PHP ist das Konvertieren von Ganzzahldaten in einen String ein h?ufiger Vorgang. In diesem Tutorial erfahren Sie, wie Sie die in PHP integrierten Funktionen verwenden, um den Typ int in einen String zu konvertieren, und stellen gleichzeitig spezifische Codebeispiele bereit. Cast verwenden: In PHP k?nnen Sie Cast verwenden, um ganzzahlige Daten in einen String umzuwandeln. Diese Methode ist sehr einfach. Sie müssen lediglich (string) vor den ganzzahligen Daten hinzufügen, um sie in einen String umzuwandeln. Unten finden Sie einen einfachen Beispielcode
Anleitung zum Deaktivieren des Zahlungstons auf WeChat
Mar 26, 2024 am 08:30 AM
1. ?ffnen Sie zun?chst WeChat. 2. Klicken Sie oben rechts auf [+]. 3. Klicken Sie auf den QR-Code, um die Zahlung einzuziehen. 4. Klicken Sie auf die drei kleinen Punkte in der oberen rechten Ecke. 5. Klicken Sie auf , um die Spracherinnerung für den Zahlungseingang zu schlie?en.
Experten unterrichten Sie! Der richtige Weg, lange Bilder auf Huawei-Handys zu schneiden
Mar 22, 2024 pm 12:21 PM
Mit der kontinuierlichen Weiterentwicklung von Smartphones sind die Funktionen von Mobiltelefonen immer leistungsf?higer geworden, darunter die Funktion zum Aufnehmen langer Bilder zu einer der wichtigen Funktionen, die viele Benutzer im t?glichen Leben nutzen. Lange Screenshots k?nnen Benutzern dabei helfen, eine lange Webseite, Gespr?chsaufzeichnung oder ein Bild gleichzeitig zu speichern, um sie einfacher anzeigen und teilen zu k?nnen. Unter vielen Mobiltelefonmarken geh?ren auch Huawei-Handys zu den Marken, die von den Nutzern sehr gesch?tzt werden, und auch ihre Funktion zum Zuschneiden langer Bilder wird hoch gelobt. In diesem Artikel erfahren Sie, wie Sie lange Bilder mit Huawei-Mobiltelefonen richtig aufnehmen, und erhalten einige Expertentipps, die Ihnen dabei helfen, Huawei-Mobiltelefone besser zu nutzen.
