Implementierung der WeChat-Miniprogrammversion des Kartenumdrehen-Minispiels

In diesem Artikel wird hauptsächlich die WeChat-Mini-Programmversion des Karten-Flip-Minispiels im Detail vorgestellt, die einen gewissen Referenzwert hat.

Das Beispiel in diesem Artikel teilt WeChat Mini mit allen Programmversion. Der spezifische Code des Programm-Flip-Games dient als Referenz. Der spezifische Inhalt lautet wie folgt: 1. Erstellen Sie ein neues Schnellstartprojekt, um die Struktur anzuzeigen 🎜>

Tools auf WeChat entwickeln Klicken Sie auf Projekt hinzufügen, wählen Sie keine App-ID aus und aktivieren Sie „Schnellstartprojekt im aktuellen Verzeichnis erstellen“.

Sie können sehen, dass sich im Stammverzeichnis zwei Verzeichnisse, Seiten und Dienstprogramme, sowie drei App-Dateien befinden. Pages speichert die Seiten des Miniprogramms und jede Seite verfügt über einen eigenen unabhängigen Ordner. Eine Seite besteht aus 4 Dateien. Die Datei wxss ist eine von WeChat definierte Stildatei, die jedoch weniger Stile unterstützt Das Programm ähnelt in seiner Funktion HTML, es können jedoch nur einige von WeChat angepasste Tags verwendet werden, und Seitenelemente können nicht direkt mit js bearbeitet werden, sondern können nur durch Binden von Daten geändert werden. json ist die Konfigurationsdatei der Seite und wird im Allgemeinen verwendet nicht verwendet. Die Funktionen von app.js, app.json und app.wxml im Stammverzeichnis ähneln denen unter Seiten, mit der Ausnahme, dass sich die unter Seiten auf Seitenebene befinden, während sich die unter dem Stammverzeichnis auf Anwendungsebene befinden>. Eine Toolfunktion zum Konvertieren des Zeitformats wird unten in utils definiert. Anschließend wird die Funktion über module.exports verfügbar gemacht und dann über require in logs.js eingeführt.

2. Indexseite umwandeln

Sobald Sie die Struktur des Miniprogramms kennen, können Sie beginnen, die Indexseite umzuwandeln und hinzuzufügen Benutzer-Avatar. Entfernen Sie das Klickereignis und fügen Sie dann zwei Schaltflächen hinzu, um zur Hauptspieloberfläche und zur Spielergebnisoberfläche zu springen.

1. Schnittstelle, bindtap entspricht HTMLs onclick

<!--index.wxml--> 
<view class="container"> 
 <view class="userinfo"> 
 <text class="userinfo-nickname"></text> 
 <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> 
 <text class="userinfo-nickname">{{userInfo.nickName}}</text> 
 <text class="userinfo-nickname">你好</text> 
 </view> 
 <view class="usermotto" > 
 <text class="user-motto" bindtap="startGame">{{motto}}</text> 
 </view> 
 <view style="margin-top:30rpx; "> 
 <text class="user-motto" bindtap="viewScore" >查看排名</text> 
 </view> 
</view>

2.Auf der Seite des Index. js-Datei Fügen Sie zwei Funktionen zur Verarbeitung von Klickereignissen hinzu und verwenden Sie wx.navigateTo, um zur Zielseite zu springen

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
 motto: '开始游戏', 
 userInfo: {}, 
 welcome:'你好' 
 }, 
 //事件处理函数 
 startGame: function() { 
 wx.navigateTo({ 
  url: '../game/game' 
 }) 
 },viewScore: function() { 
 wx.navigateTo({ 
  url: '../logs/logs' 
 }) 
 }, 
 onLoad: function () { 
 console.log('onLoad') 
 var that = this 
 //调用应用实例的方法获取全局数据 
 app.getUserInfo(function(userInfo){ 
  //更新数据 
  that.setData({ 
  userInfo:userInfo 
  }) 
 }) 
 } 
})

Spielhintergrund zu 3.index hinzufügen. wxss Bild

page{background: url('../images/gamebg.jpg') center top; }

Das Obige ist der gesamte Inhalt dieses Artikels, der für das Studium aller hilfreich sein wird Achten Sie auf die chinesische PHP-Website!

Verwandte Empfehlungen:

WeChat-Applet implementiert die Funktion zur Auswahl von Städten anhand von Buchstaben

WeChat-Applet imitiert ausgewählte Meituan-Städte Implementierung

Schlangenspiel implementiert durch WeChat-Applet [mit Quellcode]

Das obige ist der detaillierte Inhalt vonImplementierung der WeChat-Miniprogrammversion des Kartenumdrehen-Minispiels. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!