Implementierung des WeChat Mini-Programms Flip Game

Dieser Artikel stellt hauptsächlich die WeChat-Miniprogrammversion des Kartendrehspiels vor. Ich hoffe, dass er jedem helfen kann.

1. Erstellen Sie ein neues Schnellstartprojekt und sehen Sie sich die Struktur an

Klicken Sie im WeChat-Entwicklungstool auf „Projekt hinzufügen“, wählen Sie „Keine App“ und aktivieren Sie „In“. das aktuelle Verzeichnis „Schnellstartprojekt 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. js-Datei Zwei Funktionen, die Klickereignisse verarbeiten. 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 
  }) 
 }) 
 } 
})

3. Fügen Sie ein Spielhintergrundbild zum Index hinzu. wxss

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

Verwandte Empfehlungen:

So verhindern Sie Mehrfachklicksprünge bei Verwendung der Funktionsdrosselung des WeChat-Miniprogramms

So erhalten Sie Benutzerinformationen über das WeChat-Miniprogramm

Eine WeChat-Miniprogrammversion der Zhihu-Beispielfreigabe

Das obige ist der detaillierte Inhalt vonImplementierung des WeChat Mini-Programms Flip Game. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!