So implementieren Sie das Minispiel zum Umdrehen von Karten im WeChat-Miniprogramm

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 🎜>Klicken Sie im WeChat-Entwicklungstool 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 zunächst die Indexseite umwandeln und das Klickereignis ändern Entfernen Sie den Avatar des Benutzers 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. Fügen Sie zwei Funktionen hinzu, um Klickereignisse in der Seite der Datei index.js zu verarbeiten, und verwenden Sie wx.navigateTo, um zu springen das Ziel Ein Spielhintergrundbild zur Seite hinzufügen

//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 
  }) 
 }) 
 } 
})

3.index.wxss

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Wie Vux die Pull-up-Refresh-Funktion implementiert

Wie jQuery das Bildkarussell implementiert

Wie jQuery verhindert, dass dasselbe Ereignis wiederholt und schnell ausgelöst wird

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Minispiel zum Umdrehen von Karten im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!